teleren/devto huggingface dataset:
Array Manipulation in MongoDB
Tags: javascript, webdev, programming, beginners
Published: 2023-08-17 15:16:45

Arrays can be stored and manipulated in **MongoDB**. We are going to look at some operations that can be carried out on an array in **MongoDB**.

Firstly, we have to insert a record that has an array in our database.

```javascript
db.products.insert({"name": "Elon Musk", "children": ["X Æ A-12", "Tesla", "Neuralink", "OpenAI", "spaceX", "Boring Co.", "Twitter"]})
```


#### Adding Multiple Elements

**$push** - can be used to add more elements to an array.

```javascript
db.products.findOneAndUpdate({"name":"Elon Musk"}, {$push:{"children": "payPal"}})
```


#### Removing Multiple Elements

**$pop** - can be used to remove an element from an array. It removes one element at a time and can only be used with the values
**1** (for the last element) or **-1** (for the first element)

```javascript 
db.products.findOneAndUpdate({"name":"Elon Musk"}, {$pop: {"children":1}})
```

#### Sorting

**$sort** modifier orders the elements of an array during a $push operation. To use the $sort modifier, it must appear with the $each modifier. 
You can pass an empty array [] to the $each modifier such that only the $sort modifier has an effect.

```javascript 
db.products.findOneAndUpdate({"name":"Elon Musk"}, {$push:  {"children": {$each: [], $sort: 1}}})
```


**$addToSet**, MongoDB provides a way to only allow unique elements into an array. An element will only be allowed into an array, if the element does not exist already.

```javascript
db.products.updateOne({"name": "Elon Musk"}, {$addToSet: {"children": "Solar City"}}) 
```




**Thank you, Please follow me**

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


[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)
How to Implement a Blender Model in a React.js Application using Three.js
Tags: react
Published: 2023-08-21 21:23:47

---
title: How to Implement a Blender Model in a React.js Application using Three.js
published: true
date: 2023-08-17 14:58:49 UTC
tags: React
canonical_url: https://www.freecodecamp.org/news/blender-three-js-react-js/
---

In this step-by-step guide, you'll learn how to build a basic Blender file with incorporated fundamental animations. After that, you'll learn how to integrate Three.js with your React apps using React Three Fiber. Getting familiar with these concepts can help you make sure your upcoming React.js applications stand out.
Understanding the automatic minimum size of flex items
Tags: css, frontend, webdev, beginners
Published: 2023-08-17 14:54:53

🎨 Embrace the power of Flexbox in CSS for crafting dynamic and responsive UIs! 🌟

Ever struggled with text overflow wrecking your layout?

📜 Dive into this article to unravel the mystery behind automatic minimum size behavior of flex items.

Read it here: https://www.bigbinary.com/blog/understanding-the-automatic-minimum-size-of-flex-items 👀 📚
Crypto's anti-network effect
Tags: bitcoin, distributedsystems, discuss, blockchain
Published: 2023-05-21 21:00:00



### Network effects
Much of this millenia's history has been marked by a single observation. Networks grow exponentially ie. Metcalfe's law. Not every industry benefits from network effects, but those who do enjoy unique economics and an extreme upside potential.

### Crypto networks
Every crypto project is becoming a network in multiple ways. A blockchain natively needs an asset exchange, a naming system for human-friendly addresses and at least a bunch of protocols to support the ecosystem like liquid staking, lending platforms, NFT marketplaces, stablecoins and aggregators.

### Adoption drawbacks
There's also a secondary effect where people joining an ecosystem early are disproportionally interested in its success. Yet, in general the bigger the ecosystem the more tokens are listed in exchanges, the more NFTs are listed in marketplaces and the more the people (in terms of addresses) you can interact with. That effect is arguably dominant in comparison to the early adopter effect mentioned before.

In short, one could expect "the bigger a network, the bigger it will become", even in crypto. But that's not the case.

Read more on:
https://www.tzionis.com/crypto-anti-network-effect
Learn HTML and CSS – Handbook for Beginners
Tags: html
Published: 2023-08-21 21:07:56

---
title: Learn HTML and CSS – Handbook for Beginners
published: true
date: 2023-08-17 14:49:16 UTC
tags: HTML
canonical_url: https://www.freecodecamp.org/news/html-css-handbook-for-beginners/
---

Greetings, and welcome to this comprehensive HTML and CSS handbook. My goal is to teach you everything you need to know about building fast and beautiful websites that look great on any device. I'm assuming you have no knowledge of HTML or CSS and want to learn everything from scratch.
Let's Explore the World of Programming Languages!
Published: 2023-08-17 14:47:15

Hey there, curious minds! 🌟 Are you ready to embark on a fun journey into the exciting world of programming languages? Buckle up, because we're about to dive into the amazing universe where computers and humans communicate to create incredible things!

Imagine you have a magical friend named Computer. This friend is super smart, but it only speaks a special language called "Computer Language." Now, you want to tell your Computer friend to do something cool, like drawing a smiley face. But wait! You don't know Computer Language... yet.

Here comes the superhero called "Programming Language" to the rescue! 🦸‍♂️ Just like how you learn different languages like English or Spanish to talk to people from different places, a programming language is a way for humans like you to talk to Computers. It's like teaching your Computer friend a new language they understand.


![Two Friends Talking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3q0hglky9sofkg8oory5.jpg)

Think of a programming language as a set of instructions that you can give to your Computer friend. These instructions are like steps in a recipe that tell the Computer what to do. Instead of "Add flour and sugar," you might say in your programming language, "Draw a circle and add two dots for eyes."

Different programming languages are like different types of magic spells. Some are great at making games, some are good at organizing data, and others can help with all sorts of tasks. Some popular programming languages are Python, JavaScript, and Scratch.


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

When you write these special instructions in your chosen programming language, you're creating a program. Just like how you follow a recipe to bake cookies, Computers follow your program's instructions to do amazing things. Your program can make a computer draw pictures, play music, solve math problems, and even talk to other computers!

But there's a small catch: Computers are really, really good at following instructions, but they're also very literal. They won't guess what you mean. So, your instructions need to be very clear and in the right order, just like telling a robot exactly how to build a sandcastle.


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

As you learn more about programming languages, you'll become a coding wizard, able to make Computers do incredible feats! You'll write your own stories in code, and your Computer friend will bring them to life on the screen.

So, there you have it, young explorer! Programming languages are like secret codes that let you communicate with Computers and create wonderful things together. Get ready to unleash your creativity and have a blast in the world of coding! 🚀👾

Happy coding,
shiva
Adding Life to Your Svelte App: Animations and Transitions
Tags: svelte, frontend, javascript, webdev
Published: 2023-08-17 14:46:34


Hello again, developers! We've been on an exciting journey through the world of Svelte, exploring its components and reactivity. Today, get ready to take your Svelte applications to the next level as we delve into the art of animations and transitions.

## Breathing Life into UI with Animations

Animations are the secret sauce that adds that extra flair to your user interface. Svelte makes adding animations a breeze, thanks to its built-in transitions and powerful transition directives. Say goodbye to janky transitions and hello to smooth, eye-catching animations!

## Built-in Transitions Made Easy

Svelte offers a range of built-in transitions that you can easily apply to elements in your app. Whether you want to fade, slide, or scale elements in and out, Svelte's transition directives have got you covered. It's like having a professional animator at your fingertips!

## Custom Transitions for Unique Experiences

Looking to create a unique animation? Svelte's custom transition feature lets you define your own animations using CSS. This gives you the flexibility to craft animations that perfectly match your app's personality and user experience.

## Example: Creating a Fading Card

Let's dive into a simple example. Imagine you have a card that you want to fade in when it's added to the DOM. With Svelte, it's a breeze:

```svelte
<script>
  let showCard = false;

  function toggleCard() {
    showCard = !showCard;
  }
</script>

<main>
  <button on:click={toggleCard}>Toggle Card</button>
  {#if showCard}
    <div transition:fade>
      This is a fading card.
    </div>
  {/if}
</main>
```
#Conclusion

By mastering animations and transitions in Svelte, you can elevate your app's user experience to new heights. From pre-built transitions to crafting custom animations, Svelte's animation toolkit empowers you to create stunning visuals that engage and delight your users.

In our next article, we'll wrap up our journey through Svelte by exploring the integration of ChatGPT API to add intelligent interactions to your app. Get ready to amplify your app's capabilities with the power of language AI!

Stay curious and keep coding, as we continue to unveil the wonders of Svelte. Your app's animations are about to come to life!
I'm about to embark on a journey to re-learn pho. Anyone here to journey along? Perhaps you could be a mentor or a guide.
Tags: beginners, programming, tutorial, career
Published: 2023-08-17 14:37:46

I have basic idea in php, and now I'm ready to take my knowledge in it to the peak.

I have heard lot of people molesting php and it's learners or doers so I got discouraged and switched but oops, not too long later, I realized my love and passion for php and I began to see how more wide the server side language keeps growing among other programming languages.

Well, I know that this kind of a journey could be hard at a point where the learner gets stocked up in a place and if care is not taken get discouraged and back-off, hence I need someone or some persons I can always run to at a snap and they are there for me to help me look into my issues and profer solutions.

I really want to do great stuffs with PHP just like I've been seeing lot of other php Programmers.

Feel free to reach out if this is your field and you are chanced and willing to help.

Thank you.
HashiCorp Terraform Associate Certification Study Course – Pass the Exam With This Free 7 Hour Course
Tags: terraform
Published: 2023-08-21 21:08:03

---
title: HashiCorp Terraform Associate Certification Study Course – Pass the Exam With This Free 7 Hour Course
published: true
date: 2023-08-17 14:07:00 UTC
tags: Terraform
canonical_url: https://www.freecodecamp.org/news/hashicorp-terraform-associate-certification-study-course-pass-the-exam-with-this-free-12-hour-course/
---

Learn how to pass the HashiCorp Terraform Associate Certification (003) with this free 7-hour course. What is the HashiCorp Terraform Associate? HashiCorp is a company specializing in open-source tools for multi-cloud workloads. HashiCorp's most popular tool is Terraform, which allows DevOps Engineers to write code to provision infrastructure for multiple
C# record keyword & Nondestructive Mutation: Tell Me a Time
Published: 2023-08-17 14:00:46

## Nondestructive Determinism
Just reading up on the new C# `record` [keyword and nondestructive mutation](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/record#nondestructive-mutation) and wondering:

## When Have You Used This Concept?
When was a time you used this concept? Anyone? Anyone...? Bueller...? Bueller...?

Just curious.
Sloan's Inbox: Bored... Is it time to get another job?
Tags: discuss, career
Published: 2023-08-17 14:00:00

Heyo folks! Sloan, DEV Moderator and resident mascot, back with another question sent in from a DEV community member. 🦥

For those unfamiliar with the series, this is another installment of Sloan's Inbox. You all send in your questions, I ask them on your behalf anonymously, and the community hops in to offer advice. Whether it's career development, office politics, industry trends, or improving technical skills, we cover all sorts of topics here. If you want to send in a question or talking point to be shared anonymously via Sloan, that's awesome; just scroll down to the bottom of the post for details on how.

So, let's get down to business...

### Today's question is:

> I've been at the same company for quite a while now. I'm comfortable — the job pays well, the workload is reasonable, and I really like my colleagues — but, I've been feeling bored. I'm wondering if this is a sign that I should move on to something else? Do I just need to take some time to myself and recharge? Is boredom a justifiable reason to leave a place that otherwise fits all my needs? How should I approach talking about this with my manager?
>

Share your thoughts and lets help a fellow DEV member out! Remember to keep kind and stay classy. 💚

---

*Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous.*
Typescript + Vue linter config step by step
Tags: frontend, vue, typescript, learning
Published: 2023-08-17 13:58:29

## INTRODUCTION

Configuring a linter with TypeScript might seem daunting if you're unsure where to begin. Fortunately, here's an easy and straightforward method to set up TypeScript for your Vue application.


In this guide, I'll be using Eslint along with Standard and Prettier. I believe these tools offer a simpler way to kickstart your work without spending excessive time on manual configurations.

## GET'S START

First of all, we'll need install eslint:

```
npx eslint --init
```

This command will be asking you a bunch of things, just follow the installation selecting your preferences.

In my case, I'd like to use Standard and Typescript.

Secondly, we need to install prettier:

```
npm i prettier -D
```

With this tools installed we need to configure a bit some files.

## CONFIG FILES

The first file to configure will be ".prettierrc" following this:

```
{
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "semi": true,
  "comma-dangle": ["error", "never"]
}
```

These are my prettier preferences, but they can be whatever you think works fine with your workflow.

Finally the ".eslintrc.json" file:

```
{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": ["./tsconfig.json"],
        "tsconfigRootDir": "./",
        "extraFileExtensions": [".vue"],
        "parser": "@typescript-eslint/parser"
    },

    "plugins": [
        "vue"
    ],
    "rules": {
        "@typescript-eslint/member-delimiter-style": 0,
        "@typescript-eslint/semi": 0,
        "vue/multi-word-component-names": "off",
        "@typescript-eslint/strict-boolean-expressions": 0,
        "@typescript-eslint/no-invalid-void-type": 0
    }
}
```

This is pre-configured by you once Eslint is installed, but probably you will need to add some configurations, such as the "rules", "parserOptions" and "extends".

## FINAL STEP

Once we already have everything configured, our last step will be create an script to re-format all our code in a simple way. This is my favourite easy script:

```
"format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx}\""
```

This way only running this script all your code will be pretty formated :)

## ENJOY

Well, this is my personal Eslint and prettier configuration, I know it can be improved a lot, so just share your feedback on comments. I'm more than happy to learn better ways to configure a project with Typescript and a proper formatter tool.
Top Custom Software Development Company in Texas, USA
Tags: customsoftwaredevelopment, webdev, texas, devops
Published: 2023-08-17 13:52:58

Ignitho offers [Top Custom Software Development Services in Dallas, Houston, Texas](https://www.ignitho.com/usa/top-custom-software-development-companies-dallas-houston-texas/) by adopting a disruptive new approach towards technology called Frugal Innovation Methodology – to do more (& better) with less.
Useful tools that might come in handy :
Tags: webdev, programming, github, beginners
Published: 2023-08-17 13:48:55

1. Vim: Vim's advantages lie in modal editing, customizability, efficient navigation, built-in commands, low resource usage, plugins, universal availability, improved typing skills, and a focus on efficiency. Its learning curve yields long-term productivity gains, encouraging touch typing and streamlining text editing.

2.Tmux: A terminal multiplexer that allows you to split your terminal into multiple panes, making it easier to manage multiple tasks and command-line sessions.

3.Cht.sh: An online cheat sheet tool that lets you access programming language documentation and examples right from the command line. It's a quick way to look up syntax and usage while you're coding.

4.fzf: A command-line fuzzy finder that makes it incredibly easy to search and navigate through your command history, files, and more.

5.jq: A command-line tool for processing and manipulating JSON data, which is particularly useful when working with APIs and data-driven applications.

6.The Silver Searcher (ag): A faster alternative to 'grep', 'ag' is a code-searching tool that's particularly useful when working with large codebases. It's optimized for speed and supports regex searching.

7.Zsh with Oh My Zsh: While Zsh itself isn't unknown, combining it with Oh My Zsh and its various plugins can greatly enhance your command-line experience, providing autocomplete, syntax highlighting, and more.
What is this? Can I just name it <Josephine />?
Tags: react, programming, productivity
Published: 2023-08-17 13:44:59

Naming (in programming) is a topic that fascinates me. It is so simple and yet sometimes so difficult.

I already wrote to small articles about this topic: [How would you name this](https://dev.to/receter/how-would-you-name-this-3plk) and [Prefixing variables with is](https://dev.to/receter/prefixing-variable-names-with-is-2d0j).

You know that situation when you're in flow and suddenly you get stuck because you just can't decide how to name something?

This just happened to me while creating a page with an element I wanted to extract as a new React component.

![A component I have to name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ig6yi3xd6jajhusmwxs.png)

I mean what the f*** is this 🤯? Looks like a typical `<MiniWideScreenLogoWithBackgroundAndLinkBelow />` right? Or is it just a `<LogoLink />`? Nah I already have that one (and but to be honest I don't even know what it looks like without looking it up). 

Maybe a `<ProtoypeCard />`? Too specific. 

What about `<LogoCardLink />`?

I have a strong feeling that I already spend way too much time on naming this.

🧘 I will just name it **`<Josephine />`** and see what happens.

And the next component—if I don't find a good name within a minute—will get a *real* name, too 😛. Or it will be a `<SquareRotatingJosephine />` who knows…
Intro to Python: Day 11 - Another Class Inheritance Example
Tags: python, webdev, beginners, oop
Published: 2023-08-17 13:41:38

*Hi there 👋 I'm a New York City based web developer documenting my journey with React, React Native, and Python for all to see. Please follow my dev.to profile or [my twitter](https://twitter.com/stonestwebdev) for updates and feel free to reach out if you have questions. Thanks for your support!*

Today in my journey with boot.dev I encountered a fun problem that we solved using OOP and class-based inheritance.

A rectangle is a shape with four sides where the length of the sides is equal and the length of the top and bottom are equal, but the top and bottom don't need to be equal to the length of the sides.

A square is a type of rectangle, but all four sides must be the same length.

So, if we make a `Rectangle` class to get the perimeter and area of any given rectangle, where we need to input the length of the x-axis sides and the length of the y-axis sides in order to get that information, like so:

```python
class Rectangle:
    def __init__(self, length, width):
        self.length = length
        self.width = width

    def get_area(self):
        return self.length * self.width

    def get_perimeter(self):
        return (self.length + self.width) * 2
```

...then we should be able to quickly build a `Square` class that inherits these methods but is automatically instantiated using only the length of one of its sides (since all sides of a square are the same length):

```python
class Square(Rectangle):
    def __init__(self, length):
        super().__init__(length, length)
```

Behold, the power of OOP! Unlike dragons and cars and other fairly non-sensical use cases, I could see actually using something like this if I were, say, building a house, maybe. Idk.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@stonestwebdev](https://twitter.com/stonestwebdev), I follow back! See you tomorrow for another project.**
Improved static analyzer has been released
Tags: cpp, programming, java, vscode
Published: 2023-08-17 13:31:02

There are different static code analyzers. But today we are going to talk about PVS-Studio and its updates. 

**PVS-Studio 7.26 has been released. Now you can run the analysis in plugins for VS Code and Qt Creator; upload the analysis results to DefectDojo, and more.**


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

Briefly: 

- Now the PVS-Studio plugins for Visual Studio Code and Qt Creator support the analysis of C and C++ projects. 

- Now PVS-Studio has integration with DefectDojo, the DevSecOps platform that helps teams manage the entire security workflow.

- The Java analyzer now supports projects that use JDK 20 and Java 20. It also maintains backward compatibility with all previous versions.

- Function annotations give PVS-Studio more data for analysis.

And that's not all. I advise you to read about all the updates [here](https://pvs-studio.com/en/blog/posts/1063/)