teleren/devto huggingface dataset:
Creating a custom Checkbox Component in Vue 3 (a better approach)
Tags: javascript, vue, html
Published: 2022-05-20 13:26:15

By default when creating a checkbox using a the input checkbox tag with a v-model attribute in [vue](https://vuejs.org/) comes with some additional features as shown [here](https://vuejs.org/guide/essentials/forms.html#checkbox). Attempts to extract this into a separate file causes it to loose these added features that come out of the box.

Here is a simple tutorial guide you in creating a custom checkbox component without any hustle.

We first need to create a vue file which will hold our component and for this tutorial we will go with CustomCheckbox.vue . You can use any name you prefer.

```javascript
//CustomCheckbox.vue Script Setup approach

<template>
  <input type="checkbox" v-model="model" :value="value" />
  <span>{{ label }}</span>
</template>

<script setup >
import { computed, defineEmits } from "vue";
const props = defineProps({
  modelValue: { type: [Array, Boolean] },
  value: { type: [Boolean, Object] },
  label: { type: String },
});
const emit = defineEmits(["update:modelValue"]);
const model = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

```

If you prefer the options api you can go with the below

```javascript
//CustomCheckbox.vue Options api approach

<template>
  <input type="checkbox" v-model="model" :value="value" />
  <span>{{ label }}</span>
</template>

<script >
  export default {
    props:{
      modelValue: { type: [Array, Boolean] },
      value: { type: [Boolean, Object] },
      label: { type: String }
    },
    computed:{
      model:{
         get() {
            return this.modelValue;
          },
          set(value) {
            this.$emit("update:modelValue", value);
          }
      }
    }
  }
</script>
```

With the component in place you can can simply import it and implement it like this

```javascript
//File that needs to use the component 

<template>
  <p>
    Using the custom checkbox with an array
  </p>
  <p>{{ selectedPeople }}</p>
  
  <template v-for="person in people" key="person.name" >
  <CustomCheckbox :label="person.name" v-model="selectedPeople" :value="person" />
  </template>
  
 <br> 
 <p>  Using the custom checkbox as stand alone </p>
 <CustomCheckbox  :label="`I am checked: ${isSelected}`" v-model="isSelected"  />
</template>

<script setup>
import { ref } from 'vue'
import CustomCheckbox from "./CustomCheckbox.vue"
  
const people = ref([
  {
    name:"William",
    age: 30,
    sex: "Male"
  },
  {
    name:"Thomas",
    age: 24,
    sex: "Male"
  },
   {
    name:"Jennifer",
    age: 20,
    sex: "Female"
  }
]);
  
const selectedPeople = ref([]);
const isSelected= ref(false);
</script>

```

This approach wouldn't require you to write any additional code to get your custom component working with objects and arrays.
Calcular Frete dos Correios usando PHP 8.1
Tags: correios, php, api, frete
Published: 2022-05-20 13:01:42

Este é um exemplo de classe em PHP para que você consiga simular os valores de frete. Após precisar realizar o cálculo de frete em um Checkout de Pagamento, vi que na internet os códigos que tinham para utilizar o serviço dos Correios eram antigos e a maioria não funcionava bem. 

```php
<?php

//namespace ......;

class FreightCalculate
{
    public function __construct(
        private string $code, //41106 - PAC , 40010 - SEDEX
        private string $originZipCode,
        private string $destinationZipCode,
        private int $weight,
        private int $length,
        private int $height,
        private int $width, //Min 10
        private array $response = [],
    ) {
        $url = 'http://ws.correios.com.br/calculador/CalcPrecoPrazo.aspx';

        if ($length < 16) {
            $this->length = 16;
        }

         $params = [
            'nCdEmpresa' => '',
            'sDsSenha' => '',
            'sCepOrigem' => $this->originZipCode,
            'sCepDestino' => $this->destinationZipCode,
            'nVlPeso' => $this->weight, //kg
            'nCdFormato' => '1',  //1 para caixa / pacote e 2 para rolo/prisma.
            'nVlComprimento' => $this->length,
            'nVlAltura' => $this->height,
            'nVlLargura' => $this->width,
            'nVlDiametro' => '0',
            'sCdMaoPropria' => 'n',
            'nVlValorDeclarado' => '0',
            'sCdAvisoRecebimento' => 'n',
            'StrRetorno' => 'xml',
            'nCdServico' =>  $this->code,
        ];

        $params = http_build_query($params);

        $curl = curl_init($url . '?' . $params);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        $data = curl_exec($curl);
        $data = simplexml_load_string($data);

        foreach ($data->cServico as $service) {
            if ($service->Erro == 0) {
                $this->response['code'] = $service->Codigo ;
                $this->response['value'] = $service->Valor;
                $this->response['deadline'] = $service->PrazoEntrega ;
            }
        }
    }

    public function getValue(): float
    {
        return float $this->response['value'];
    }

    public function getDeadline(): int
    {
        return (int) $this->response['deadline'];
    }

    public function getCode(): int
    {
        return (int) $this->response['deadline'];
    }
}
```
Esta é a classe que você pode imnportar no seu projeto.

# Como usar? 

Para usar basta instanciar a classe e chamar os métodos de acordo com a sua necessidade. 

```php
$frete = new FreightCalculate('41106','59945000', '59158400', 1, 5, 5, 10);

...

 $frete->getValue();

...

$frete->getDeadline();
```
🎬How To Create An Amazing Animated Text | Html & CSS✨
Tags: html, css, webdev, beginners
Published: 2022-05-20 12:36:19

**Learn How To Create An Amazing Animated Text using Html & CSS step-by-step from scratch.**


{% youtube KPx3mShnCFE %}

***

```html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Amazing Animated Text</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<ul>
    <li class="blue">
        <a href="#" data-text="&nbsp;Home">&nbsp;Home&nbsp;</a>
    </li>
    <li class="red">
        <a href="#" data-text="&nbsp;About">&nbsp;About&nbsp;</a>
    </li>
    <li class="yellow">
        <a href="#" data-text="&nbsp;Services">&nbsp;Services&nbsp;</a>
    </li>
    <li class="green">
        <a href="#" data-text="&nbsp;Blog">&nbsp;Blog&nbsp;</a>
    </li>
    <li class="pink">
        <a href="#" data-text="&nbsp;Contact">&nbsp;Contact&nbsp;</a>
    </li>
</ul>

</body>
</html>

```

Follow us on 📺YouTube:
https://bit.ly/3oBQbc0
Navigating a new code base
Tags: discuss, career, codenewbie
Published: 2022-05-20 12:26:16

This is a series leading up to a [Virtual Coffee](https://virtualcoffee.io) Lunch & Learn titled Asking Coding Questions with Bekah, @bekahhw and me, Nick Taylor, happening May 27th.

How do you navigate a new code base?

This can vary depending on your experience level, but we'd love to hear from all of you.

Tell us all your tips and tricks!

Looking for some inspiration? Check out @adiatiayu’s post!

{% embed https://dev.to/virtualcoffee/guide-to-asking-questions-about-code-299n %}

Photo by [Thought Catalog](https://unsplash.com/@thoughtcatalog?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/tips?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Creating custom login page styling for Wordpress
Published: 2022-05-20 12:02:33

We recently launched a new website for Australian telecommunications infrastructure provider [UCG](https://ucg.com.au) (and [New Zealand](https://ucg.co.nz)). We wanted a simple way to make a nice looking login page for their staff to enter the website which we can do with a little bit of custom CSS and a hook in the Wordpress functions.php file. 

Add this to your theme's functions.php file:


```
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/custom-login-styles.css" />';
}
add_action('login_head', 'my_custom_login');

`function my_login_logo_url() {
return get_bloginfo( 'url' );
}

// changing the logo link from wordpress.org to your site
function mb_login_url() {  return home_url(); }
add_filter( 'login_headerurl', 'mb_login_url' );


function my_login_logo_url_title() {
return 'Your Page Title';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

function login_error_override()
{
    return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
```

OK, so now we have a link to a custom CSS file where we can style up the login page. That file is /custom-login-styles.css so make a blank file with this name and add it to your child theme. 

Now we can style it. Here's what we're running for UCG. 

```
body.login {
  background: #252525 url(/logo.svg) no-repeat center center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.login h1 a {
  padding: 20px!important;
  background-size: 60% autoimportant;
  height: auto!important;
  width: auto!important;
}

.login #nav, .login #backtoblog a, .login #nav a { color: #999; }
.login #backtoblog a:hover, .login #nav a:hover { color: #fff!important; }
```

Now we have a custom branded login page for Wordpress without any plugins. 

We are using it on:
[Print Miami](https://printmiami.com)
[Monster Tees](https://monstertees.com)
[Sales Tax USA](https://salestaxusa.com/woocommerce-tax-rates-csv/)
[Dark Fibre](https://ucg.com.au/dark-fibre/)
[HFC](https://ucg.com.au/hybrid-fibre-coaxial/)
[FTTB](https://ucg.com.au/fttb/)
[SFP](https://ucg.com.au/sfp/)
We're building an open-source tool to deploy infrastructure to any cloud
Tags: go, opensource, cloud, devops
Published: 2022-05-20 11:42:02

Me and a few friends have been working on [multy.dev](https://multy.dev), an open-source cloud agnostic API that makes it easy to deploy the same infrastructure to any cloud provider using native managed services.

The motivation was the realisation that, even when using Terraform, migrating infrastructure code requires an end-to-end re-write. Even though most core resources are the same in any major cloud, developers need to learn a new provider to deploy the same infrastructure when moving providers.

We are still in early days of development and currently support core services from AWS and Azure:
- Networking (virtual_network, subnet, route_table, security_group, network_interface, public_ip)
- Compute (virtual_machine, managed kubernetes)
- Database (managed MySQL databases)
- Vault (managed secrets)
- Storage (managed storage)
Abstraction cloud differences (Azure VM public vs AWS EC2 private by default)
- Deployment through Terraform

We’re looking for feedback from other developers about our approach. Let us know your thoughts!

GitHub: https://github.com/multycloud/multy
Links e Projetos em Golang
Tags: go, tutorial, devops
Published: 2022-05-20 11:23:40

Links e projetos bacanas em Golang que vai lhe ajudar a iniciar na linguagem.

- https://github.com/avelino/awesome-go 
- https://github.com/gofiber/fiber 
- https://github.com/create-go-app/cli
- https://github.com/create-go-app/fiber-go-template
- https://github.com/hellokvn/go-fiber-api
- https://github.com/BrosSquad/GoFiber-Boilerplate

Para mais links com projetos howtos em Golang e VueJS acesse esse [Link](https://github.com/jniltinho/Calculator).
Project Estimation - how to prepare for project implementation
Tags: project, estimation, implementation, business
Published: 2022-05-20 11:22:08

{% youtube gGv-ITC-93M %}

Hi! Today some business talks. How to ensure a successful project implementation? Estimation is the key. So let’s take a closer look at that essential part of each development process – evaluation of risks, estimation of time, costs and resources.

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/project-estimation-how-to-prepare-for-project-implementation-experts-zone-22).
Tab focus links in Firefox on macOS
Tags: a11y
Published: 2022-05-20 11:19:18

I recently started using Firefox as my main development browser. While doing some minor updates to this site, I found that I couldn't tab focus to the links. Tabbing still worked fine in Chrome, so it must be something specific to Firefox.

This happens because Firefox honors macOS's system settings, and there are two ways that we can make it focus links while tabbing.

### Using system preferences

In _System Preferences → Keyboard_, in the _Shortcuts_ pane, check the **“Use keyboard navigation to move focus between controls”** at the bottom of the pane.

### Using Firefox's configuration

In Firefox, type `about:config` in the URL bar to open Firefox's configuration editor. Click accept to move on if you receive a warning.

- Search at the top for `accessibility.tabfocus`, and remove the value if it exists as a boolean `(true/false)`.
- Add a new value with the same name, `accessibility.tabfocus`, and give it an integer value of **7**.

The value 7 is important. To understand what it means, we can take a look at the possible values of accessibility.tabfocus:

- **1** - Only focus text fields
- **2** - Focus all form elements, except text fields.
- **4** - Only focus links
- **(other)** - Combine the values and their functionality. In our case, we want them all so **1 + 2 + 4 = 7**
How to manage scroll state in a bottom tab in Jetpack compose
Tags: android, scroll, management, jetpack
Published: 2022-05-20 11:08:04

Learn how to save and restore the state of composable while navigating between two composable by bottom tabs.

In this video, we used saveState & restoreState to handle the state.

{% embed https://youtu.be/cjaxfN8CK6A %}.

With the help of saveState flag we can save the state of our composable and by using restoreState we can restore the state when we swap between bottom navigation items.
Video platform MpvPlayer launches ad network
Published: 2022-05-20 11:01:38

MpvPlayer video platform is the largest provider of video player [https://mpvplayer.com/features.php](https://mpvplayer.com/features.php) and video hosting script [https://mpvplayer.com/video.php](https://mpvplayer.com/video.php). The platform is very popular and is currently expanding its own product line with the help of MpvPlayer advertising network project. Due to the program, many advertisers can get new space for promotion of their services and products.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qfuxllfyt2l4yhbgsv0.png)
Magna Pars Internet Technologies LTD is widely known on IT market. Only the most competent software developers and other specialists - marketing, PR-managers and experts in the sphere of sustainable development - take part in the project. Launch of new commercial product was announced in mass media long time ago; everybody who often uses paid advertisement for promoting their goods and services in the Internet space is looking forward to it.
Now inside the video player, provided by the company, advertisements are shown, you can see this process at the following link: [http://mpvplayer.com/advertising.php](http://mpvplayer.com/advertising.php). On sites built with MpvPlayer video script, advertisements are placed. By paying a subscription, the user can disable advertising in the player or, conversely, connect it to generate revenue. The service is a combination of traditional and innovational technologies in the advertisement of goods and services.
Ordering the display of ads, providers of goods and services receive a demonstration of their commercials inside the video player MpvPlayer, as well as on websites created using the Video Sharing script.
Almost all advertising formats are supported, such as text, graphics, and video. The main advantages of the advertising network are:
·         reasonable ratio of price and timing of advertising;
·         the popularity of the platform and the large number of sites based on its script;
·         conclusion of a contract with the advertiser, which contains the basic guarantees of its rights.
The project will undoubtedly be of interest to everyone who is currently planning to develop the advertising business. Recent survey has shown that the advertisers have been waiting for this project for quite a long time. So, it will undoubtedly be in great demand.
Interested in weekend project?
Tags: help, webdev, discuss
Published: 2022-05-20 10:47:17

I have a simple project to work on this weekend. Just to brief..

A chrome extension that shows data from local storage for easy viewing & copy-paste.

While development, there is a need to get the userId, token, etc fields from the storage. This chrome extension shows a popup box at the bottom of the screen with configured keys to display from local storage. Clicking on each field copies the content to the clipboard.

To add a field, select the key from local storage, select the path to the key. ex data.userInfo.token , assign a label to it.

This is just a 1 day project..In return you might get some good feedback from developers who might like it & n+1 projects in your resume..that's all 😂


---
Some of my previous projects:
- [Array Builder](https://www.arraybuilder.com/) - A free tool to visualize the output of array operations
- [Fireboard](https://www.fireboardapp.com/) - A work tracker for software developers
- [File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
- [Note Box](https://chrome.google.com/webstore/detail/note-box/mbbajjgefpenmkkhcnmmnoodlbcbfnmp) - A chrome extension to add notes/todos based on URL
- [Github Marker](https://chrome.google.com/webstore/detail/github-marker/imjdbnnpnohgcdbpgnidgolnamoghpoo?hl=en) - A chrome extension to Favorite, Bookmark & Mark link as Read in Github
Make your VSCode Look Clean!
Tags: vscode, webdev, beginners
Published: 2022-05-20 10:42:09

Let me tell you a thing when i downloaded vscode i was satisfied by it but then it became boring so i started discovering new themes, new vscode icons, etc.. but nothing really satisfied me and i bet this happened to you too (most of you)

but one dayyy i finally got a perfect vscode theme + icons combo and here it is


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

## Font - Cascadia Code

## Theme

The theme is Vitesse theme made Anthony Fu

*Theme Github* - https://github.com/antfu/vscode-theme-vitesse
*Theme Link* - https://marketplace.visualstudio.com/items?itemName=antfu.theme-vitesse

## File Icons

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

The File Icons i am using is vscode icons made by vscode team

*File Icons Github* - https://github.com/vscode-icons/vscode-icons
*File Icons Link* - https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

## Product Icons

Product icons are these icons on the left side

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

The Product Icons i am using is Carbon Product icons made by Anthony Fu too

*Product Icons Github* - https://github.com/antfu/vscode-icons-carbon
*Product Icons Link* - https://marketplace.visualstudio.com/items?itemName=antfu.icons-carbon

## Important

Make sure to use this settings to have the best experience

Settings ( personal ) - https://gist.github.com/CoderZ90/7a1956d4f6e236a166e132e98a650edf

I hope you loved it, please like this post and follow me for more

also subscribe to my youtube channel for great content - https://youtube.com/codingfire?sub_confirmation=1
Recursive wget and file transfer
Published: 2022-05-20 10:41:41

We can simply transfer files between two PCs via the network without having to use USB sticks or other _“archaic”_ methods.

We first cd to the directory we want and then run a simple python HTTP server.

**Python2:** `python -m SimpleHTTPServer <port_number>`
**Python3:** `python3 -m http.server <port_number>`

On the other machine we then use `wget` to recursively retrieve all the files from the remote directory.

`wget -r -np -R "<condition>" <remote_url>`

**`-r`** Recursively retrieve all files and directories from the remote machine.
**`-np`** No Parent flag. Do not ascend to the parent directory when retrieving recursively
**`-R`**  Reject all files that match the conditions

Example: `wget -r -np -R "index.html*" http://10.10.10.120:8080/`

#### Why reject index.html?
When we use `wget` recursively the command downloads automatically an _index.html_ file for each directory downloaded from the remote machine. With this flag we keep our downloads tidy and clean without any unnecessary files.
Meaning of REST in layman terms
Tags: rest
Published: 2022-05-20 10:41:34

Hi guys,
I was recently looking into understanding the REST architecture and it's meaning. I believe there are a lot of us who had used REST APIs extensively (consumed them in frontend side or might have possibly even created some on server side) without ever diving into understanding about the foundational architecture on which all those APIs have been based, right ? and that's what got me to write about it here at DEV.

Let's see what is it all about.

REST stands for : "RE"PRESENTATIONAL "S"TATE "T"RANSFER
(I still wonder why they took 2 letters from first word (RE) and only one from other ('S' & 'T') but anyways, pardon the judge in me)

As the full form states above we need to understand meaning of each word individually as components of the architecture to understand it's meaning properly.
Putting it directly in simple words would help save your time, so this is how it is :

"**REST** means an architecture through which **state** (properties : member variables/data variables) of complex objects on the server side could be **transferred** using some generalized formats (most commonly JSON/XML) and thereafter **represented** (at frontend) as text by the means of pre-defined data types supported commonly by all types of programming languages."

Now, elaborating a little bit about the definition above. It simply means that **REST** architecture is one through which any of the server side generated complex object's (objects created by any of the server side programming languages) state (properties) can be **transferred** in any of the generalized formats and thereafter can be **represented** at the frontend or UI side by the means of simple pre-defined data types like String, int, etc.

That's all !

This being my first post at DEV excites me and worries me a bit at the same time, I hope I was able to help you guys through my posts. Please drop comments below to give me feedback on how can I improve anything in terms of creating useful content for you all ! and also don't forget to like the post if it helped you out by hitting the heart button ! Thanks for reading !