teleren/devto huggingface dataset:
Flex-Box& Flex
Published: 2022-09-23 10:39:09

For Better Understanding of Flex we have to know what is Flex-Box.

Flex-box:It is a new layout mode in CSS3. This layout make the elements behave relatively to different display sizes and display devices.

Flex-box have Flex-Container and Flex-Items.
    Flex-container specifies the properties of parent.It is declared by setting the display property of flex or inline-flex.
    Flex-items specifies the properties of children.These are inside flex-container.

Flex-items are set along horizantal flex line by default.
These are mainly two axis to align flex items in flex container they are main axis and cross axis.Those are perpendicular to each other.
Main axis is along the line of flex.It will be horizantal is line of axis is horizantal and viceversa.

Flex-Box Properties:-

Display => Used to specify the type of box used for an HTML ELement.
Flex-Direction => To specify the line of axis of flex items
Justify-Content => To align items horizantally when the items didn't use all the available space on main axis.
Align-items => To align items Vertically when the items didn't use all the available space on cross axis.
Flex-Wrap => It specifies whether flex items wrap or not,if there is not enough room for the flex item in container.
Align-Content => It aligns flex-line,it is used to modify the flex-wrap property.
Flex-Flow => It specifies a shorthand property for flex direction & flex wrap.
Order => It specifies the order of a flex item relatively to another flex item in the same container.
ALign-Self => It is used on flex-items it overrides container's Align items property.

Then,
The flex property is only works on the flex-items,It is used to set the length of the flexible items.The length of the flex items is depend on flex grow, flex shrink,flex basis.
We can simply say flex is the shorthand for these three properties.

"flex val1 val2 val3"

val1 refers to flex grow, It is positive number without units and it specifies how much the flex item have to grow in size relative to other flex items.
val2 refers to flex shrink, It is positive number without units and it specifies how much the flex item have to shrink in size relative to other flex items.
val3 refers to flex basis,It specifies the initial length of the flex item from where it have to start growing or shrinking.


                             --Thank You--
Use Android Studio? Try NextSketch
Published: 2022-09-23 10:36:05

If you develop Android apps for a living, you probably use Android's built in networking capabilities to communicate with databases/backends/etc.

Sometimes while working on networking code, I wish I had a visual way to understand how data moves in and out of my app. 

NextSketch is a (commercial) plugin for all IntelliJ Platform IDEs that let's you create architecture diagrams right inside the IDE. It's also handy for modeling networking!

For many projects, I use NextSketch for modeling network flow, it really helps keep track of where everything goes. View pricing at https://plugins.jetbrains.com/plugin/19963-nextsketch or visit www.nextsketch.ca
How to Add Custom Folders to the Rails Asset Pipeline
Tags: rails
Published: 2022-09-23 10:29:13

Sometimes you may find yourself in the situation of wanting to add a custom folder to the Rails assets pipeline in order to keep your Rails application neatly organized.

Say, for example, you would like to have additional folders called "fonts" or "icons" for placing your custom fonts and icons there, keeping them out of the "images" folder.

This can be achieved very easily.

Go to `config/assets.rb`, where you will find the following line, which is telling you what to do:

```ruby
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
```
In order to register a custom folder within your application's assets folder, go ahead and add the following line:

```ruby
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")
```

`Rails.root` returns a [Pathname object](https://ruby-doc.org/stdlib-2.6.3/libdoc/pathname/rdoc/Pathname.html), which is plain old Ruby and adds it to the assets paths of your application.

Now you can reference a downloaded font - say, for example in a stylesheet - like this:

```scss
@font-face {
  font-family: "Inter";
  src: url("Inter-Medium.woff2") format("woff2"),
       url("Inter-Medium.woff") format("woff"),
       url("Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
```
Further reading: [https://guides.rubyonrails.org/asset_pipeline.html](https://guides.rubyonrails.org/asset_pipeline.html)
Managing Pinterest from your .Net App
Published: 2022-09-23 10:20:19

Pinterest is a social network where people can find inspiration and ideas for their interests and hobbies.

Every idea is represented by a Pin, which is an image that is searched and saved by Pinterest users. Pins can also link back to websites, which is why Pinterest is great for driving traffic and sales.

And most importantly for businesses, Pins help people find more information on products they’re looking to buy.

## CodeHelper.API.Pinteres
CodeHelper.API.Pinterest is a lightweight and easy to use .NET Pinterest Wrapper letting you to manage your baords and pins (including create, update and delete

## Code
To generate your App access code, you can use [my online tool](https://frederik.today/codehelper/tools/oauth-access-token-pinterest)
```
PinterstHelper _helper = new() {AccessToken = "{accesstoken}" };
```

### List Boards
```
var _boards = await _helper.BoardsGetList();
```

### Create a new Board
```
var _newboard = await _helper.BoardCreate("Code Examples"
            , "Discover the latest code examples by CodeHelper");
```

### List Pins for a a given Board
```
var _pins = await _helper.BoardListPins("1038220589036341017");
```

### Create a Pin
```
await _helper.CreatePin("https://webstories.today/watch/the-beginnings-of-sergey-brin/webplayer"
  , "Sergey Brin's Beginnings In 1 Minute"
  , "1038220589036341017"  // Board ID
  , "How did entrepreneur Sergey Brin, co-founder of Google started his success?"
  , "images/jpeg"
  , "https://webstories.today/images/s/the-beginnings-of-sergey-brin-cover.jpg");
```

### Delete a Pin
```
await _helper.PinDelete("123457");  //123457 = ID of the pin
```
Understand call, apply, and bind functions in JavaScript like never before.
Published: 2022-09-23 10:18:37

In this post, we'll take a detailed look at how call, apply, and bind work in JavaScript.

JavaScript's call(), apply(), and bind() functions are often misunderstood. In this video, we'll clear up the confusion once and for all.

We'll discuss the differences between the three, and when you would want to use each one. We'll also provide examples to help you understand how they work.

By the end of this post, you'll have a deep understanding of how these functions work, and be able to use them in your own code.

So, let's get started.

Now, let's start for real.

--------------------------

Let's say we have an object with name and greet function.
```js
const obj = {
  name: "Swastik",
  greet(age) {
    console.log(`Hello ${this.name}, age: ${age}`);
  }
}

obj.greet(23); // console -> Hello Swastik, age: 23
```
Calling the greeet function consoles "Hello Swastik". The `**"this"**` keyword refers to the context of greet() function.

In other words `**"this"**` keywords for greet() function refers to the object (obj) in which it was defined.

Now, let's say you need to **change the context** of greet() function, means you need to change where the "this" keyword refers in greet() function from `obj` to `obj1`.

Let's define obj1.
```js
const obj1 = {
  name: "Yadav"
}
```
What we want to achieve is that when we call greet() function it should console "Hello Yadav" instead of "Hello Swastik".

This can be achieved with call(), apply(), and bind() method in JavaScript.

## call()
"call" method changes the context of a given function to the context that we specify. So here we are changing the context of greet from obj to obj1.
```js
obj.greet.call(obj1, 24); // console -> Hello Yadav, age: 24
```
First argument is the new context we want, and all comma separated arguments are for greet function.

## apply()
"apply" method is exactly similar to "call method", the only difference being that call takes argument of greet as comma separated and apply takes them as an array.
```js
obj.greet.apply(obj1, [24]); // console -> Hello Yadav, age: 24
```

## bind()
"bind" is also exactly similar to call and apply, and here is the difference.
- call and apply executes the fuction right away.
- bind returns a new function binded with new "this" keyword, which can be called later.
```js
const bindYadav = obj.greet.bind(obj1, 25);
bindYadav(); // console.log -> Hello Yadav, age: 25
```

--------------------------

That's it for this post, I hope you found this useful, and if so, please show your support by joining the weekly newsletter: [Newsletter](https://swastikyadav.com).
My first Project a Country app
Published: 2022-09-08 22:51:06

I made an app that allows you to look up any country you want and it gives you information about that country. Somethings it gives you is information like capital name, population, common languages, currencies, and even what continent its from. These past lessons we went over the Dom and how to use json. Those were a key to making this possible. We also went over some algorithms and how important they are also I dove in to some leetcode questions to see what they are like and its different when I finish the course im going to study a lot of it. I also want to get into doing Hackathons and see what those are like ive seen videos here and there about it but never got into it.

`fetch(finalURL).then((response) => response.json()).then((data) => {`result.innerHTML = `

This snippet of code is not the complete portion cause its a a lot of innerHTML. I have my github link at the bottom.


**searchBtn.addEventListener("submit",async(event)=> {
    event.preventDefault()
    let countryName = countryInp.value;

allbtn.addEventListener("click",()=>{
    countries.forEach(country => {
        let p = document.createElement("p")
    p.innerText = country.name
    countriesContainer.append(p)


document.addEventListener('DOMContentLoaded',function(){**
(I have this wrapped around all my code)

Those are the 3 addeventListeners I'm using in my app.

What I've also noticed is people code differently than one another and I find that so unique. Everyone has  their own coding style and I want to see how different mine is to others in the near future. I've also been messing around with Materialize its a website that has code that you can use to make formatting the app better. I got the idea because me and one of my friends were brainstorming about what my project should be about and we were talking about countries and it clicked. I knew what to make my app about about and started looking online and found an api for it and the idea came to life after that. It was a good learning experience for me. learned and saw a lot of things I didn't know before. I think projects is what makes creativity shine and help with expanding knowledge. In the future I want to be able to make website projects like nothing but for now we got a long way to go. This is my first time ever coding so you can imagine how hard it must've been but those times are the most important never give up you never know when your going to make it. 

This is my github repository https://github.com/JonahEspinosa/countries-project
C++
Published: 2022-09-23 10:08:13

> **Что такое С++?**
```
C ++
```
был разработан _Бьерном Страуструпом_ как расширение языка
```
C.
```
```
C++
```
— это кроссплатформенный язык, который можно использовать для создания высокопроизводительных приложений.

> Язык обновлялся 4 раза в 2011, 2014, 2017 и 2020 годах до
```
C++11, C++14, C++17, C++20.
```

> 
**Зачем использовать С++**
```
C++
```
— один из самых популярных языков программирования в мире.
```
C++
```
— можно найти в современных операционных системах, графических интерфейсах пользователя и встроенных системах.
```
C++
```
— это объектно-ориентированный язык программирования, который придает программам четкую структуру и позволяет повторно использовать код, что снижает затраты на разработку.
```
C++
```
— является переносимым и может использоваться для разработки приложений, которые можно адаптировать для различных платформ.
```
C++
```
— это весело и легко выучить!

Поскольку
```
C++
```
близок к -
```
C#
```
и
```
Java
```
— программистам легко перейти на
```
C++
```
или наоборот.

> 
**Разница между С и С++**
```
C++
```
— был разработан как расширение
```
C
```
и оба языка имеют почти одинаковый синтаксис.

> 
Основное различие между
```
C
```
и
```
C++
```
заключается в том, что
```
C++
```
— поддерживает классы и объекты, а
```
C
```
— нет.
Palindrome Number
Published: 2022-09-23 09:56:01

```
class Solution:
    def isPalindrome(self, x: int) -> bool:
        x_copy = x
        array_x = []
        inversed_x = 0

        while x > 0:
            array_x.append(x % 10)
            x = x // 10

        for num in array_x:
            inversed_x *= 10
            inversed_x += num

        if inversed_x == x_copy:
            return True
        return False
```
Day 3 of 10. Leet code problem can be found [here](https://leetcode.com/problems/palindrome-number/)

To solve this problem, i had to reverse the given number by applying the divide (/) and mod (%) operations on it which is then stored in a list (array_x). Now because it is in a list, it cannot be compared with the initial array (x). So i had to convert it to an integer back and then compare the reversed number with original number to see if it is a palindrome. If both original and reversed numbers are equal, then the given number is a palindrome, otherwise it is not a palindrome.

thanks for reading :)
How to add JavaScript to your Website.
Tags: javascript, webdev, beginners, programming
Published: 2022-09-23 09:54:36

JavaScript is a programming language that is used to implement functionalities and make websites interactive. JavaScript is also used to  create and control Website contents and functions such as multimedia, animations and other functionalities.

We will cover how to incorporate JavaScript into a website as an in-line element and as a separate document.

## Adding JavaScript to HTML Document.

If you want to add JavaScript to your Website as an in-line element, you can add it using the HTML tag `<script>` just before the closing tag of the HTML body, this will ensure that the JavaScript  code is applied where it is required.

Lets build a Website that displays the day's date  when the h1 element is clicked on.

create an HTML document for the website and add an h1 element as follows:

```
<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
 
</body>
 
</html>
```

```
<h1> Click here to view today's date</h1>
```
Let's create a new variable in our JavaScript element and name it `date`.
Assign this variable to the JavaScript's date method.

```
<script>
let date = new Date();
document.querySelector("h1").addEventListener("click", function (){
            alert("Today's date is " + d ) 
        });
       
</script>
```
Anytime the h1 element is clicked to view the date, an alert box will be triggered and the day's date would be alerted as shown below.

![click result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ao1rl9uluz8s4zq1eaub.png)

## Adding JavaScript from a separate Javascript file
Large JavaScript files are best added to a project as an external file when they are used across several web pages. Separate JavaScript files are easier to maintain than in-line scripts so its more advisable to separate your JavaScript file from other components of the project.

To add your external JavaScript file to your website, create a new JavaScript file and name it `script.js` and add it to the root of the project.  

Add the JavaScript file to your HTML document by linking the file just before the closing tag of the body of the HTML document as shown below.

```
<script src="js/script.js"></script>
```

## Conclusion 
After all the steps above are followed, you should be able to add your JavaScript file to your website in anyway you feel comfortable with, you can now go ahead with your coding journey.
Cheers.
Aws Vpc
Published: 2022-09-23 11:41:33

---
title: Aws Vpc
published: true
date: 2022-09-23 09:50:15 UTC
tags: 
canonical_url: https://mennymo.hashnode.dev/aws-vpc
---

### What is the Idea behind a VPC?

VPC stands for Virtual Private Cloud. It is your own network in the cloud. In a Region, there are Availability Zones on which we can launch EC2 instances, RDS instances, or other services.

Now, a VPC is an isolated network in a region that spans all availability zones in that region There are several other VPCs in the AWS cloud and as they have no access to your VPC and vice-versa.

### Why would you want to isolate your network?

Isolation basically means you can manage multiple networks on your account which are isolated from each other.

- You might need this from a compliance perspective.
- You may want to connect your on-prem data center to your cloud provider. You need at least one VPC, this will serve as your own network or data center in the cloud.

![AWS-VPC.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1663887207982/sG2xte-9C.png)

### What is VPC used for

Essentially, VPC enables you to **_deploy_** resources. Within your VPC, you are able to utilize different compute resources, storage or database, and other network infrastructure such as Amazon EC2 Amazon Elastic Block Store (EBS) Amazon Relational Database Service (RDS) AWS Virtual Private Network (VPN)

This, therefore, allows you to be able to build and as well, deploy your solution within the cloud.

> In AWS, each region is only allowed a maximum of 5 VPCs

### What do you need to create a VPC

When you are creating a VPC, you have to specify the following:

- Region it will be used
- Name
- IP address range
- When you are defining the range for the IP address, you do so in CIDR (Classless Inter-Domain Routing) blocks.

### Definition of a VPC

Finally, how do we define a VPC in AWS?

A virtual private cloud is a private environment or isolated segment of the AWS public cloud that only you have access to. It allows you to provision and deploy resources in a safe and secure manner.

#### Summary of a Virtual Private cloud

1. In the AWS Infrastructure, the VPC resides inside the AWS cloud

2. The VPC is your own private segment of the AWS cloud.

3. It allows you to define and control isolated virtual networks and then deploy cloud resources into those networks.

4. When you create your own VPC, only you have access to it.

> Thank you for coming by. Do well to reach out on [LinkedIn](https://www.linkedin.com/in/omolade-akinwumi-554247144/) or [Twitter](https://twitter.com/Molly_ladson) for collaborations 😃

**References**

_[Level Up Coding](https://www.google.com/url?sa=i&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FAmazon_Virtual_Private_Cloud&psig=AOvVaw30L_gIFympXjXNQ7dK67S7&ust=1664010425585000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCLD-vu_HqvoCFQAAAAAdAAAAABAD)_

_[AWS VPC](https://www.youtube.com/watch?v=bGDMeD6kOz0&ab_channel=Academind)_
Lists and Keys in React
Tags: webdev, javascript, react, todayilearned
Published: 2022-09-23 09:49:22

Did you know that React has a built-in method that automatically assigns the keys for you when rendering a list of children?

If you are new to React, you might be wondering what keys are and what they do.

If you are familiar to keys and lists, you can skip to the bottom and learn how to automatically assign keys in React.

## Introduction to Lists and Keys in React.

Suppose you have the following list of data you would like to render:

```js
const someData = ['Chipata', 'Kasama', 'Mongu',
'Livingstone', 'Mansa', 'Kabwe',
'Ndola', 'Lusaka', 'Solwezi'];
```

To render this in JSX, we use curly braces and loop through and transform the array using the JavaScript `map()` method.

```jsx
const cities = someData.map(city => (
    <li>{city}</li>
));
```

The `map()` callback function will transform each element in our original array into a component that can be rendering. The result from `map()` will a be an array of React components (or HTML elements in this case).

We can then render the `cities` array inside a `<ul>` element like this:

```jsx
<ul>{cities}</ul>
```

However, if you run this code, you will notice a warning in the console stating that a key should be proved for list items.


![Lists and Keys React warning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fikej9xzcjmbuj1as58.png)

Keys help React identify which components have been added, updated, or removed. They serve as identification for components/elements. You can learn more about [why you should provide keys for list items](https://reactjs.org/docs/reconciliation.html).

## Using Keys in React
Keys should be unique. A simple way to correctly map the `cities` array above would be to use array indices as keys.

```js
const cities = someData.map((city, i) => (
    <li key={i}>{city}</li>
));
```

If you are working with an array of objects, for example, `users`. You could use identifiers from your data as keys.

```js
const users = someData.map((user) => (
    <li key={user.id}>{user.full_name}</li>
));
```


### Don't Use Indexes
It is **not recommended** to use indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Learn more about why [Indexes as Keys is an Anti-pattern](https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/)

## Auto-assign Keys
If you don’t have stable IDs for rendered items, you can let React handle this for you using a built-in method.
```js
const cities = React.Children.toArray(
  someData.map((city) => <li>{city}</li>)
);
```

Thanks for learning with me. Happy coding.

I'm offering a remote, 1-on-1 training in React. Interested? [Apply here](https://airtable.com/shrcLoRAths6d8LEu)
What is Scratch
Tags: gamedev
Published: 2022-09-22 12:00:29

Everyone knows at least a little about scratch I know but many a times I heard people say that scratch is not useful that partially right but not fully right let me tell you why.
## Fun and Creative Development
being a normal scratch user,I have made many games on it to play when i am bored specially on the cuphead series as that is my favorite video game series I made a couple of games from scratch starting from nothing and believe me you can learn scratch by yourself 
## Friendly and Fast
Scratch has itself on many platforms like windows,mac and android.Also it is fast 
## Batteries Included 
Scratch needs Just to be installed and used it needs no other extra application to be installed
## A Community With Their Own Projects !!!!
Scratch isn't only a programming language, it is a community
where people share their games many highly skilled devs like griffpatch are there
## The Love of Scratch Games 
I too make scratch games, I am a python dev but still what attracts me to scratch is it's lovely block interface, here is a video on one of my scratch games

[https://www.youtube.com/watch?v=KZTWeYWuB4o](url) 

thanks for reading this blog
C++
Published: 2022-09-23 09:44:08

Вы можете редактировать код **C++** и просматривать результат в своем браузере.

`#include <iostream>
using namespace std;

int main() {

cout << "Hello World!";

return 0;

}

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn0lu67g9i3tu1l97862.png)`
Dev to logo in python
Tags: python, chiki1601
Published: 2022-09-23 09:12:15

Hello friends...

I created Dev community "dev.to" logo using Python...

which is shown below:


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




I am glad that I am implementing Python turtle graphics by making various logos🥳🥳🥳🥳🥳

#pythonturtle