teleren/devto huggingface dataset:
Setting up open-wc on Windows 10
Tags: openwc, npm
Published: 2021-08-30 03:59:25

To set up Open Web Components, or open-wc, on your Windows 10 machine, we will complete the following steps:
1. Install the latest version of **Node LTS** and **NPM**
2. Install **Yarn**
3. Set up **open-wc**

***Note:*** *To perform the following steps, please be sure to have administrative privileges on your machine and access to the internet.*

###Node and NPM
Node.js and its package manager, known as Node Package Manager (npm) can be installed from [this link](https://nodejs.org/en/). Be sure to choose the **LTS** version when selecting which build of Node to download, and follow the installation prompts that appear upon successful download of the Node installer. 

>During the installation process, you may be asked to grant certain permissions or accept agreements. You must do so to properly utilize Node. 

NPM will automatically install with Node, and you can verify that both of these programs are up-to-date by opening Windows PowerShell and typing the following:
* To determine Node's version: `node -v`
* To determine npm's version: `npm -v`
 
###Yarn
Yarn, an alternative version of the aforementioned npm, can be installed from the command line using the following steps:
1. Open Windows PowerShell.
2. Type `npm install -g yarn` and press Enter.

> If you receive a permissions-related error upon entering this command, your account may not have administrative permissions. To circumvent this, attach `sudo` to the beginning of your command. In this case, the command would be `sudo npm install -g yarn`.
3. Optional: To verify the latest version of yarn has been installed, you can enter the command `yarn -v`.

###Open-wc
Now that we have our dependencies installed, we can set up open-wc!

*Before taking these steps, be sure to navigate to the directory in which you would like to do so.*
> In PowerShell, this can be done using the `cd` command, followed by your desired directory path.

Once you are in the folder that will contain your web component, you can utilize the following commands in PowerShell to create your component:
1. `npm init @open-wc`
2. Select "Scaffold a new project" from the options that appear.
3. Choose "Web Component" from the new list of options.
4. A list of three tooling options (Linting, Testing, and Demoing) will appear. Enable all three.
5. Select "no" when asked if you are using Typescript.
6. Give your project a name (using lowercase only).
7. Select "Yes" to the following prompts: "Write this file structure to a disk" and "Using yarn."

**Upon the completion of these steps, your web component is complete!**
> You can verify this by using `cd` followed by your project's name to view the directory entry of your project.
multi cloud infrastructure for enterprises
Tags: cloudnative
Published: 2021-08-30 08:48:30

Remember the days when a company’s workloads were married to one cloud service? When you could reap the advantages of the said service; while living with areas where it was lacking? Well, those days are behind us. According to a research conducted by Flexera in 2019, 84% of the global enterprises are already using multi cloud strategy. click here
Iniciar sesión y registrar usuarios con Google Auth & Laravel Socialite [Guía Paso a Paso]
Tags: laravel, googlecloud
Published: 2021-08-30 08:44:49

Buenas a tod@s, os dejo un tutorial para hacer un Auth con Google Auth y Laravel Socialite. Espero que os guste!

Como autenticar usuarios con Google Auth usando Laravel.

- Iniciar sesión con Google
- Registrar usuarios con Google
- Laravel Socialite 


[![Como autenticar usuarios con Google Auth usando Laravel.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2xdvce20895sznc1bmr.png)](https://www.youtube.com/watch?v=BXXmboZRLYo)



⬇️⬇️⬇️ ------ Enlaces ----- ⬇️⬇️⬇️


Enlace Google Cloud Platform (Credenciales):
https://console.cloud.google.com/apis...


Enlace Laravel Socialite (Documentación):
https://laravel.com/docs/master/socia...


Listado de drivers open source para Laravel Socialite:
https://github.com/laravel/socialite


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


👍 Dale like al vídeo y subscríbete al canal para estar al día de nuevos vídeos.


💰 Ayuda al canal con nuestro Patreon oficial 💰
https://www.patreon.com/magarrent
PHP Errors vs. Exceptions
Published: 2021-08-30 08:43:10

What are the differences between Errors and Exceptions?

## Error
When an operation fails, does not succeed.

## Exception
When an alternative or exceptional route appears.

### Example
If a delivery guy tries to deliver my package but he failed to do so, that's an Error.

But if he got attacked by my dog, that's an Exception.

If the he got attacked by my dog, I throw an Exception that my dog attacked him.

If the package has not been delivered, you don't throw an Exception. You return false or return an error message  "Package could not be delivered".

```
try {
    DeliverPackage();
}
catch (Exception $e) {
    return "Could not deliver the package because my dog attacked him";
}
return false;
```

Thats all folks~
The ephemeral miniconf - Stephane Gigandet
Tags: perl, raku
Published: 2021-08-30 07:38:25

# Speaker announcement: Stephane Gigandet
If there is one giant Perl flagship that has almost no echo in Perl community... it is [Open Food Facts](https://world.openfoodfacts.org/)

It's a project that has a social scope and an impact on society. But stop, I don't want to say one more word, I let this task to Stephane!

![Stephane Gigandet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwxksw5s6ud9znsq0daw.jpg)

I discovered Stephane at TPRCiC where he delivered a [lightning talk](https://youtu.be/imugl2dSdnU).

Stephane is not only focused on Open Food Facts but he is the creator a several projects including blog hosting platforms or website for kids.

## Talk 
![OpenFoodFacts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94hc70rqt17j2c6c5rc4.png)

As you guessed, Stephane Gigandet will talk about [Open Food Facts](https://world.openfoodfacts.org/)
Add signature image to pdf in React
Tags: react
Published: 2021-08-30 07:35:30

I have rendered a PDF file in react. I want to add a signature image to it by choosing an image file from the system and place it wherever I place the cursor on a pdf file. After adding the signature we have to download the pdf along with the signature image on it.

I have used the @react-pdf-viewer library.

I tried but I don't know how to exactly approach this problem.
JavaScript spread syntax gotcha
Tags: javascript
Published: 2021-08-30 07:26:20

Well, we all like spreads of all kinds. But [this type of spread's](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) got a gotcha.

While it may seem obvious, it really did not occur to me until I traced a bug to it.

Consider a scenario whereby you are keeping a collection of programming/scripting languages. You now defined something like this:

```
const languages = {
    "interpreted": ['php', 'javascript'],
    "compiled": [
        "java", 
        {"name":"c#","preferred":true},
        "rust"
    ]
}
```

Now, you've got yourself a beautiful collection of languages. Suppose you want to send Bob your language collection, and you don't want whatever Bob does to his own copy of this language collection to affect yours, how do you do that?

Well, for me, as a JavaScript Senior Dev Super-guru™️ that I am, I will spread the butter on the bread, like this:

```
const bobsCopyOfLanguages = {...languages};
```

Well, suppose I know that Bob does not like C#; and I do not want Bob to know about my secret affair with Miss C#, so I smartly and swiftly coded in my lie, like so:

```
bobsCopyOfLanguages.compiled[1].preferred = false;
```

Yeah. Done and dusted. Now Bob has a Certified True Copy™️ of my Certificate of non-preference for C#. Cool!

Well, now I've sent `bobsCopyOfLanguages` to Bob. Now lemme get on with my own life. I'll start my life by logging my preference for C# and admire the truthiness in my deep love for C#...

```
console.log(languages.compiled[1].preferred);
```

...and lo and behold, my log shows:

```
false
```

What, when did#$%!^#&**#...

Well, curse not.

This behaviour of Spread Syntax may be obvious to many, but for me, I had to sleep over it to think this through with fresh mind this morning.

The key here is to not forget that:

> Objects are passed by reference in JavaScript

So, as long as you have that cleared, then you know that what you "spread" or "copied" to Bob is effectively a copy of your `languages` object. However, the nested object is still copied **by reference**.

So, yeah, it is what it is.

One way I deal with this kind of Truly Copying™️ a light-weight object like this is:

```
const bobsCopyOfLanguages = JSON.parse(JSON.stringify(languages));

```

I hope you like my style of tech writing and learned something today!


> P.S.: confession: C# is not my preferred language.

> P.S.: If you do Vue, yo might be interested in [my article about the Practical Use-cases of Mixins in Vue 2](https://dev.to/damms005/practical-use-cases-of-vue-js-mixins-5911)
The ephemeral miniconf - Juan Julián Merelo
Tags: perl, raku
Published: 2021-08-30 07:09:27

# Speaker announcement: Juan Julián Merelo
[**The ephemeral miniconf**](https://thibaultduponchelle.github.io/the-ephemeral-miniconf/) is a Perl and Raku miniconf or maybe it's a Raku and Perl miniconf :grinning:

It's with great pleasure that I present today one of the first speaker that joined the miniconf :relaxed:

![Speaker annoucement - Juan Julián Merelo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r1ybf7ww0yhgcsq07t6.png)

[**Juan Julián Merelo**](https://github.com/JJ) is a very experienced Perl and Raku developer, a professor, a researcher and most of all a major *community pilar*.

I wanted to insist on this point since Juan Julián Merelo gave several talks and even recently managed the organization of the Raku (and Perl) room at FOSDEM 2021. 

He also recently published a couple of books on Raku! :heart:

## Bio
Juan Julián Merelo from his own bio: 
"JJ Merelo is a Perl user since 1993. He has used it continously at his day job as professor at the University of Granada, contributed to CPAN since 2001 and participated in two YAPC conferences talking about evolutionary algorithms in Perl and organised YAPC 2015. He's known to engage people who say that other languages are better than Perl, specially those who, besides, think that vim is better than emacs. Recently published a book about Perl 6."

emacs is better than vim :hushed: 

## Talk
![Top Secret](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ospmwjic1q4chlznxv2.jpg)

From my secret infos, Juan Julián Merelo should talk ~~about Raku~~ Perl and GitHub actions.
How to become a Full Stack Web Developer 👨‍💻
Tags: javascript, webdev, programming, beginners
Published: 2021-08-30 06:47:13

### How to become a Full Stack Web Developer

If you want to become a full stack developer, you need to know HTML, CSS, JavaScript along with a backend but making the right choice in an era where there are a lot of options creates a lot of confusion for newbie developers.

### The Bucket Technique
As a part of this technique, we will study each technology just enough to start building sites.

My breakdown for frontend and backend development is as follows:
FrontEnd Development:
➔ 80% HTML
➔ 60% CSS
➔ 50% JavaScript
➔ 20% Database (Insert, Update, Delete)

After you finish learning all these technologies, you will be able to build good designs but it is not possible to build a stunning website without graphic designing skills. You need to either be a good designer or refer to some design which is good enough for your site to look amazing!

For that you can either refer to some websites which are already built by great designers or refer to my curated list of free design resources for developers [here](https://devresources.gitbook.io)

{% link https://dev.to/abhirajb/free-resources-for-developers-meg %}


#### BackEnd Development

I recommend following options from a huge list of available options with pros and cons:
1. PHP - Easy to learn, best for beginners, limited support of libraries
2. NodeJs - JavaScript which you already know from frontend, Difficult to learn
JavaScript concepts like callbacks are used
3. Django/Flask (Python based backend Frameworks) - Includes ORM, great set of
python libraries, need to learn python


#### Not recommended for beginners
1. Frontend frameworks like react, vue, angular
2. Third party JavaScript, CSS frameworks
3. Website builders
Don't get me wrong here. JavaScript frameworks are amazing but if you want to be a successful
web developer, you need to master HTML, CSS, JavaScript first

Tools every Web Developer should know about
➔ UX wing for Icons
➔ PixaBay for free Images
➔ FreeHTML5 for free templates
➔ UnSplash for Image API
➔ Json Placeholder for fake Online REST API
➔ More resources are available on [here](https://devresources.gitbook.io)

If you wish to learn from videos on the internet,
this would be my best recommendation:
https://teachyourselfcode.io

if you liked this tutorial, you can support me by buying me a [coffee](https://www.buymeacoffee.com/rainboestrykr)
Set Flameshot as default screenshot app on Ubuntu :)
Tags: flameshot, ubuntu, screenshot
Published: 2021-08-30 06:43:54

First update packages using
```sudo apt update```
Install flamshot using apt or snap
```sudo apt install flameshot```
```sudo snap install flameshot```
Find the location of flameshot using 
```which flameshot```
then copy path of flameshot and go to settings of Ubuntu
Follow this steps
Settings --> Keyboards Shortcuts and scroll down

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25v36l9sxpxfbfzzu7hz.png)

Press + button

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3g03wqrkevu8bii9ntns.png)

to command field paste flameshot path and add ***gui*** command after the path then press set shortcut button


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs7xjm95mhtl0x5927ju.png)

then you should press print screen button on your keyboard!
It should work if it does not first you should clear default screenshot command search for it and remove it then follow the steps above again!
Happy using!
3 Ways to Set up Tall Stack in Laravel 8
Tags: tutorial, tailwindcss, laravel, webdev
Published: 2021-08-30 06:36:25

In this tutorial, you will see 3 ways to set up tall stack in Laravel. A Tall Stack Stand for (Tailwind CSS, Alpine.js, Laravel and Livewire), it is like full stack development solution for Laravel developer. With the help of stack you can build light wight and awesome application. lets see.
 

####3 Way to Setup Tall Stack in Laravel 8

######Step 1: Tall Stack Set up with Breeze

######Step 2: Tall Stack Set up with laravel frontend presets

######Step 3: Tall Stack Set up with Jetstream


####Step 1: Tall Stack Set up with Breeze

Laravel breeze package is my first choice for set up tall stack project. Laravel breeze is minimal package.

Create a New Laravel App

```php
composer create-project laravel/laravel project-name
```
Install breeze
You need to install first breeze package.
```html
composer require laravel/breeze --dev
```
Then, install breeze ui
```php
php artisan breeze:install
```
Install livewire

```php
composer require livewire/livewire
```
Include the JavaScript (on every page that will be using Livewire).
```php
...
  @livewireStyles
</head>
<body>
  ...

  @livewireScripts
</body>
</html>
```
After, you need to install dependencies

```php
npm install && npm run dev
```
And final run migrate

```php
php artisan migrate
```



####Step 2: Tall Stack Set up with laravel frontend presets
laravel fontend presets package also provide tall stack feature, it have more then 1.3+ thousand githube stars.

Create a New Laravel App

```php
composer create-project laravel/laravel project-name
```
Install Laravel Fronted Presets 
```php
composer require livewire/livewire laravel-frontend-presets/tall
```
Next, install ui

```php
php artisan ui tall --auth
```
After, you need to install dependencies

```html
npm install && npm run dev
```

And final run migrate
```php
php artisan migrate
```

####Step 3: Tall Stack Set up with Jetstream

Jetstream is designed using Tailwind CSS, Alpine js and Livewire.
Create a New Laravel App

```php
composer create-project laravel/laravel project-name
```
install Jetstream Package

```php
composer require laravel/jetstream
```
Next, install livewire chose one of for your requirements  

```php
php artisan jetstream:install livewire

php artisan jetstream:install livewire --teams
```
Finalizing The Installation

```php
npm install
npm run dev
php artisan migrate
```

###See Also 👇
[Tailwind CSS Real Estate Template](https://larainfo.com/blogs/tailwind-css-real-estate-template)
[10+ Free Tailwind CSS Colors Tools Resources for 2021](https://larainfo.com/blogs/10-free-tailwind-css-colors-tools-resources-for-2021)
[Tailwind CSS Simple Table Example](https://larainfo.com/blogs/tailwind-css-simple-table-example)
[Tailwind CSS Simple Button Examples](https://larainfo.com/blogs/tailwind-css-simple-button-examples)
Terraform aws codebuild : embed buildspec.yml
Tags: terraform, aws
Published: 2021-08-30 06:35:37

If you're working with aws and using terraform for ci/cd automation, you have the option to work with CodePipeline and CodeBuild. In CodeBuild you should define your buildspec.yml file as a command list to make your build process.
You have two options: first, read the buildspec.yml file from the source and the second is to use an embedded file.

Using the second option when using terraform has many advantages:
- you are using a single file for many pipelines
- changing and maintenance is easy 

I had to do this for some of my projects. I had several repos with the same technology and pipeline read `buildspec.yml` from code. Later we had to do some changes and I was forced to modify all of them.I decided to embed `buildspec.yml` file in my terraform and manage it using parameters.

The first step was to load `buildspec.yml` from local and as my previous experiences i tried to use `template_file` :
```
data "template_file" "buildspec" {
  template = "${file("${path.module}/buildspec.yml")}"
}
```

But it failed!
```
 Error: failed to render : <template_file>:16,32-33: Extra characters after interpolation expression; Expected a closing brace to end the interpolation expression, but found extra characters.
│
│   with module.pipeline.data.template_file.buildspec,
│   on ../../../../modules/cicd_ecs_github_embed/main.tf line 172, in data "template_file" "buildspec":
│  172: data "template_file" "buildspec" {
│
```

I used it before for loading CodeBuild Policy and CodePipleine policy templates. Anyway, by searching more I found `template_file` use to see files as a template and except some placeholder like `${var}` to fill it. and my file has some `$var` placeholder that would be filled from CodeBuild!

**Solution 1: use local_file**

you can ignore using template_file for this step if you dont want to pass any params to it at this stage.

So I moved to use another terraform object `local_file` :
```
data "local_file" "buildspec_local" {
    filename = "${path.module}/buildspec.yml.tmpl"
}
```
and then in my CodeBuild :
```
source {
    buildspec           = data.local_file.buildspec_local.content
    git_clone_depth     = 0
    insecure_ssl        = false
    report_build_status = false
    type                = "CODEPIPELINE"
  }
```
**solution 2: escape ${} in buildspec**

If you really want to pass some dynamic parameters in your `buildspec.yml` file , you should escape `${var:option}` parameters. because terraform expect all variable in simple `${var}` format ,when you're using some special tag like `IMAGE_TAG=${COMMIT_HASH:=latest}` it gives error, so escape this parameter by double $ character s below :
`- IMAGE_TAG=$${COMMIT_HASH:=latest}`
Now you can pass your desired variables in template file and escape CodeBuild specific variables:

```
data "template_file" "buildspec" {
  template = "${file("${path.module}/buildspec.yml")}"
  vars = {
  #feed dynamic variables I need 
  ps_asset_s3_bucket="${var.ps_asset_s3_bucket_key}"
  ...
  }
```
and then load it in `source` section of your code build
I hope this experience be useful for you.
Liman Core 1.8 Released
Tags: liman, laravel, php, server
Published: 2021-08-30 06:31:15

# Liman Core 1.8
Liman Core 1.8 version was released by HAVELSAN Açıklab Team on 30 August 2021.

More information on the Liman [website](https://liman.dev).

<img src="https://gblobscdn.gitbook.com/assets%2F-MiBAHJLv9c5wpIJDruk%2F-MiBAic-BVeCMq0AeKJ9%2F-MiBBMg4EADRRRwN1zIy%2F45tfkgqkv0zc5qzm45lh.png?alt=media&token=e4279bae-ca68-4917-829e-3df73beb7392" width="600">

# Install
You can install according to suitable operating systems:
https://docs.liman.dev/start/installing

# Major Changes
- The initial setup wizard has been added to the system.
- Added English support to 99% of the system.
- The design of the entire system has been updated.
- Improved overall user experience.
- The language option in the system has been moved from session to database and environment variables file.
- NEW! Our extension store has been added to the system. You will be just a click away from all the open source and paid - plugins we have developed within the liman
- Added new extension template for object oriented extension development tutorial.
- Added search feature.
- Improved new homepage layout. Server statuses, summaries from common extensions and monitoring of Liman server status are provided.

# Bug Fixes
- Fixed the Fonts folder, changed the new font of the system interface to Inter, and updated FontAwesome.
- The name of the Components folder has been changed to the user-friendly "components/".
- All modals centered on the y-axis.
- For the new interface system, the servers were made to go to the top when clicked.
- The problem of not working graphics on the main page has been fixed.
- All breadcrumb menus have been adjusted.
- Table component has been edited, three dots icon has been added to operate on that row in tables with a right-click menu for user-friendliness.
- The way modals in the system work has been changed. The experience has been streamlined by improving support for overlapping modals that are not available in Bootstrap.
- Fixed closing of all modals when pressing the close button in open modals.
- Adjusted the way the black shadow behind works in overlaying modals.
- Dark mode adjusted.
- Added Ubuntu 20.04 support.
- System-wide English translation was made.
- Notifications system has been adjusted. Added English message support.
- Fixed some bugs in components.
- The problem of the left menu not showing the active links properly has been resolved.
- Fixed all non-valid system-wide HTML codes. A valid order has been introduced.
- Removed the requirement to define cities for servers.
- WinRM uptime problem solved.
- Add-on update, add-on download systems have been adjusted.
- All system documentation transferred to https://docs.liman.dev.
- Pages with lsb_release and lsof package dependencies have been edited. The lsb_release dependency has been removed.
- Removed left menu extension count feature.
- The left menu server count feature has been added to the tweaks tab.