teleren/devto huggingface dataset:
Zero downtime data migrations with PlanetScale Data Imports
Tags: serverless, database, tooling, devops
Published: 2021-11-17 17:15:25

PlanetScale now supports zero downtime data migrations from your existing MySQL database with our new Data Imports tool. We’re leveraging the power of [Vitess](https://planetscale.com/vitess) to let you try us out as a replica and then easily switch over your database to PlanetScale completely. No dumping your data, no restoring from backup. Just give us a connection and let us handle the rest.

When you connect your existing MySQL database to PlanetScale, you instantly get to experience the power of PlanetScale’s platform, which includes: 
* [Secure Passwords](https://docs.planetscale.com/concepts/connection-strings) that scale to thousands of simultaneous connections. 
* [Query Statistics](https://docs.planetscale.com/concepts/query-statistics) start finding & optimizing slow queries. 
* [Web Console](https://docs.planetscale.com/concepts/web-console) to query your database directly from the PlanetScale web UI.

The tool will help you along the way to make your data import successful and alert you on any incompatibility issues we may encounter.

Try importing your existing MySQL Database on PlanetScale and let us know how we can make this better. We’d love to hear from you on any ideas you have to improve onboarding.
LaTeX & Macros: Macros with Arguments
Tags: codenewbie, latex
Published: 2021-11-17 16:42:19

Hello, how are you? :) 

In this post I tell you 
- How to declare macros with arguments

Do you remember that in [this](https://dev.to/latexteada/latex-macros-creating-macros-macros-without-arguments-4338) post I gave you a brief introduction to Macros without arguments, these are helpful in those situations where you need the same expression multiple times, but what if you need to have the same expression but just modify something?

## How to declare macros with arguments

The command is the following 

```LaTeX
\newcommand{\name}[args]{expr}
```
* `\name` is the name of the command 
* `args` is the number of arguments in the command, top 9
* `expr` is the expression to manipulate

You already know what is `\name`, but if you have forgotten it, you can check it [here](https://dev.to/latexteada/latex-macros-creating-macros-macros-without-arguments-4338)

`args`, this is the number of arguments in the command, in other words, the *blanks* to be filled
- If you want 1 argument you put 1, if you want 2 put 2 and so on. ***The maximum number of arguments is 9***

> The same number of arguments declared in `args` must match with the arguments used in the definition of `expr`

- To put the position of the commands, we need to use `#` 

> The arguments have an order

Let's see some examples to clarify the information 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xhsztf1oc1r79njr4zq.png)
 
Let's analyze the code :) 

Here I declare two new commands 

The command `\oneArg` has **one** argument (*Which is declared in the square brackets*) and this argument is going to be the exponent of *x*. Can you notice, there is a `#` this indicates *Here is going to be my argument*

The command `\twoArgs` has **two** arguments, one is going to be the variable, and the second is going to be the exponent, again, I use `#` to say *Here is going to be my argument*

See, when I use these new commands, check that `\oneArg` has one curly brackets while `\twoArgs` has two curly brackets

- The curly brackets match with the number of arguments

That code produces 

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

But wait, do you remember that the arguments have an order while declaring them, let's check it

 ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfun7zgdqxx3zsnnsipj.png)
 
Here we have two new commands `\first` and `\second` they have two arguments, but there are a subtle difference, did you notice it? Yes ***The position of the arguments*** Let's see what is the output 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0ezw0068e32cjtgyob0.png)
 
Now you have grasped what *have an order* means 

This is all :) 

Thanks for reading. 

Do not forget to follow me on Twitter `@latexteada`

Greetings :)
Callback Functions, Explain it to me like I'm 5.
Tags: javascript, webdev, react
Published: 2021-11-17 16:36:33

![Image description](https://miro.medium.com/max/1130/1*ZdcU_oRV2Gz2XLal1uoNxg.jpeg)

Hi, since a 5yo will like chocolates, I will use that as an example!

Assume you are the 5yo kid, and I give you a chocolate. If you open the wrapper and pop the chocolate into your mouth right away, that is a normal function. On the other hand, if you give it to your mom and she, say, after 5 minutes unwarps the chocolate and pops it into your mouth, voila! you have a callback function.

![Image description](https://miro.medium.com/max/700/1*CbqCJcKdhm-aJW7WhXA7sw.jpeg)

In programming, if all the data required by a function is ready, we can right away call that function ourselves, as below:

>function greet(name) {
>    console.log("Hi, " + name )
>}
>greet("Brij")

On the other hand, assume we should fetch the name from a database over the network, which will take some time — known as an asynchronous operation, and in such a case, if we call the `greet()` function ourselves, name will still be undefined and our code will not work as intended. In such cases, we pass the `greet()` function itself as an argument to another function, say, `fetchName()`, that will first do the fetching and then using the fetched data call the `greet()` function, as below:

>function fetchName(cb) {
>    const name = // code to get the name
>    cb(name)
> }
>fetchName(greet)

Note that here we are not calling the `greet()` function; rather, the `fetchName()` function will call it! In other words, we are passing a function as an argument to another function to be called back later by that function.

I hope the above drops the penny further!

if you enjoyed this do consider to drop a like or a follow.
Windows 22, for Browser Light theme
Tags: javascript, webdev, beginners, programming
Published: 2021-11-17 16:10:12

Windows 22 for browser using HTML,CSS, JS

Hey Devs,
From few days after making Windows 11 abd windows 12 i tried my best to make Windows 22 ui.
I make it by using Html,Css,Js
As a beginner, I tried my best in it.

Live demo : https://win22.netlify.app/
Live demo : https://win22.netlify.app/
Live demo : https://win22.netlify.app/

You can also try Windows 11 and wis it also a very awesome project.

Window 11: https://window-11.netlify.app/
Window 12: https://window-11.netlify.app/
Window 11 dev.to: https://bit.ly/3FdcPij
Window 12 dev.to :https://bit.ly/3cndOAk

By :Abdul Rehman

About Me:
I am 14 years old boy From Lahore, Pakistan. I am interested in things related to computer and internet. I started my journey as a Web Developer From April, 2021 and start learning web development from YouTube and created Windows 11,windows 12,windows 22 that is really awesome please Try once. I make these windows on my PC(Which is too much slow) with 2gb ram and 32gb HDD(10gb usable).
Thank You.
I need your support.
Your one comment is a source of motivation for me.
Thanks again..
Windows 22, for Browser Dark
Tags: javascript, beginners, programming
Published: 2021-11-17 16:10:08

Windows 22 for browser using HTML,CSS, JS

Hey Devs,
From few days after making Windows 11 abd windows 12 i tried my best to make Windows 22 ui.
I make it by using Html,Css,Js
As a beginner, I tried my best in it.

Live demo : https://win22.netlify.app/
Live demo : https://win22.netlify.app/
Live demo : https://win22.netlify.app/

You can also try Windows 11 and wis it also a very awesome project.

Window 11: https://window-11.netlify.app/
Window 12: https://window-11.netlify.app/
Window 11 dev.to: https://bit.ly/3FdcPij
Window 12 dev.to :https://bit.ly/3cndOAk

By :Abdul Rehman

About Me:
I am 14 years old boy From Lahore, Pakistan. I am interested in things related to computer and internet. I started my journey as a Web Developer From April, 2021 and start learning web development from YouTube and created Windows 11,windows 12,windows 22 that is really awesome please Try once. I make these windows on my PC(Which is too much slow) with 2gb ram and 32gb HDD(10gb usable).
Thank You.
I need your support.
Your one comment is a source of motivation for me.
Thanks again..
How to use Svelte components in Astro
Tags: svelte, astro, tutorial, beg
Published: 2021-11-17 16:04:32

Astro supports Svelte out of the box. All you need is the correct framework [renderer](https://github.com/snowpackjs/astro/tree/main/packages/renderers) and you are good to go.

A renderer is an npm package that handles two things; rendering and rehydrating HTML.

We need to install `@astrojs/renderer-svelte` plugin to make Svelte components work.

Install `@astrojs/renderer-svelte` via npm or yarn:

```bash
# Using npm
npm install @astrojs/renderer-svelte

# Using yarn
yarn add @astrojs/renderer-svelte
```

Add it to your `astro.config.mjs` in the `renderer` property.

```javascript
export default {
  // ...

  renderers: [
    // ...
    '@astrojs/renderer-svelte'
  ]
}
```

Now you can import your Svelte component as usual.

```javascript
---
import Navigation from '../components/Navigation.svelte'
---

<Navigation />
```

For more information about renderers, take a look at the [documentation](https://docs.astro.build/reference/renderer-reference/).
Windows 22, for Browser
Tags: javascript, html, webdev, beginners
Published: 2021-11-17 16:02:44

Windows 22 for browser using HTML,CSS, JS

Hey Devs,
From few days after making Windows 11 abd windows 12 i tried my best to make Windows 22 ui.
I make it by using Html,Css,Js
As a beginner, I tried my best in it.

Live demo : https://win22.netlify.app/
Live demo : https://win22.netlify.app/
Live demo : https://win22.netlify.app/

You can also try Windows 11 and wis it also a very awesome project.


Window 11: https://window-11.netlify.app/
Window 12: https://window-11.netlify.app/
Window 11 dev.to: https://bit.ly/3FdcPij
Window 12 dev.to :https://bit.ly/3cndOAk

By :Abdul Rehman

About Me:
I am 14 years old boy From Lahore, Pakistan. I am interested in things related to computer and internet. I started my journey as a Web Developer From April, 2021 and start learning web development from YouTube and created Windows 11,windows 12,windows 22 that is really awesome please Try once. I make these windows on my PC(Which is too much slow) with 2gb ram and 32gb HDD(10gb usable).
Thank You.
I need your support.
Your one comment is a source of motivation for me.
Thanks again..
How to install react , A simplest guide
Tags: react, javascript, webdev, programming
Published: 2021-11-17 15:45:10

<h3>Intro:</h3> Hey there this is Rohit, today I am going to share an easiest guide for how to install react for beginners, So let's get into it
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6iuvw0w9mqz6jkuyu00.jpg) <center>Image: Photo by <a href="https://unsplash.com/@lautaroandreani?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"> Lautaro Andreani</a> on <a href="https://unsplash.com/s/photos/react-js?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </center>
<h3>What is react :</h3> React is amazing JavaScript library for building front-end user interfaces.
<h3>Pre-requisites :</h3> Before installing react we need to install node which is cross-platform JavaScript runtime environment, with node it comes with npm i.e node package manager which allow you to install packages and dependencies.
<br><center>click here to install <a href="">node.js</a></center>
<em>note: If you have already installed node in your system you can skip this step and move on to next</em>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmp9quvitya4qe6db04j.png)<center>Image by:<a href="https://www.linkedin.com/in/rohitpadghan/"> rohitcode</a> on <a href="LinkedIn/rohitpadghan"> LinkedIn</a></center>
<h3>Let's Install React :</h3> Installing React is the most easiest thing to do for that we need only one command in your terminal or PowerShell:
<br>
<center><code>npx create-react-app project-name</code></center>
<br>
That's it after this command press enter on your keyboard and wait for npm to install all the dependencies and packages.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5rm4z6mj5jr7x4u62tw.png)<center>Image by: <a href="https://www.linkedin.com/in/rohitpadghan/"> rohitcode</a>on <a href="LinkedIn/rohitpadghan"> LinkedIn</a></center>
Congratulations you have successfully installed react for the project, Now enter these following commands to launch react on browser:
open the project directory by this command:
<center><code>cd project-name</code></center>
<center>Then</center>
<center><code>npm start</code></center>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffdxuma1kdbsoxhry5ul.png)If you see this, Now you are good to go.

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

<h3>Conclusion :</h3> I hope you enjoyed this installation guide for React.js. If you have any questions or comments about this article, Comment me Thank you for reading, I am always excited when one of our posts is able to provide useful information on a topic like this!
F*!& Does That Mean?! - Learning AWS (v0.2)
Published: 2021-11-17 15:02:12

Hello everyone,

Time for another post about AWS and the services it provides. Last post, I mentioned what Amazon Web services was and how it can be beneficial for business to use. So. quick overview:

1. In 2006 Amazon began providing web services (known as Cloud computing today) to customers.

2. Businesses no longer needed to invest large amounts of money upfront to run, setup, and service large servers in a data center.

But what other benefits does AWS provide. This can be broken down into 6 key advantages.

<strong>A capital expense is now a variable one. 
No longer playing a guessing game.</strong>

A capital expense is money an organization spends on fixed assets. Since before AWS, businesses would have to purchase servers, have them delivered to a data center, installed and properly wired, and pay for the maintenance of those servers all before ever really knowing if they needed everything that they bought. This hard, fixed cost can now be a variable one. Meaning, as demand goes up so does the price of the resources that you are using, but if the demand doesn't then you are not stuck paying for resources you aren't using.

<strong>Increase Speed and Agility</strong>

Now I can only imagine that if you only have a data center for your business needs, that would mean that you have to plan ahead to change things. For example, lets say your developers are working on a new feature. Implementing this feature could take months due to the fact that you have to coordinate all tasks with the data center. By the time you get one feature up and running, your dev team already has 6 more features ready to go and this process compounded takes entirely too long. With Amazon web services, your dev team has access at all times and a process that took months to do, now takes minutes. Allowing your business to change dynamically as you see fit.

<strong>Focus on what matters</strong>

When you use AWS you no longer have to worry about the infrastructure when it comes to your IT. Now you can spend that time and brain power on how to grow your business.

<strong>A Much Bigger World</strong>

Let's face it, the world is bigger than your neighborhood and even your state. Using AWS puts your business on the global stage. It's a lot of information here, but on the surface this is it. Later, I'll learn about availability zones and regions.

<strong>Economies of Scale.</strong>

Basically, because a lot of businesses use AWS the pay as you go pricing is relatively low since all the usage gets combined.
Dunder Data Python Challenge Solutions 1–5
Tags: python, pythonchallenge
Published: 2021-11-26 17:18:17

---
title: Dunder Data Python Challenge Solutions 1–5
published: true
date: 2021-11-17 15:01:14 UTC
tags: python,pythonchallenge
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/1280/1*5O9S2Qr1-ItcQjf3jzfIXA.png)](https://medium.com/dunder-data/dunder-data-python-challenge-solutions-1-5-cb40cf9c5de0?source=rss----c2aa71d9ec41---4)

Try all of the challenges for free at python.dunderdata.com

[Continue reading on Dunder Data »](https://medium.com/dunder-data/dunder-data-python-challenge-solutions-1-5-cb40cf9c5de0?source=rss----c2aa71d9ec41---4)
React: Render Conditionally from Props
Tags: javascript, react, webdev, beginners
Published: 2021-11-16 15:23:23

* Using props to conditionally render code is very common. They use the value of a given prop to automatically make decisions about what to render.
* In this lesson, FreeCodeCamp wants you set up a child component to make rendering decisions based on props. You'll also use the ternary operator. We have a parent called `GameOfChance`, and a child `Results`.
* First, we need a simple expression that randomly returns a different value every time it is run. You can use `Math.random()`. This method returns a value between 0 (inclusive) and 1 (exclusive) each time it is called. So for 50/50 odds, use Math.random() >= .5 in your expression. 
* Now Render the `Results` component as a child of `GameOfChance`, and pass in expression as a prop called `fiftyFifty`. In the Results component, write a ternary expression to render the h1 element with the text You Win! or You Lose! based on the `fiftyFifty` prop that's being passed in from GameOfChance. 
* Finally they want us to make sure the `handleClick()` method is correctly counting each turn so the user knows how many times they've played.
* Code:
```React
class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    {/* Change code below this line */}
    return <h1></h1>;
    {/* Change code above this line */}
  }
}

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => {
      // Complete the return statement:
      return {
        counter: prevState
      }
    });
  }
  render() {
    const expression = null; // Change this line
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        {/* Change code below this line */}

        {/* Change code above this line */}
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
}
```
* Answer:
```React
class Results extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>{this.props.fiftyFifty ? "You Win!" : "You Lose!"}</h1>;
  }
}

class GameOfChance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => {
      return {
        counter: this.state.counter + 1
      }
    });
  }
  render() {
    const expression = Math.random() >= .5 // Change this line
    return (
      <div>
        <button onClick={this.handleClick}>Play Again</button>
        <Results fiftyFifty = {expression} />
        {/* Change code above this line */}
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
}
```
AWS Gotchas
Tags: aws, gotchas, timestanps
Published: 2021-11-17 14:36:25

---
title: AWS Gotchas
description: My article description
tags: 'aws, gotchas, timestanps'
cover_image: ''
canonical_url: null
published: true
---

## AWS Gotchas

I will highlight AWS gotchas as I find them

### Dynamodb

#### TTL Fields are in Seconds
  TTL Fields on dynamodb are great, as they allow a grace period between marking a record for deletion and the actual deletion. Meaning that when you have finished with a record, you can set a TTL field to a time in the future and AWS internal mechanisms will remove the record at some point soon after the that time has passed.

##### Gotcha:
 The TTL field is an integer in **seconds** from the Unix epoch, all other dates, including explicit date fields in dynamodb are stored as ISO dates, which are stored under the hood as **microseconds** from the Unix epoch. This is documented at [Using DynamoDB Time to Live (TTL)](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/time-to-live-ttl-before-you-start.html#time-to-live-ttl-before-you-start-formatting). However, it is easy to forget hence the reason for this gotcha.

##### Workaround:
Calculate the TTL using your standard date library, convert to integer and divide by 1000 to convert milliseconds to seconds.
e.g
```javascript
import { DocumentClient } from 'aws-sdk/clients/dynamodb'
const dynamoDb = new DocumentClient()

const hoursInTheFuture = 24

const getFutureTimeInSeconds = () => {
  const time = new Date()
  const hours = time.getHours() + hoursInTheFuture

  time.setHours(hours)

  return Math.round(time.getTime() / 1000)
}

export const deleteInTheFuture = async (id) => {
  const result = await dynamoDb.update({
    TableName: 'myDynamoDbTable',
    Key: {
      id
    },
    UpdateExpression: 'SET ttl = :t',
    ExpressionAttributeValues: {
      ':t': getFutureTimeInSeconds() //record will be deleted 24 hours from now
    }

  }).promise()

  return result
}
```
AWS Gotchas
Tags: aws, gotchas, timestanps
Published: 2021-11-17 14:32:35

---
title: AWS Gotchas
description: My article description
tags: 'aws, gotchas, timestanps'
cover_image: ''
canonical_url: null
published: true
---
## AWS Gotchas

I will highlight AWS gotchas as I find them

### Dynamodb

#### TTL Fields are in Seconds
  TTL Fields on dynamodb are great, as they allow a grace period between marking a record for deletion and the actual deletion. Meaning that when you have finished with a record, you can set a TTL field to a time in the future and AWS internal mechanisms will remove the record at some point soon after the that time has passed.

##### Gotcha:
 The TTL field is an integer in **seconds** from the Unix epoch, all other dates, including explicit date fields in dynamodb are stored as ISO dates, which are stored under the hood as **microseconds** from the Unix epoch. This is documented at [Using DynamoDB Time to Live (TTL)](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/time-to-live-ttl-before-you-start.html#time-to-live-ttl-before-you-start-formatting). However, it is easy to forget hence the reason for this gotcha.

##### Workaround:
Calculate the TTL using your standard date library, convert to integer and divide by 1000 to convert milliseconds to seconds.
e.g
```javascript
import { DocumentClient } from 'aws-sdk/clients/dynamodb'
const dynamoDb = new DocumentClient()

const hoursInTheFuture = 24

const timeInSeconds = () => {
  const time = new Date()
  const hours = time.getHours() + hoursInTheFuture

  time.setHours(hours)

  return Math.round(time.getTime() / 1000)
}

export const deleteInTheFuture = async (id) => {
  const result = await dynamoDb.update({
    TableName: 'myDynamoDbTable',
    Key: {
      id
    },
    UpdateExpression: 'SET ttl = :t',
    ExpressionAttributeValues: {
      ':t': timeInSeconds() //record will be deleted momentarily from now
    }

  }).promise()

  return result
}
```