teleren/devto huggingface dataset:
Learn about Specificity in CSS
Tags: css, programming, tutorial, webdev
Published: 2022-09-17 13:58:54

In this article we're going to learn about the *specificity* in CSS.

## What is Specificity?
If there are two or more css rules that point to the same element, the selector with  the highest specificity value will win and its style declaration will be applied to that HTML element.

Let's checkout specificity example on codepen 👇

{% codepen https://codepen.io/Developerpinky/pen/zYjZaeM  %}

## How to calculate specificity?

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

## Conclusion

Thanks for reading this out. Please feel free to leave your comments and follow for more interesting and educative posts.

If you liked this post then you can buy Me, My first coffee ever. Thanks in advance.🙂

<a href="https://www.buymeacoffee.com/pinkylalwani" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

Happy coding!
MongoDB and its features
Tags: mongodb, technology, database, informationtechnology
Published: 2022-09-17 13:53:22

MongoDB is an open-source document-based database. It is a trending NoSQL database used in the market right now to develop modern applications. It is written in C++. 
It works on the concept of collections and documents.

**Features of MongoDB**

1) Cross Platform
2) Document based
3) High performance
4) Scalability

**Collections and Documents**

A collection is group of documents. It is similar to the table in a RDBMS database, whereas a document is a set of keys and values, it is similar to the row in RDBMS database.

**Advantages of MongoDB**

Schema less: There may not be a schema due to its document-holding pattern.

No joins: There are no complex joins, an inbuilt methods are available to get data from many collections.

Scaling: This database is very easy to scale because it contains JSON.

To continue reading [https://fsh.org.in/blog-details/Database/MongoDB+Database/23](https://fsh.org.in/blog-details/Database/MongoDB+Database/23)
Roped into UpcomingsDAO Airdrop and Whitelist is Live!
Tags: opensource, blockchain, web3, nft
Published: 2022-09-17 13:38:28

Have you registered on Upcomings yet?

Get Started Now by whitelisting at Just $1

🔹Win 10 UPCG Tokens

🔹Get Access to DApps

🔹Activate Referral

🔹Become Upcomings member

🏆 Join the Airdrop & Bounty program

Join: https://upcomings.io/register?ref=upcg

🔥🔥🔥🔥🔥🔥🔥

Upcomings is a New crypto Project, A DAO ecosystem to develop multiple DApps and solutions. Backed by $UPCG token.

DApps in Phase 1

🔹Decentralized Exchange

🔹Markets

🔹Decentralized P2P

🔹Decentralized Chat

🔹Launchpad

🔹Web3 Games

🔹Staking

#NewCryptoProject #UPCG

Team Upcomings

Webiste : https://upcomings.io/

Telegram: https://t.me/UpcomingsDAO
My first post!
Tags: beginners, opensource
Published: 2022-09-17 13:18:05

Hello everyone!

My name is Gulnur and this is my very first blog post. I am very excited! 

A little bit about myself - I am a sixth-semester student in the Computer Programming and Analysis program at Seneca College. In the past, I used to participate in lots of competitive programming contests and that was how I got into algorithms. Right now, I am shifting my focus and I independently growing my skills in Machine Learning.

The reason behind this post is that I am taking an Open Source Development course as part of my program. I got very interested in it because of a huge popularity and success I have been noticing lately around this topic. One of the examples I heard about was Tesla sharing all of it development informational freely to all the public. It helped a lot to improve the industry of electric and sustainable transportation. In this term, I am hoping to achieve a good fundamental understanding of open source concepts and methods, learn about the best practices and start exploring myself. It would be great to also have a part or a complete project that combines my current skills and open source together by the end of the semester. 

There was a task to pick a trending repo that is of interest to us and my choice fell on the repo called [diffusers](https://github.com/huggingface/diffusers). I decided to go through the monthly trends as they seem to show the longest attention holders. This particular one about the text-to-image diffusion model was very interesting to me a from an ML point of view as well as open source: it has constant releases, nice documentation and lots of happy users. 

Thanks for reading my first post,

Gulnur
Final Value of Variable After Performing Operations
Tags: javascript, webdev, programming, tutorial
Published: 2022-09-17 13:15:59


**Final Value of Variable After Performing Operations
(LeetCode easy problem)**

There is a programming language with only four operations and one variable X:

```
++X and X++ increments the value of the variable X by 1.
--X and X-- decrements the value of the variable X by 1.
```

Initially, the value of X is 0.

Given an array of strings operations containing a list of operations, return the final value of X after performing all the operations.
**Example 1:**
```

Input: operations = ["--X","X++","X++"]
Output: 1
Explanation: The operations are performed as follows:
Initially, X = 0.
--X: X is decremented by 1, X =  0 - 1 = -1.
X++: X is incremented by 1, X = -1 + 1 =  0.
X++: X is incremented by 1, X =  0 + 1 =  1.
```

**Example 2:**
```
Input: operations = ["++X","++X","X++"]
Output: 3
Explanation: The operations are performed as follows:
Initially, X = 0.
++X: X is incremented by 1, X = 0 + 1 = 1.
++X: X is incremented by 1, X = 1 + 1 = 2.
X++: X is incremented by 1, X = 2 + 1 = 3.
```

**Example 3:**
```
Input: operations = ["X++","++X","--X","X--"]
Output: 0
Explanation: The operations are performed as follows:
Initially, X = 0.
X++: X is incremented by 1, X = 0 + 1 = 1.
++X: X is incremented by 1, X = 1 + 1 = 2.
--X: X is decremented by 1, X = 2 - 1 = 1.
X--: X is decremented by 1, X = 1 - 1 = 0.
```
**Constraints:**

1 <= `operations.length <= 100` `operations[i]` will be either `"++X", "X++", "--X", or "X--"`.

The approach I have used here is the simplest, in case I encounter "++X" or "X++" I will simply increment the value of x, if I get, or "X--" I will simply decrement the value. In case I encounter anything else I will simply continue.

**The code is given below :**

```
var finalValueAfterOperations = function(operations) {
 let num = 0;
    operations.forEach((operation, i)=>{
         num = operation === '--X' || operation === 'X--'  ?  num - 1  : operation === 'X++' ||  operation === '++X' ? num + 1  : 0;
       
    })
    return num;
};
```
**Time Complexity: O(n)

Space Complexity: O(1)**

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



**Runtime And Memory Usage**

Hope this post is helpful. I share my knowledge and teach people about programming and we have more than 12k [@codewithyahi ](https://www.instagram.com/codewithyaji/)Instagram family.

Since you enjoyed reading my blog, why not buy me a coffee and support my work here!! [https://www.buymeacoffee.com/yajindra☕](https://www.buymeacoffee.com/yajindra)
Drum Kit - JavaScript project for begginers
Tags: javascript, beginners, tutorial, webdev
Published: 2022-09-17 13:04:56

&nbsp;&nbsp;Hey folks, the process of learning javascript is often fun-filled.
<br />
&nbsp;&nbsp;Check this straightforward project to learn about keybinding, sound response, configuring dom listners, etc..


{% codepen https://codepen.io/shinjith-dev/pen/VwxpxJE %}

If you want to watch the preview on the live website:
[Open Website](https://shinjith-dev.github.io/JavaScript-Drum-Kit/)

[Show code on github](https://github.com/shinjith-dev/JavaScript-Drum-Kit)
How do you get S3 object list with AWS Lambda ?
Tags: aws, dotnet, csharp, serverless
Published: 2022-09-17 13:03:32

## Introduction
AWS S3 is one of the most effective online storages for your business. If you were able to treat S3 objects by AWS Lambda just as you want, your tasks will progress much well. This is a commentary article that focuses getting S3 object list.
<br><br>
## S3 buckets and IAM settings
S3 buckets settings for treating with AWS Lambda is very simple. You don't have to do anything special. The only a few things that you have to do are creating IAM user for AWS Lambda and adding several policies to the user.

The policy setting is the below. You will allow "s3:ListBucket" Action for the resource. 
```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME"
        }
    ]
}
```
In this case I'm trying to access "YOUR_BUCKET_NAME" bucket. <br><br>
## Source code with .NET
AWS Lambda supports .NET6 and you can write source codes with C#. This is much significant for some developers. If you've developed some systems with .NET, your .NET technical assets will help you very much to develop AWS Lambda.

It's very easy to use AWSSDK for S3. First initializing S3 client. Second creating a request instance. Finally running ListObjectsAsync methos and get response.
```cs
using Amazon.S3;

public string GetObjectlist(string tempPrefix)
{
    try
    {
        var returnString = "";

        var s3Client     = new AmazonS3Client(RegionEndpoint.YOUR_REGION);
        var request      = new Amazon.S3.Model.ListObjectsRequest
        {
            BucketName  = "S3_BUCKET_NAME",
            Prefix      = tempPrefix,
        };
        Amazon.S3.Model.ListObjectsResponse response = s3Client.ListObjectsAsync(request).Result;

        foreach (var objectItem in response.S3Objects)
        {
            if(returnString != "") 
            {
                returnString += "::";
            }
            returnString += objectItem.Key;
        }

        return returnString;
    }
    catch (System.Exception e)
    {
        throw e;
    }
}
```
The response class layout is below.
https://docs.aws.amazon.com/sdkfornet/v3/apidocs/items/S3/NS3Model.html<br><br>
## Conclusion
In this post I tried to introduce about getting S3 objects by AWS Lambda. I'll show  you another AWS operation in next post. I wish my post makes your tasks done well.
Add custom filters to django admin and more...
Tags: django, tutorial
Published: 2022-09-17 13:00:48

---
title: Add custom filters to django admin and more...
published: true
description: 
tags: django, tutorial
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Checkout my blog post on my website to learn how to add custom filters on django admin and much more...

https://rishabh-tech-blog.vercel.app/blog/django-admin-customization/customize-django-admin-part-1
Jesse Warden Interview on Coder Conversations Podcast
Published: 2022-09-17 12:58:00

---
title: Jesse Warden Interview on Coder Conversations Podcast
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Kevin, Raja, and Terrance invited me to the Coder Conversations podcast and ask me super hard questions about some of the basics of why I do what I do, what I've learned over the years in software, and my various challenges and fears.

[![Jesse Warden Interview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghegzx06gh3fojyfi0w8.jpg)](https://www.youtube.com/watch?v=bpBTyIVlcaE)

{% youtube bpBTyIVlcaE %}
Deploy MySQL in Ubuntu server
Tags: mysql, ubuntu, server, database
Published: 2022-09-17 12:57:48

Create a new ssh key in your computer.
Add the pub key to the AWS key pair directory.
Create new Ubuntu server and add access to port 3306 to it.
Connect to server using the same key.

Run the following commands in the server.
```bash
sudo apt update
sudo apt upgrade -y
sudo reboot
```

Open ports for UFW.
```bash
sudo ufw allow OpenSSH
sudo ufw allow 3306
sudo ufw enable
```

Install NGINX
```bash
sudo apt install nginx
```
Check if NGNIX is working by accessing the public ipv4 address in the browser.

Allow NGINX for UFW.
```bash
sudo ufw app list
sudo ufw allow 'Nginx Full'
```

Setup MySQL.
```bash
sudo apt install mysql-server
sudo mysql
```
Exit if everything worked.

Install phpMyAdmin.
```bash
sudo apt install php-fpm php-mysql
sudo apt install phpmyadmin php-mbstring php-zip php-gd php-json php-curl
```

Create new SQL user.
```bash
sudo mysql

mysql> CREATE USER '<user>'@'localhost' IDENTIFIED WITH caching_sha2_password BY '<password>';
mysql> GRANT ALL PRIVILEGES ON *.* TO '<user>'@'localhost' WITH GRANT OPTION;
mysql> exit
```

Copy phpMyAdmin configuration to NGINX.
```bash
sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin
sudo service nginx restart
sudo nano /var/www/html/index.php
```

Add the following lines
```php
<?php
phpinfo();
?>
```

```bash
sudo service nginx restart
php -v
```
Check the PHP version from here.

```bash
sudo nano /etc/nginx/sites-available/default
```

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

Change the PHP version.

```text
include fastcgi_params;
fastcgi_index index.php;
fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
```

```bash
sudo service nginx restart
sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

# Change the bind address to 0.0.0.0

sudo systemctl restart mysql
```

Change host of the MySQL user.
```bash
sudo mysql
mysql> SELECT User, Host FROM mysql.user;
mysql> UPDATE mysql.user SET HOST='%' WHERE User='<user>';
mysql> SELECT User, Host FROM mysql.user;

# % is the wildcard to connect from everywhere.

mysql> exit
```
Stacking elements
Tags: javascript, webdev, css, programming
Published: 2022-09-17 12:26:36

With modern CSS is very easy to stack elements on top of each other, without much code and can easily be extended with more functionality.

## CSS Grid

With CSS Grid we can create customizable grids and assign its items to specific rows and columns. We will take advantage of this to stack our elements. 

Let's the following cards as an example:


![Unstacked Cards](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lrzay4k3larsr89a3qw.jpeg)

First, we make the card's container a ***grid container*** 

```
.cards {
	display: grid;
}
```

Next, we explicitly set all the cards into the **same** column and the row.

```
.card {
	grid-row: 1;
	grid-column: 1;
}
```

And guess what, that is it!


Buuuuuut! let me show you with something really simple how easy is to add extra styling.


### A bit of offset

So the user can see that the cards are stacked up, let's add a bit of offset. In this example we will go the difficult route, we dont know how many elements (cards) are to be stacked up. So we cant just use CSS, we need to add a bit of JavaScript to dynamically add the offset.


Let's update our card's CSS 

```
.card {
	grid-row: 1;
	grid-column: 1;
	
	// new lines
  position: relative;
  top:  var(--_card-offset);
}
```

And With JavaScript we will update our CSS var.

```
const cards = document.querySelectorAll(".card");
const OFFSET_VALUE: 30;

cards.forEach((card, i) => {
  card.style.setProperty(`--_card-offset`, `${OFFSET_VALUE * i}px`);
})
```

In a nutshell, each card will be 30px lower than the one before.

Now you can for example set the card's **z-index** to a higher value whenever it gets hovered so it comes to the front.

```
.card:hover {
	z-index: 2;
}
```

Following this same pattern it is very easy to exented the styles and functionality of our stacking elements.


Thank you! 


[Demo](https://codepen.io/sarmunbustillo/pen/MWGpGaW)

[My Twitter] (https://twitter.com/sarmunbustillo?t=pztqXmT7DH2pa9lDLjfrdQ&s=09)

[Checkout my blog ](https://www.sarmunbustillo.com/blog)
RMP Certification Training in UAE
Published: 2022-09-17 12:02:32

The [Risk Management Certification Training in UAE](https://counseltrain.com/rmp-risk-management-certification/) validates your performance capability, technical knowledge, and commitment to quality and a process of identifying, evaluating, and prioritization of risks and formulate a procedure to minimize, monitor, and control the impact using various techniques and tools. Risk management Professional is one of the many responsibilities of a variety of professionals, including accountants, attorneys, financial and insurance professionals, and specialists in loss control. This course is 5 days long which will make you ready to take courses or pursue your CRM designation by learning to differentiate between financial risks and business risks, Identify and describe the various types of financial risk and their sources, and Identity the real-world violations of the ‘standard model’ assumptions that make risk management value enhancing to the firm. Upon completion of this course, participants will receive a certificate of Risk Management Professional.
https://counseltrain.com/rmp-risk-management-certification/
how to add WhatsApp live chat to website without a plugin?
Tags: webdev, beginners
Published: 2022-09-17 11:51:43

hi, we have a website https://thewordfeudhelper.com/ for [wordfeud helper](https://thewordfeudhelper.com/) and we want to add a live chat widget preferably WhatsApp, but without a plugin. 

Can someone please give us the code to make it happen?

thanks in advance
Catherine Le
Highlight | Made with Gatsby JS
Tags: gatsby, react, javascript, beginners
Published: 2022-09-17 11:28:49

![Highlight | Made with Javascript | Gatsby JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1663343101/large_highlight_made_with_gatsby_js_eea24badd6.png "Highlight | Made with Javascript | Gatsby JS")


### Build membership communities on the blockchain.

> <h2>Web3. For everyone.</h2>
> <h3>Minting made easy.</h3>
> <p>We radically simplify NFT minting and sales and provide the creator tools, integrations, and support for community-building at scale.</p>
> <p><img src="https://images.ctfassets.net/9y4l0b1yrq2b/1Oq1UW7oiJ0L5MrffZMIEu/374b5a7721e562e7d8f767c1f5888c64/tokens-screenshot.png" alt="Minting made easy"></p>
> <p><br class="my-4" ></br></p>
> <h3>Get to know your top fans.</h3>
> <p><br class="my-4" ></br></p>
> <p>Instead of renting an audience from a social platform, NFTs help creators and fans build a direct, lasting connection.</p>
> <p><img src="https://images.ctfassets.net/9y4l0b1yrq2b/76v9ThIV8ntLOBG8xFMEiQ/928bcfa147ea9ea352a945d0264b7ba3/members-screenshot.png" alt="Get to know your top fans"></p>
> <p><br class="my-4" ></br></p>
> <h3>Powered by ownership.</h3>
> <p>Your most engaged fans participate in your community’s growth by buying membership NFTs that they own.</p>
> <p>Members enjoy access to a private community, gated content, and exclusive benefits.</p>
> <p>Creators earn a revenue split every time memberships or benefits are bought and sold.</p>
> <p><img src="https://images.ctfassets.net/9y4l0b1yrq2b/6nRfBGeuF1mmBxh4F9MxwA/8b0159687c39893bda13f3e62e953ff3/tokns.png" alt="Powered by ownership"></p>
> 


## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Highlight on Twitter](https://twitter.com/withjavascript/status/1571095886796820482?s=20&t=frX5dikebjQ-rgorqaR8vQ)
 |
| Medium | [Highlight on Medium](https://medium.com/@madewithjavascript/highlight-made-with-gatsby-js-44a98190c764)
 |
| Facebook | [Highlight on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0YeBbJXFJPoY2QaACKMDqJeidrkJjuLJJNuBnkF4J6fnrFus23aVETPtPtnaqH6oSl)
 |
| Tumblr | [Highlight on Tumblr](https://at.tumblr.com/madewithjavascript/highlight-made-with-gatsby-js-build-membership/wf40bd8z1p58)
 |
| LinkedIn | [Highlight on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6976861791108636672)
 |
| Pinterest | [Highlight on Pinterest](https://pin.it/N8X6Niz)
 |


Filled Under:


 - Made with Javascript
 - Made with Gatsby JS

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such fabulous showcases. Show your love for the people who have worked so hard!
Upcomings DAO #Whitelist and #Airdrop Live
Tags: airdrop, crypto, ico, blockchain
Published: 2022-09-17 11:22:57

Thrilled to announce the Open of Upcomings #Whitelist and Airdrop!🔥

🎁Only 50,000 Slots available,

Get early and get whitelisted to win #Airdrop of free UPCG tokens and access to #Upcomings base DApps 

Join : [https://upcomings.io/register?ref=upcg ](https://upcomings.io/register?ref=upcg )


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

#WhitelistLive  #Airdrops
Home.getInitialProps()" should resolve to an object. But found "undefined" instead
Tags: nextjs, strapi, axios, help
Published: 2022-09-17 11:22:42

```


Home.getInitialProps = async ctx => {
  /*  try {

    const res = await axios.get('http://localhost:1337/api/' + 'pages');
    const Pages = res.data;
//    console.log(Pages);     
    return { Pages};
  //  return { HomeAccordition };
  } catch (error) {
    return { error };
  }
*/
  let Pages =
  "'http://localhost:1337/api/' + 'pages'";
let homeAaccorditions =
  "'http://localhost:1337/api/' + 'home-accorditions'";
let Menus =
  "'http://localhost:1337/api/' + 'menus'";

let HeroSections =
 "'http://localhost:1337/api/' + 'hero-sections'";
const requestPages = axios.get(Pages);
const requesthomeAaccorditions = axios.get(homeAaccorditions);
const requestMenus = axios.get(Menus);
const requestHeroSections = axios.get(HeroSections);

axios
  .all([requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections])
  .then(
    axios.spread((...responses) => {
      const requestPages = responses[0];
      const requesthomeAaccorditions = responses[1];
      const requestMenus = responses[2];
      const requestHeroSections = responses[3];

      // use/access the results
      
      console.log(requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections );
    })
  )
  .catch(errors => {
    // react on errors.
    console.error(errors);
  });

};

export default Home;
//Home.getInitialProps = getInitialProps;

looking for a easy solutions to this. i was intended to return these responses so that we can call them in a component
```
matrico - Numerical Linear Algebra with CHICKEN Scheme
Tags: scheme, schemelang, chickenscheme, math
Published: 2022-09-17 11:19:33

* **Scheme**: Minimalist dialect of the Lisp programming language, which is based on singly linked-lists in parenthesized S-expressions syntax.
* **CHICKEN**: A free, simple, portable, extensible, well documented, and actively supported Scheme implementation (R5RS).
* **Linear Algebra**: Computations involving systems of linear equations and linear mappings, specifically in matrix representation.
* **Numerical**: Algorithms using finite precision numbers, here double-precision floating-point numbers (flonums).
* **matrico**: A flonum matrix module for CHICKEN Scheme with:
  * CHICKEN egg: `chicken-install matrico`
  * documentation: http://wiki.call-cc.org/eggref/5/matrico
  * repository: https://git.io/matrico

Now in version **0.3**.
Visualizing The Earth's Orbit & Seasons
Tags: codepen
Published: 2022-09-17 10:59:10

<p>Play with axial tilt. Tropics of Cancer and Capricorn and Arctic/Antarctic Polar Circles will automatically update according to the tilt. Works with CSS custom properties and some border-radius magic.</p>



{% codepen https://codepen.io/harunpehlivan/pen/VwxpxgG %}