teleren/devto huggingface dataset:
Bookipi - Simple invoicing for freelancers and small businesses
Tags: apps, saas, invoices
Published: 2022-07-31 15:12:08

Bookipi is a simple invoicing platform for small businesses and freelancers.

Since June 2018, Bookipi has grown to be an exciting community of over 800,000 business owners in over 179 countries. Today, Bookipi generates over $3 billion of annualized invoices and is one of the highest-ranked invoice apps globally. Our payroll platform, PayRoller, sends over $2.4 billion in annualized payroll to the Australian Taxation Office. Bookipi and PayRoller bridge the technology gap for small businesses, letting them run their business better.

Run by a small passionate team of smart creatives, Bookipi is growing rapidly to support and help accelerate growth for all small businesses around the world.
Strategy design pattern in Python
Tags: programming, tutorial, python, design
Published: 2022-07-31 14:53:00


![Strategy Design Pattern in Python](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhu1k43a2tcf4fre947v.png)

If you are familiar with the basics of object-oriented programming, and its principles, and you use it on your projects, maybe it's time to start learning different design patterns and use them.

A good OO needs a good OO designer. The goal is we are trying to have a reusable, maintainable, and extensible code.
So you need a good design for OO. here's where design patterns come to help us!

There are lots of design patterns, you can find and read them in **Gangs of Four (GoF) Design Patterns** book.
Today we're going to talk about one of the easiest and most popular design patterns.

Strategy pattern is considered a behavioral design pattern.
It lets you define algorithms, put each of the algorithms into a separate class, and make your objects interchangeable.

For example, if you want to have an object and change its behavior, you need to modify the class code.
Imagine you have an OO-based calculator which just gets numbers and has setters, and you need to add new features and methods to it like summation, subtraction, multiplication, and division.

This time you are not going to implement these methods inside of class.

First of all, we need an abstract like this:


```
from abc import ABC, abstractmethod

class Operation_strategy(ABC):
    @abstractmethod
    def do_operation(self, n1, n2):
        pass
```
After that, you need to generate new classes for each operation.


```
class Sum_strategy(Operation_strategy):
    def do_operation(self, n1, n2):
        return n1 + n2

class Sub_strategy(Operation_strategy):
    def do_operation(self, n1, n2):
        return n1 - n2

class Mul_strategy(Operation_strategy):
    def do_operation(self, n1, n2):
        return n1 * n2

class Div_strategy(Operation_strategy):
    def do_operation(self, n1, n2):
        if n2 != 0:
            result_number = n1 / n2
            return result_number
        else:
            raise ValueError("Sorry, no numbers below zero")
```
Now one more thing, you have to init and set an operation setter inside your calculator class. 

Maybe now you are confused and saying what's going on. But let me make it clear for you.

Inside of calculator class, instead of having 2 setters for numbers (first number and second number), we have 3 setters (first number, second number, operation).

The class does not have any idea of what is going to do, it just gets numbers and ALSO AN OPERATION!

With this pattern, you can easily define the behavior of your object without changing your class code, which is a clean way of coding because they are separated from each other.

You can see, download and run the full version of codes on [my Github](https://github.com/iw4p/) which make more sense. [Here are the codes](https://github.com/iw4p/python-OOP-unittest-design-pattern).

Also, [this video](https://www.youtube.com/watch?v=WQ8bNdxREHU) can help you a lot.
static website forms
Tags: webdev, html, forms, ssg
Published: 2022-07-31 14:53:00

If you are using a static site generator SSG like [Hugo](https://gohugo.io/) or [Jekyll](https://jekyllrb.com/), there maybe come a time that you may ask yourself, how do I handle forms.

Since static websites don't have a back-end
you can use the services of a forms back-end such as fabform.io that can handle your [static website forms](https://fabform.io/a/create-a-static-website-with-contact-form-on-github-pages)

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

Simple create a free account at [fabform.io](https://fabform.io)

Once you are in fabform, its just a case of creating a forms endpoint and adding the endpoint id to your html form's action method as shown here.


```
<form action="https://fabform.io/f/{form-id}" method="post">
 <label for="email">Your Email</label>
 <input name="email" type="email">
 <button type="submit">Submit</button> 
</form>
```
And that's all there is to it.

You now have a fully working contact form working!
How Crazy Codigo Got Its First Gig
Tags: machinelearning, tutorial, programming, codenewbie
Published: 2022-07-31 14:42:34

### By Annesha Mukhopadhyay

A couple of days ago, J was approached with what happens to be the coolest thing Crazy Codigo has ever done: Hosting a Virtual Workshop!
We had to do it on Behalf of a tech-education company called iNeuron. 
![iNeuron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9xkr9u0owq573xk68yk.png)
 
So, when on an average Wednesday afternoon, J called me with this news, I obviously had to say yes. And then after informing Shiv and Sam about it, we got to work to make sure that this event was a huge success. 

## Deciding whether we wanted to do it
This was actually a no brainer for all of us. 

Of course we wanted to host it! Not just that, we also wanted it to be the most poggers event ever. But that is easier said than done. 

So we did the first logical thing everyone should do while organising an event: Join a voice channel on the [Crazy Codigo Discord Server](https://discord.gg/GejKJACMHw) to divide work and have an action plan.

## Choosing the Topic and Date
Choosing the Topic was easy. It had to be something cool and what is cooler than teaching people how to build their first ML model? 

But the date wasn’t that easy. After considering a lot of factors like college reporting and us running on almost opposite schedules, we came to the conclusion that 6th and 7th August seemed like an almost perfect fit. 

## Making a Poster, Registration Form, Writing Mails and Posting on Socials
The first step was obviously making a poster for the event. You can’t promote an event without a poster.

After a lot of trial and error and sending each other 25 billion samples we decided on this:

 ![Build Your First ML Project: A Virtual Workshop
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzgqz3ocz88qjwnx2nq6.png)
 
And while I was making sure that the poster is the prettiest thing ever, Sam made a google form for the registration and got onto the monotonous job of mailing every 2nd and 3rd year student at KIIT (Thank God that KIIT has a mailing list situation). 

We also posted the poster and all the information on Crazy Codigo’s Instagram page, KIIT Instagram page and every WhatsApp group we were part of.

## Wrapping Up
As you can evidently see, I and everyone else are very excited for this workshop and can’t wait to see all of you there. 

And if this is the first time you are hearing about it and haven’t registered for it yet, well what are you waiting for? Go fill out the [registration form](https://forms.gle/HdPUdc3cfFuxpDFw9) right now and join us on 6th and 7th August. 

Oh another cool fact: All participants will be provided with a certificate from iNeuron upon completion of the workshop!

~ A
Rest Parameter in JS
Tags: javascript, tutorial, beginners, webdev
Published: 2022-07-31 14:39:07

Hello Guys today i want to show you how you can use rest parameters in javascript and i will try my best to explain this concept to you
Let's get started...

What is Rest Parameter?
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array.

Let's understand this with a bunch of code examples
```js
// normal function
function normalRestParameter(...rest){
  for (let i of rest) {
    console.log(i)
  }
}

normalRestParameter(10,20,30,40,50)
//10,20,30,40,50,60


//anonymous functions and here we have used
//reduce method of Array means we can use
//array methods on rest parameters
let anonymousFunction = function(...rest){
  const output = rest.reduce(
  (previousValue, currentValue) => previousValue + currentValue, 0);
  
  return output
}
console.log(anonymousFunction(1,2,3,4,5))
// 15 


//arrow function example 1
let arrowFunction1 = (...rest) => console.log(rest)

//arrow function example 2 using rest parameter
//with normal parameters , the first two parameters
//will be a and b and the rest will be assigned
// to an array of parameter
let arrowFunction2 = (a,b,...rest) => {
  console.log(a,b,rest)
}

arrowFunction1(1,2,3,4,5,6)
//[1,2,3,4,5,6]

arrowFunction2(1,2,3,4,5,6)
//1 2 [ 3, 4, 5, 6 ]


//getting the length of rest parameter
const lengthRestParameter = (...rest) => {
  console.log(rest.length)
}
lengthRestParameter(1,2,3,4,5,6,7,8,9,10)
//10


//using array methods like sort
const sortedRestParameters = (...rest) => {
  console.log(rest.sort((a,b) => a - b))
}
sortedRestParameters(6,9,4,10,2,8,5,7,1,3)
//[1,2,3,4,5,6,7,8,9,10]


//DO NOT USE Rest parameter at statrting
// or middle position always use it at
// the end of the parameters
function wrongRestParameter1(...rest,a,b){
  console.log(rest)
}
wrongRestParameter1(1,2,3,4,5)
//SyntaxError: Rest parameter must be last formal parameter


//DO NOT USE More than 1 rest parameter
function wrongRestParameter2(...rest1,...rest2){
  console.log(rest1,rest2)
}
wrongRestParameter2(1,2,3,4,5)
//SyntaxError: Rest parameter must be last formal parameter

```

As you can see some examples of using the rest parameter in different scenarios.

THANK YOU FOR CHECKING THIS POST
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/javascript-map-with-filter-2jgo

https://dev.to/shubhamtiwari909/e-quotes-3bng

https://dev.to/shubhamtiwari909/deploy-react-app-on-netlify-kl
Public speaking is hard and scary but it's also exciting!
Tags: watercooler, eventsinyourcity, publicspeaking, talk
Published: 2022-07-31 13:50:41

If you've seen me on social media, almost after few days I ask people on how they find events, and I get no responses...

Many a times I come across an event and then the Call for Proposals(CFP) has already passed, I have a lot of anxiety when it comes to Public Speaking and I get quite nervous, but I recently submitted a CFP in more than 5 places and got selected in two one was [Hashicorp's Hashi Talks](https://youtu.be/EQd2C52sOCk), the other [OpenInfra and CNCF Asia](https://hopin.com/explore/organization/d9Rd0K6Z5TcgMomL3VK26hy2F).

### The blunder!
I missed the HashiCorp Deadline because I never saw the email, Google Mail blunder. Luckily the HashiCorp team was okay with that  but then it hit me, I didn't actually have any experience in recording talks so the guidelines they suggested were the only things that could help me and I didn't have any slides!

To be honest it was a very taxing weekend, because figuring out OBS studio was not very challenging but the equipment I had made it challenging!

### Microphones are hard

I thought I have a good webcam by Lenovo, which comes with dual mics. But for some reason these didn't work that great with OBS studio and I didn't have time to wait for a collar mic.
So I had to use EasyEffects and somehow make the audio quality a bit good, didn't happen, I could still feel the choppiness.

### My attention span is as short as a bulb.
Truth be told, I don't really have a great attention span, so I wrote down the points to talk about, which I kept forgetting because I can't follow word to word without sounding like a robot.
I never fixed this, it's quite present during the video.

### My Anxiety and nervousness almost made me run away
The moment I saw that I was accepted the immediate thought was to run away in the other direction! WHY? because I was scared, the thought of me recording a video was something I can never imagine,  people could've hated it and literally I would've been outed as a fraud, so many thoughts in my head but I was like whatever happens happens.

### Why am I writing this?
Good question, I don't know either, somewhere I know there are people like me who are struggling and I want them to know that once you push through it things start to change. This is also a reminder to me of the things I have attempted so yay, here's to more learning and doing new and anxiety driven things.

#### Websites I used to find these Events.
- [Meetup.com](https://www.meetup.com)
- [Sessionize.com](https://sessionize.com/)
- [Papercall.io](https://www.papercall.io)
Calender in react js
Tags: react, javascript, html, webdev
Published: 2022-07-31 13:39:00

In this post we are going to make a simple calender in react js

run the the following commands in the terminal:

```
npx create-react-app react-calender
cd react-calender
npm i react-calender
```

go to `src/app.js` and erase the content in it,
and import react, react-calender

```
import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
```

next, create a function app and export

```
export default function App() {
  // main content goes here...
}
```

and set a value and onchange using react useState

```
export default function App() {
  const [value, onChange] = React.useState(new Date());
}
```

and then

```
export default function App() {
  const [value, onChange] = React.useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}
```

next go to `src/index.js` and paste the following code:

```
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

```

app.js full source code:

```
import React from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

export default function App() {
  const [value, onChange] = React.useState(new Date());

  return (
    <div>
      <Calendar onChange={onChange} value={value} />
    </div>
  );
}

```
live demo: https://reactcalenderbyrishi.stackblitz.io/

thankyou
Basic terms and JavaScript syntax
Tags: javascript, beginners, programming
Published: 2022-07-31 13:17:00


## Request a user’s name and display the response “Hello, [name]”

```js
let name = prompt ("enter name");
alert("hello" + " " + name);
alert('hello ${name}')

```

## Request a user’s year of birth, count his age, and display the result. Store the current year as a constant

```js
let ageInput = prompt ("enter birth year");
const YEAR = 2022
alert (YEAR - parseFloat(ageInput) -1)

```

## Request a length of a side of a square from a user and display the perimeter of the square

```js
let squereSide = prompt ("enter squere side length");
alert(squereSide * 4)

```

## Request a radius of a circle and display the area of such a circle

```js
const PI = 3.14159;
let radius = prompt("circle radius");
alert(PI * (radius*2))

```

## Request a distance in km between the two cities from a user, and the time they want to cover it within. Count the speed needed to be on time

```js
let distanceCovered = prompt("distance? (km)");
let timeBetween = prompt("time? (hrs)");
alert (distanceCovered/timeBetween)
```

## Create a currency converter. A user types in USD and the program converts them to EUR. The exchange rate should be stored as a constant

```js
const RATE = 0.9;
let USD = prompt("USD exchange into EUR");
alert(USD * 0.9)

```

## The user types in a sum of bank deposits for 2 months with a yearly interest rate of 5%. The program counts the sum of interest

```js
const RATE = 0.05;
let sum = prompt("input sum of your bank deposits");
alert(sum * RATE / 6)

```
How to use Teleport in Vue to Move Parts of Templates
Tags: vue, webdev, javascript, tutorial
Published: 2022-07-31 13:08:26

Normally, when we create components in Vue they naturally appear within the DOM structure where we'd expect them to be. However, sometimes this doesn't make sense. A good example of this is a modal - **normally**, a modal should appear on top of everything on the page - so if we create it within a component where it logically makes sense, it may appear behind certain HTML elements or require some weird CSS styling to get it to the top.

Fortunately, there is an easy way to solve for this problem in Vue, called `<Teleport>`. The `<Teleport>` tag lets us define something within a component, and then **"teleport"** it anywhere we want in the code. Let's look at how it works.


## How Teleport works in Vue

Suppose we have a simple component in Vue called `Modal.vue` which contains a modal. It looks a little like this:

```html
<script>
export default {
    data() {
        return {
            display: false
        }
    }
}
</script>
<template>
    <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button>
    <div class="modal" v-if="display">
        My Modal
    </div>
</template>
```

In our structure, this modal sits quite deep in our application structure:
![Teleportation App Structure Vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfglfl0muho3lstlggwo.png)
 

Since `Modal.vue` is so deep in our structure, it may not appear on top of the rest of our content as we want. As such, we'd ideally want it to be a direct child of the `body` tag. Using `<Teleport>`, We can adjust our component to **"teleport"** it to be a direct child of the `body` tag like so:

```html
<script>
export default {
    data() {
        return {
            display: false
        }
    }
}
</script>
<template>
    <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button>
    <Teleport to="body">
        <div class="modal" v-if="display">
            My Modal
        </div>
    </Teleport>
</template>
```

The `to` attribute of `Teleport` is expected to be a valid CSS selector. Now our `.modal` div will be teleported to be a direct child of the body, so it will always appear on top, rather than being deeply nested within our Vue structure.

### Disabling a Teleport tag

We can disable a `Teleport` tag based on certain logic using the `:disabled` attribute. For example, we could check for the value of `myToggle` being set to true, by using the following code:
```html
<Teleport :disabled="myToggle"></Teleport>
```

Above, if `myToggle` is set to `true`, the `Teleport` simply won't work, meaning we can only enable it when we want to. As such, `Teleport` is a very useful tag in Vue for adjusting **where** and **when** we see certain content. It's also OK to use multiple `Teleport` tags within the same Vue template.
Loops and conditions
Tags: javascript
Published: 2022-07-31 13:07:00

## Request two numbers and find only their largest common divisor

```js
let numberOne = prompt("input the first number");
let numberTwo = prompt("input the second number");
let smaller = 0;
let bigger = 0; 
let LCD = 0;

if (numberOne > numberTwo) {
    smaller = numberTwo;
    bigger = numberOne;
} else {
    smaller = numberOne;
    bigger = numberTwo;
}

for (let i = 0; i <= smaller; i++) {
    if (smaller % i === 0 && bigger % i === 0) {
        LCD = i;
        console.log("LCD", LCD);
    }
}


```
How to set default inject/provide values in Vue
Tags: javascript, vue, webdev, tutorial
Published: 2022-07-31 12:59:56

Vue uses provide and inject as a method to send data down multiple levels without having to use **properties** - but did you know you can set default values for any injected data, should it not be injected in the first place? Let's look at how it works.

## Setting default values with provide and inject in Vue

If you're not sure [how provide and inject work, you can read about it here](https://fjolt.com/article/vue-provide-inject). By default, `inject` expects a default value to be set for a `provide` key - and if it's not, it'll throw a runtime error. As such, it's beneficial to set a default value so that a runtime error does not fire.

So let's look at an example. Say you `provide` some data in your parent like this:
```html
<script setup>
    import { provide, ref } from 'vue'
    const message = ref('message');
    provide('myKey', message);
</script>
```

If you then inject it somewhere, you can use the second argument to set the default value. For example:
```html
<script setup>
    import { inject } from 'vue'
    const message = inject('myKey', 'the default value')
</script>
```

In this example, if `myKey` cannot be found, the default value will be set to `the default value` instead. You can achieve the same thing with the Options API like so:
```javascript
export default {
    inject: {
        message: {
            myKey: 'the default value'
        }
    }
}
```

Setting default values for injectors in Vue is best practice, and helps prevent unexpected runtime errors. [To learn more about Vue, click here](https://fjolt.com/category/vue).
Bun command not found on Linux
Tags: javascript, bunjs, bundler
Published: 2022-07-31 12:59:00

After a clean install of [bun](https://bun.sh/) on Linux, the `bun` command will not be recognised by the commandline, because bun was not automatically added to `PATH`

It will probably return a message as following, 

```bash
bun --version

Command 'bun' not found, did you mean:

  command 'ben' from deb ben (0.9.0ubuntu2)
  command 'bus' from deb atm-tools (1:2.5.1-4)
  command 'zun' from deb python3-zunclient (4.0.0-0ubuntu1)

Try: sudo apt install <deb name>
```


You can solve this with the following actions :

#### 1. Edit the `.bashrc` file
```bash
nano nano ~/.bashrc 
```
#### 2. Add the following lines at the end of your `.bashrc` file
```bash
BUN_INSTALL="/home/{USERNAME}/.bun"
PATH="$BUN_INSTALL/bin:$PATH"
```
with `{USERNAME}` replaced by your username.

#### 3. Close your terminal and open a new shell
```bash
bun --version
```
should now return information on the installed version of bun