teleren/devto huggingface dataset:
Closer look at Metacall
Tags: javascript, webdev, programming, react
Published: 2022-10-20 06:26:32

# Introduction

Open Source community is growing more diverse and energetic every day. No matter what your interests are or which field you work in—you will be able to find someone who can help you there.

# Metacall

[MetaCall](https://metacall.io/) is an extensible, embeddable and interoperable cross-platform polyglot runtime. It supports NodeJS, Vanilla JavaScript, TypeScript, Python, Ruby, C#, Java, WASM, Go, C, C++, Rust, D, Cobol.

# Contribute to Metacall ✍🏻

- [Metacall](https://metacall.io/)
- [Metacall Github Repository ](https://github.com/metacall)
- [Metacall Docs](https://metacall.io/doc.html#/)
- [Metacall Discord Community](https://discord.com/invite/upwP4mwJWa)


# Deep Dive into Metacall 👨🏻‍🏫

Let's Join Metacall to understand the flow of the program and how to get start to contribute to metacall 👨🏻‍🏫 with all 
- Code 
- Non-code
- Documentations 
- Talks 

You can contribute to every different part of Metacall to check visit [Metacall Github Repository ](https://github.com/metacall) to join Metacall session [RSVP here](https://aviyel.com/events/474/closer-look-at-metacall-with-vicente-garcia)!

<img src="https://aviyel.com/assets/uploads/files/1666243248586-hacktoberfest-9-resized.png">

# Hacktoberfest with Aviyel 🎉



A month-long celebration where participants are prompted to contribute in ways other than writing code during this four-week period. We wanted to provide an avenue for people to connect, compete and collaborate with fellow open source enthusiasts. And on top of that, we’re providing mentors—giving creators a voice while also giving them assistance along the way.

# Metacall is Happening 👀

Hacktoberfest with Aviyel is waiting for you ✍🏻

All Tech Writers, Content Creators, Open source enthusiasts, and non-code contributors are invited to attend the Meta call session 👨🏻‍🏫

Recently we did a session with jeniksoft Founder of Tolgee
and shared insights with the community about how he built tolgee and his open-source journey!

and here we are back with EP 0️⃣5️⃣
A closer look at Metacall with Vicente E. Ferrer-Garcia 🔥

Speaking to us at this event is Vicente Garcia, the founder of Meta call sharing his journey and open-source culture and how to get started contributing to Meta for beginners! ✔💯

Looking forward to seeing you all at Aviyel stage 🎉

[Join from here ⬇](https://lnkd.in/g3g96k-9)
<img width="100%" style="width:100%" src="https://media.giphy.com/media/pynZagVcYxVUk/giphy.gif"> 

### Connect With Me

[Twitter](https://twitter.com/ganeshstwt) 
[Youtube]
(https://www.youtube.com/channel/UCjMse2JYXPbtlzcnkbXmVQQ)
[Linkedin](https://www.linkedin.com/in/ganeshpatil386386/) 
[Github](https://github.com/ganeshpatil386386)
12. Leetcode Solution in Javascript
Tags: javascript, chiki16, misspoojaanilkumarpatel
Published: 2022-10-20 06:18:20

```javascript
/**
 * @param {number} num
 * @return {string}
 */
var intToRoman = function(num) {
    var M = ["", "M", "MM", "MMM"];
    var C = ["", "C", "CC", "CCC", "CD", "D", "DC", "DCC", "DCCC", "CM"];
    var X = ["", "X", "XX", "XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"];
    var I = ["", "I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX"];
    return M[Math.floor(num/1000)] + C[Math.floor((num%1000)/100)] + X[Math.floor((num%100)/10)] + I[num%10];
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/integer-to-roman/
How to convert decimal number to bin, octal and hex format using python ?
Tags: python, beginners, programming
Published: 2022-10-20 06:02:15

In today's article you will see how to convert a decimal number to binary, octal and hexadecimal format.

```python
n = int(input("Enter a number: "))
n1, n2, n3 = n, n, n
temp = n
bin_of_n = ""
while n1!=0:
    rem = n1%2
    bin_of_n += str(rem)
    n1 = n1//2
oct_of_n = ""
while n2!=0:
    rem = n2%8
    oct_of_n += str(rem)
    n2 = n2//8
hex_of_n = ""
dict1 = {
    '10': 'A',
    '11': 'B',
    '12': 'C',
    '13': 'D',
    '14': 'E',
    '15': 'F'
}
while n3!=0:
    rem = n3%16
    if rem > 9 and rem < 16:
        hex_of_n += dict1[str(rem)]
    else:
        hex_of_n += str(rem)
    n3 = n3//16
print(f"Binary form of {temp} is:", bin_of_n[::-1])
print(f"Octal form of {temp} is:", oct_of_n[::-1])
print(f"Hexadecimal form of {temp} is:", hex_of_n[::-1])
```
Vue3 state to your CSS with v-bind
Tags: vue, javascript, css, tutorial
Published: 2022-10-20 06:00:00

> Photo by [Jeffrey Leung](https://unsplash.com/@fongsoul) on [Unsplash](https://unsplash.com/photos/NYcUkFJuxg0/).

To make the application more dynamic, Vue allows us to connect dynamic state to markup inside the template.

For instance, you could only want to apply a class to an element if a specific criterion is met. But did you know that component state may also be directly applied to a CSS property in the style tag?

The style tag is compatible with the CSS function known as `v-bind()` which enables dynamic CSS property values. Let's examine the topic at hand in more detail.

```vue
<template>
  <div class="custom-wrapper">
    <Box v-for="i in 35" :key="i" />
  </div>  
</template>

<script setup>
import Box from "./components/Box.vue"
</script>

<style scoped>
.custom-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1260px;
  gap: 10px;
}
</style>
```

The code for the main part, named `App.vue` is seen above. You can see the code for the `Box.vue` component, which is being imported into the `App.vue` file as part of this component, below.

```vue
<template>
    <div class="custom-box"></div>
</template>

<style scoped>
.custom-box {
    display: inline-flex;
    height: 50px;
    width: 50px;
    background: gray;
}

.is-done {
    background: #ffcd05;
}
</style>
```

If we look at this component, it is fairly straightforward. To make this box, we simply have a `div` with the class `custom-box` and some styles. Let's see how we can provide this component some dynamic CSS attribute values.

We must first establish a new property named `color`. This property will have the string value `#ffcd05` as its default value.

```vue
<script setup>
defineProps({
    color: {
        type: String,
        default: "#ffcd05"
    },
})
</script>
```

Now, we can utilize this `color` attribute within the style tag and assign it to the background color property as seen below.

```vue
<style scoped>
/* code omitted */
.is-done {
    background: v-bind(color); /* previous value: #ffcd05 */
}
</style>
```

As a result, we can now utilize the `v-bind()` method and pass in the `color` property rather than having a static value of `#ffcd05`. After that, the `Box` component will dynamically receive the color we are supplying as a property. 

The CSS will remain static since the real value will be assembled into a hashed custom property. Inline styles will be used to apply the custom property to the component's root element, and it will be reactively updated if the source value changes.


![custom code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc9tlalkp4q7wbul5cdi.png)

### Conclusion

The `v-bind()` CSS function is supported by single file component `<style>` tags for connecting CSS values to dynamic component state. It is a fun and easy way to keep reactivity in Vue components.

---

If you found this post helpful or enjoyed it, consider supporting me by [buying me a coffee](https://www.buymeacoffee.com/ptheodosiou). Your support helps me create more valuable content. ☕ Thank you!
Add Comments To Your Commands
Tags: cli
Published: 2023-01-19 17:59:42

---
title: Add Comments To Your Commands
published: true
date: 2023-01-19 00:00:00 UTC
tags: CLI
canonical_url: https://switowski.com/blog/comment-your-commands
cover_img: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9nk3trhtbysluqe4sol.jpg
---

A quick tip: when you write an important command in shell, put a comment next to it so you can easily find it later or remember what it does:

```bash
pytest -m slow --durations=10 # Run slow tests, return the slowest
```

## Why?

![Comic stripe with a programmer pressing arrow up multiple times instead of typing 'ls'](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5hzkcefzr0gphgspcrz.gif)
_Source: https://www.commitstrip.com/en/2017/02/28/definitely-not-lazy/_

I rely heavily on searching commands in history. Something like the guy above, but I usually press `ctrl`+`r` instead of `↑`.

The problem with this approach is that sometimes it's not easy to figure out how to find a specific command. You have to know at least part of the command, which might be difficult if you copied it from somewhere and immediately forgot about it. Or maybe the part that you remember is too generic. If I want to rerun `pytest` with a specific set of parameters, I know it starts with `pytest`, but that doesn't really narrow it down.

So I started annotating commands I might want to reuse in the future. Let's say I want to run `pytest` on all the tests marked as "slow" and return the slowest ones. I can put a comment right next to the command:

```bash
pytest -m slow --durations=10 # Run slow tests, return the slowest
```

This will make it much easier to find this command in the future. It works especially well in combination with a fuzzy finder like the [fzf](https://github.com/junegunn/fzf):

![Searching for a command using fzf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o2raqoaz076lyrh28ej.jpg)

## A real-world example

I often use this trick in IPython when I want to find some example data in the system. In one of the projects I worked on, we had a database full of objects with numeric IDs. If I wanted to grab an object, I could either:

1. Search in the UI for the ID of an object I want to retrieve from the DB. This takes time. I don't want to fire up the UI and do all the filtering to get the ID. So usually, I use the second approach.
2. Grab a random object from the DB and hope it has the type I'm looking for. If not, grab a different one.

Sure, the second approach might take much longer than the first approach. But just like the guy pressing the arrow up 50 times, I kept thinking that _"the next object **has** to be the right one."_

I solved that problem by adding comments - each time I grabbed a specific object from the DB, I wrote a comment on what's that:

```python
read_object("/Trade/98182379") # Trade X from "Portfolio A"
read_object("/Trade/18293712") # Trade Y from "Portfolio B"
```

That way, the next time I wanted to grab an object from Portfolio A, I just needed to hit `ctrl`+`r` and type "Portfolio A".
You're Doing Microservices Wrong
Tags: microservices, architecture, programming
Published: 2022-10-20 05:23:52

Before I get too deep into my thoughts on this topic, let me reference some definitions of what microservices are from some of the top players in the microservice space.

"A microservices architecture is a type of application architecture where the application is developed as a collection of services. It provides the framework to develop, deploy, and maintain microservices architecture diagrams and services independently." - [Google](https://cloud.google.com/learn/what-is-microservices-architecture#section-2)

"Microservices are an architectural and organizational approach to software development where software is composed of small independent services that communicate over well-defined APIs. These services are owned by small, self-contained teams." - [Amazon](https://aws.amazon.com/microservices/)

Now that I've laid out some definitions, I can explain what I see all too often. I talk to software engineers or a manager of a team of software engineers and they claim to be using microservices. They have services that they have containerized and deploy to some flavor of Kubernetes. While this looks like they're using microservices from a tech stack perspective, I find that they are usually missing something more subtle that is robbing them of being able to realize the benefits of a true microservice architecture.

What these teams are missing is service independence. All too often what you find when you look closer is a suite of containerized services that are tightly coupled with each other and require lock step deployment. Lock step deployment here refers to the inability to support multiple major versions of a service running simultaneously at the same time. If you can't deploy multiple major versions of a service at the same time then when inevitably you need to make an API breaking change, all consuming services need to update at the same time. I would argue that this trait means that the services are not independent as specified in the definitions that I referenced.

This is what I would define as a distributed monolith. Don't get me wrong, distributed monoliths can have some of the same valuable traits such as being able to horizontally scale your applications to match with the load. What they fail to provide though is the ability to make changes as fast as the owning team/developer is able to. Changes are only able to be made at the speed of the slowest consumer. This issue can be exacerbated greatly if various team priorities don't line up or conforming to the breaking changes proves to be difficult for that team or developer to accommodate in a reasonable time frame.
How to find answers on Google Forms
Published: 2022-10-20 05:23:14

Google Forms is an incredible tool, with it  you can make any type of questionnaires and quizzes. 
 
Finding answers on Google Forms can be tough for users. So, we’ve created a guide on how to find answers on Google Forms.
https://www.thereviewsnow.com/how-to-find-answers-on-google-forms/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwgr4cug6nul93d6wola.jpg)
A Cross Functional Tech Team
Tags: storybytes, leadership, crossfunctionaltechteam, webandappstudio
Published: 2022-10-20 05:10:49


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


Having team members from multiple locations with different cultures and mindsets have always been our asset. Whenever you apply your tech skills to a solution, you realize that you can not do it alone. And a team that becomes stagnant does hinder the growth of the organization. This resulted in the transformation of our team. As part of our agile organization transformation, we empowered the team by providing vision, strategy, principles, priorities and guidance to be ready. Ready for the change and prepared for self-transformation. And the best Cross-Functional Teams are sustained by agile methodologies. Whether co-ordination, communication, openness & Trust, Visibility or Ownership - everything gets addressed and is team-driven by the sense of belonging. As we are scaling, we aren't done yet. But we found the right way, and it is driven by every Web and App Studio Team member from all of our locations.
Deploy Meilisearch on Fly.io
Tags: flyio, deploy, devops, tutorial
Published: 2022-10-19 23:08:19

## Introduction

This guide explains how to deploy a ready-to-use Meilisearch instance on Fly.io.
First time I tried this I've had some problems that wasted me a lot of time, so to save you the time I'll create step-by-step instructions.


## Just do it

So if you want to deploy it to fly io as fast as possible, [this is the way](https://i.imgflip.com/4pw07x.jpg).

In any folder create `fly.toml`, and copy the content
```toml
app = "my-meilisearch"
kill_signal = "SIGINT"
kill_timeout = 5
processes = []

[build]
  image = "getmeili/meilisearch"

[env]

[experimental]
  allowed_public_ports = []
  auto_rollback = true

[[mounts]]
  source = "disc1"
  destination = "/meili_data"

[[services]]
  http_checks = []
  internal_port = 7700
  processes = ["app"]
  protocol = "tcp"
  script_checks = []
  [services.concurrency]
    hard_limit = 25
    soft_limit = 20
    type = "connections"

  [[services.ports]]
    force_https = true
    handlers = ["http"]
    port = 80

  [[services.ports]]
    handlers = ["tls", "http"]
    port = 443

  [[services.tcp_checks]]
    grace_period = "1s"
    interval = "15s"
    restart_limit = 0
    timeout = "2s"
```
then login in fly io!

```flyctl login```

and then deploy it!

```flyctl deploy```



## Theory

### persistent storage
So, the "hard" part of deploying is to create persistent storage.
Fly.io has a guide on that [here](https://fly.io/blog/persistent-storage-and-fast-remote-builds/), but in short you need to add this part to your toml. 

```toml
[[mounts]]
  source = "disc1"
  destination = "/meili_data"
```
This creates disc, that is mapped to this folder `meili_data`.

Why use /meili_data, because there is where melisearch stores your data.

### docker image

If you want fly io to use docker image from docker hub you need to specify image in build step like this:
```toml
[build]
  image = "getmeili/meilisearch"
```

### port 
Meilisearch is by default on port 7700, so you need to tell fly io to listen to internal 7700 port.
```toml
[[services]]
  internal_port = 7700
```

Everything else is pretty much default. 

And that's it 🎉!
How to Check Laravel 9 Project Environment
Tags: laravel, php, webdev, beginners
Published: 2022-10-20 04:45:06

In this laravel 9 quick tutorial we will see how to check laravel 9 project environment. It like check laravel version, php version, composer version etc. We can check laravel 9 project environment using single command. **php artisan about**.

### Laravel 9 Project Environment Command
Run below command to check laravel 9 project environment.
```php
php artisan about
```

![check laravel 9 project  environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f34lupcr5m455ormdgz.png)


You can also run only Environment command.
```php
php artisan about --only=environment
```
output:
```php
Environment .........................................  
Application Name .................................... Laravel  
Laravel Version ..................................... 9.23.0  
PHP Version ......................................... 8.1.3  
Composer Version .................................... 2.4.1  
Environment ......................................... local  
Debug Mode .......................................... ENABLED  
URL ................................................. localhost  
Maintenance Mode .................................... OFF
```

[![Buy Me A Coffee](https://demo.larainfo.com/images/help-me-to-buy-a-laptop.png)](https://www.buymeacoffee.com/same6)


### Read Also
👉 [Tailwind CSS Halloween Buttons Tutorial Example](https://larainfo.com/blogs/tailwind-css-halloween-buttons-tutorial-example)

👉 [Tailwind CSS List Style Marker Example](https://larainfo.com/blogs/tailwind-css-list-style-marker-example)

👉 [Create a Google Clone UI using Tailwind CSS](https://larainfo.com/blogs/create-a-google-clone-ui-using-tailwind-css)

👉 [Tailwind CSS Use Custom Fonts Example](https://larainfo.com/blogs/tailwind-css-use-custom-fonts-example)

👉 [Tailwind CSS Line Chart Example](https://larainfo.com/blogs/tailwind-css-line-chart-example)

👉 [Tailwind CSS Gradient Button Example](https://larainfo.com/blogs/tailwind-css-gradient-button-example)

👉 [Tailwind CSS Text Gradient Example](https://larainfo.com/blogs/tailwind-css-text-gradient-example)

👉 [Tailwind CSS Simple POST CRUD UI Example](https://larainfo.com/blogs/tailwind-css-simple-post-crud-ui-example)

👉 [Tailwind CSS Thank You Page Example](https://larainfo.com/blogs/tailwind-css-thank-you-page-example)

👉 [Tailwind CSS 3 Breadcrumb Example](https://larainfo.com/blogs/tailwind-css-3-breadcrumb-example)

👉 [Tailwind CSS 3D Button Example](https://larainfo.com/blogs/tailwind-css-3d-button-example)

👉 [How to Use Custom Colors in Tailwind CSS](https://larainfo.com/blogs/how-to-use-custom-colors-in-tailwind-css)

👉 [How to Use Strike Tag (cut text) in Tailwind CSS](https://larainfo.com/blogs/how-to-use-strike-tag-cut-text-in-tailwind-css)

👉 [Tailwind CSS Headings Typography Examples](https://larainfo.com/blogs/tailwind-css-headings-typography-examples)

👉 [Tailwind CSS Product List Example](https://larainfo.com/blogs/tailwind-css-product-list-example)

👉 [How to Center a Div in Tailwind CSS](https://larainfo.com/blogs/how-to-center-a-div-in-tailwind-css)
How to Create Modals on PrimeReact
Tags: codesandbox
Published: 2022-10-20 04:20:45

IzyModals is a Wizard library that creats React Modals using PrimeReact component. I will show you how to create a modal using izymodals in this post.

## GET STARTED: INSTALLATION
```bash
npm i izymodals
# or
yarn add izymodals
```

### LINKS
[CodePlusDev](https://codeplus.dev/projects/izymodals)
[NPMJS](https://www.npmjs.com/package/izymodals)
[YARNPKG](https://yarnpkg.com/package/izymodals)

## CodeSandbox Live Examples
{% codesandbox 2iz6t1 %}

Example configs for creating TabModal
```js
import { TabModal } from "izymodals";

const steps = [
    {
      label: "Step 1",
      content: Container,
      params: {
        children: <PromptExample buttonLabel="Step 1 Button: Do you like it?" />
      }
    },
    {
      label: "Step 2",
      content: Container,
      params: {
        children: (
          <PromptExample buttonLabel="Step 2: Do you recommend it to your friend?" />
        )
      }
    }
  ];

return (
    <TabModal status steps={steps}>
      {({ tabList, tabPanels }) => {
        return (
          <div className="col-12 flex">
            <div className="col-2">
              <div className="card">
                <div className="flex align-items-center flex-column ">
                  {tabList}
                </div>
              </div>
            </div>
            <div className="col-10">
              <div className="flex flex-column">{tabPanels}</div>
            </div>
          </div>
        );
      }}
    </TabModal>
  );
```

"tabPanels" and "tabList" variables are placeholders for PrimeReact Tabs component. "tabList" replaces with tab menu, tabPanels replaces with tab contents. TabModal component's child must start with a arrow function such as the example. So, do not forget to import TabModal component.

## Prompt Modal Example File
```js
import { useState } from "react";
import { PromptModal } from "izymodals";

const PropmtExample = (props) => {
  const [status, setStatus] = useState(false);

  return (
    <div>
      <PromptModal
        status
        labelYes="yes"
        labelNo="no"
        onYes={() => setStatus("yes")}
        onNo={() => setStatus("no")}
        {...props}
      >
        Test {status}
      </PromptModal>
    </div>
  );
};

export default PropmtExample;
```

**Support me for my Open Source Projects**
https://github.com/uuur86
https://github.com/sponsors/uuur86
Foray into Web Development
Tags: webdev, beginners
Published: 2022-10-20 03:36:16

Hello world! 

My name is Christy Hanson. I just got into coding three years ago, but I finally decided to start taking it seriously this fall. I joined the University of Washington bootcamp this October. My part-time classes start on December 12, 2022. 

Wish me all the best. I am prepared to put my mind to learning new programming skills for my career change into web development and technical writing.
Cloud Computing
Tags: synctech
Published: 2022-10-20 03:06:27

Cloud Computing is an innovative technology that provides networking and computer services online or through the cloud. The resources needed to meet these requirements include servers, networks databases software analytics. Refer to this [article](https://www.ncs.co/en-sg/knowledge-centre/what-is-cloud-computing/)


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