teleren/devto huggingface dataset:
Laravel Breeze Quick Setup
Tags: laravel, breeze, php, authentication
Published: 2023-02-18 17:41:23

[Laravel Breeze](https://laravel.com/docs/10.x/starter-kits#laravel-breeze) is a minimalist starter kit for building Laravel-based web applications. It provides a simple authentication system, basic UI components, and a few pre-built routes and views to help developers get started quickly. In this blog post, we will guide you through the steps to install Laravel Breeze in your Laravel application.

### Step 1: **Create a new Laravel application**

First, you need to create a new Laravel application using the Composer command. Open your terminal and navigate to the directory where you want to create your new Laravel application. Then, run the following command:
```
composer create-project --prefer-dist laravel/laravel <project-name>
```
Replace `<project-name>` with the name of your project. This command will download the latest version of Laravel and create a new Laravel application in the specified directory.

### Step 2: **Install Laravel Breeze**

Once you have created your Laravel application, you can install Laravel Breeze using Composer. In your terminal, navigate to the root directory of your Laravel application and run the following command:

```
composer require laravel/breeze --dev
```

This command will install Laravel Breeze as a development dependency.

### Step 3: **Generate authentication scaffolding**

Next, you need to generate the authentication scaffolding using the following command:
```
php artisan breeze:install
```
This command will generate the basic authentication routes, views, and controllers needed for user registration, login, and password reset. If asked select the stack`(blade|react|vue|api)` that you want to install, It will also install the necessary NPM packages for the authentication UI components.

### Step 4: **Run migrations**

The authentication scaffolding includes a users table, so you need to run the database migrations to create this table. Run the following command to run the migrations:

```
php artisan migrate
```
### Step 5: **Compile assets**

Once the authentication scaffolding has been generated, you need to compile the assets using the following command:
```
npm install && npm run dev
```
This command will install the required NPM packages and compile the assets.

### Step 6: **Test the authentication system**

That's it! You have now installed Laravel Breeze and generated the basic authentication scaffolding. With your application server up and running(`php artisan serve`) you can test the authentication system by navigating to the `/register` and `/login` routes in your application.

![register](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28ko4lcho978pmig59up.png)

**Conclusion**, Laravel Breeze is a great starting point for building Laravel-based web applications that require basic authentication features. With just a few simple steps, you can quickly set up an authentication system and get started with your application development.
I wish I had a lib that...
Tags: api, library, programming, tools
Published: 2023-02-18 17:38:52

---
title: I wish I had a lib that...
published: true
description: 
tags: #api #library #programming #tools
//cover_image: https://direct_url_to_image.jpg
---

What kind of api/library you wish that you had that would make your work easier?
3 Things I wish I knew when I started as a dev
Tags: beginners, career, webdev
Published: 2023-02-18 17:08:05

### I wasn't as great as I thought I was. 
When I started as a front-end developer, I thought I knew almost everything about CSS, HTML, JS, and React. I had the common misconception of thinking I was proficient and could tackle everything, when in reality, I just wasn't aware of how vast the programming universe is.   

It's a dangerous place to be when you're falsely sure you know that much, because it can diminish your progress and trick you into thinking you already know enough. Also, it's possible to get stuck forever here if somehow you don't realize how big it is. Luckily I could go past this phase, but I wish that happened a little bit earlier. Nowadays, the deeper I go, the more I understand how huge it's.


### Just coding wasn't enough. I needed my communication skills in place too.
The first unexpected moment was in interviews, being asked to describe what I had worked on before concisely. Later when I got the job, this skill was even more requested on standup calls, plannings, reviews, retros, and other meetings.    

Being able to communicate and express myself clearly was just as important as my technical skills. If I knew this from the beginning, I would practice it more, potentially making it easier to climb the promotion ladder, because the far you go there, the more important it is.


### It can be exhaustive.
I never thought that by doing what I liked and earning some cash along the way, I could get mentally exhausted. I wasn't aware I would encounter crazy deadlines, unnecessary arguments, finger-pointing, excessive extra work hours, constant everyday pressure, undervaluation, chronic stress, and consequentially, burnout.    

It happens, a lot. If I had known about it earlier I would say no to a lot of things, giving myself more room to breathe when needed.

--- 

As a dev, what knowledge or skills do you think you should have at an earlier stage in your career?
Angular Material slowly when use large Content Accordion
Published: 2023-02-18 16:42:34

I have problem when using accordion with large content inside. My case are using nested accordion.

My Solution are using Lazy Rendering with template like below

```html
<mat-expansion-panel>
  <mat-expansion-panel-header>
    This is the expansion title
  </mat-expansion-panel-header>

  <ng-template matExpansionPanelContent>
    Some deferred content
  </ng-template>
</mat-expansion-panel>

```

https://material.angular.io/components/expansion/overview#lazy-rendering
JUnit's @CsvSource.quoteCharacter
Tags: junit, java, todayilearned
Published: 2023-02-18 16:40:14


`@CsvSource` used with **text blocks** is really awesome! Similarly to [validation files](https://github.com/cronn/validation-file-assertions), it can be used to create easily readable tests with readily visible inputs and outputs placed side by side.

For example:
```java
	@ParameterizedTest
	@CsvSource(delimiterString = "->", textBlock = """
		ABC -> abc
		Abc -> abc
		""")
	void toLowercase(String input, String expected) {
		assertThat(input.toLowerCase())
			.isEqualTo(expected);
	}
```


What recently confused me was the following error:
```
org.junit.jupiter.api.extension.ParameterResolutionException:
No ParameterResolver registered for parameter [java.lang.String arg1] in method [void MyTest.test(java.lang.String,java.lang.String)].
```

It came out that it was caused by a parameter value starting with a single quote `'`, that wasn't closed by another `'` at the end of value. In my case the culprit was `'S-GRAVENHAGE`, which is Belgian street name.

The solution is to set parameter `quoteCharacter` to double quote `"`, provided we are using *text block*. This way we can test empty string with `""`.

Example:
```java
	@ParameterizedTest
	@CsvSource(quoteCharacter = '\"', delimiterString = "->", textBlock = """
		'S-GRAVENHAGE -> 's-gravenhage
		"" -> ""
		""")
	void toLowercase(String input, String expected) {
		assertThat(input.toLowerCase())
			.isEqualTo(expected);
	}
```

I hope it was helpful, cheers!
First Next.js website
Tags: nextjs, webdev, react, javascript
Published: 2023-02-18 16:31:11

I have finally created my first Next.js website!
I used the next.js official tutorial for the base template and then edited it to add my own content.
Check it out on Replit:
{% embed https://replit.com/@VulcanWM/nextjs-start?v=1 %}

Follow me and like to support me in my next.js journey.
How to beat the Beatstar game using Python and computer vision?
Tags: python, opencv, beatstar, ai
Published: 2023-02-18 16:01:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjf8fp98r7lw8scf2nsm.png)
Hi,
Love to play Beatstar ?
Interested in Python and computer-vision for beating the game ?
Follow this tutorial and watch how we can analyze the game using Python libraries, “investigate” the game by it’s image areas , and the keyboard or mouse commands for clicking the right spot very fast

If you are interested in learning modern Computer Vision course with deep dive with TensorFlow , Keras and Pytorch , you can find it here  : http://bit.ly/3HeDy1V
Perfect course for every computer vision enthusiastic

I also recommend this book for deep dive in deep learning : https://amzn.to/3TTZym7

You can find the link for the video tutorial here: https://bit.ly/3Qnjr3L
I will leave a link in the video description for all the instructions and the code

Enjoy
Eran
#python #opencv #beatstar #computervision #ai
How to manage physical resources in your Docker containers and keep production servers faster?
Tags: docker, linux, backend, django
Published: 2023-02-18 15:59:31


Hi! If you don't know that Docker can manage physical resources, this is the place to learn about  it and keep your production servers running faster.

In my current job, we have a lot of Docker containers running in production, but the problem was that we never considered how much CPU memory it occupies in our servers.

To solve this, in Docker, using docker-compose, we have a section named "deploy" that lets us manage limits and reservations of RAM. For example, here we have a Web Service based on Python and Django which has a Postgres database.


In this docker-compose.yml you can see "deploy" with "resources", that we need to configure for reserve quantity of RAM that can use the container and set a limit that which it can reach

```python

version: '3.8'

services:
  web:
    build: .
    volumes:
      - .:/code
    ports:
      - "8081:80"
    command: "python3 manage.py runserver 0.0.0.0:80"
    deploy:
        resources:
            limits: #Definiendo el límite de acceso a memoria RAM y núcleos CPU
              cpus: 0.50
              memory: 512M
            reservations: #Reservando espacio de memoria RAM y núcelos del CPU
              cpus: 0.25
              memory: 128M 

  database:
    image: postgres:14.1-alpine
    restart: always
    environment:
      POSTGRES_DB: dockerized
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      PG_SYSTEM_MAX_CONNECTIONS: 500
    ports:
      - '5432:5432'
    volumes: 
      - database:/var/lib/postgresql/data

volumes:
  database:
```

So, with ```docker stats``` we can see the information of the containers that are running and confirm that everything as we expected:



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc6yjmihhys4gkuebe4s.png)
JavaScript Tutorial Series: Scope
Published: 2023-02-18 15:42:42

The concept of scoping is essential because it makes it easier to organize code and avoids naming conflicts.

## What is a Scope?
A scope specifies how accessible variables and functions are within a block of code. It points out where a variable or function can be used and which portion of the code has access to it. 

## 3 types of Scopes
_Any statement enclosed in curly braces, such as a function, loop, or conditional statement, is considered a block of code._

### Global Scope
The term "global scope" describes variables that are reachable from anywhere in the code. In other words, any variable declared outside of a function or block is in the global scope.

```JavaScript
let x = "I'm a global variable";

function myFunction() {
  console.log(x); // output: I'm a global variable
}

myFunction();
console.log(x); // output: I'm a global variable
```

### Function Scope
The term "function scope" refers to variables that are only accessible within the function in which they are declared in. This means that variables declared inside of a function are not accessible outside of that function.

```JavaScript
function myFunction() {
  let word = "I'm inside of a function";
  console.log(word); // output: I'm inside of a function
}

myFunction();
console.log(word); // Uncaught ReferenceError: word is not defined
```
### Block Scope
Variables declared inside a block can only be accessed from within that block and any nested blocks that are part of that block scope.

Naming conflicts can be avoided with other parts of the code by defining variables within a block scope, which makes the variable names only accessible within the block.

```JavaScript

function myFunction() {
  let a = 5; //only accessible in myFunction
  if(a > 3) {
    let b = 12;
    //only accessible in this block of code
    console.log(b); 
  }
  console.log(a); //5
  //Uncaught ReferenceError: b is not defined
  console.log(b); 
}

myFunction();

```
Ruby on Rails on Lambda on Arm64/Graviton2!
Published: 2023-02-18 15:40:37


Today I am happy to announce that [Lamby](https://lamby.custominktech.com) (Simple Rails & AWS Lambda Integration using Rack) now demonstrates just how easy it is to use multi-platform `arm64` images on AWS Lambda. If this sounds interesting to you, jump right into our [Quick Start](https://lamby.custominktech.com/docs/quick-start) guide and deploy a new Rails 7 on Ruby 3.2 Ubuntu image to see it for yourself.

![Yay! You're on Rails! welcome page which has been extended by Lamby to show the Rails version, Ruby version, and machine architecture. There is some markup drawing on this page which uses an mechanical arm emoji and a big arrow pointing to the text at the bottom that says aarch64-linux. Cool!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k83x9ltwfxw3kbm7757.jpeg)

## How It Works?

First, AWS has made this [incredibly easy](https://aws.amazon.com/blogs/aws/aws-lambda-functions-powered-by-aws-graviton2-processor-run-your-functions-on-arm-and-get-up-to-34-better-price-performance/) since their release in September '21 where AWS SAM can simply switch the deployment architecture in your serverless project's `template.yml` file:

```diff 
 Properties:
   Architectures:
-    - arm64
+    - x86_64
```

Second, make sure your base Docker image supports the `arm64` architecture. Most popular images use [multi-platform builds](https://www.docker.com/blog/faster-multi-platform-builds-dockerfile-cross-compilation-guide/) already. For example, here is the official Ruby image we use in Lamby's demo project.

```shell
$ docker manifest inspect ruby:3.2 | grep arch
            "architecture": "amd64",
            "architecture": "arm64",
```

Lastly, make sure your deployment machine matches the production target architecture. This is needed to ensure native dependencies (like the MySQL client) are built to match the Docker image architecture eventually being run in production. If you are on a M1/M2 Mac, you can deploy from your own machine. 

However, for real production CI/CD, you are better off using something like CircleCI's [Arm Execution Environment](https://circleci.com/docs/using-arm/). Currently GitHub Actions lacks native support for Arm64 Runners, but that [issue is being tracked](https://github.com/actions/runner-images/issues/5631) and I suspect is soon to come.

In the meantime, Lamby's demo projects includes a working [CircleCI CI/CD](https://github.com/customink/lamby-cookiecutter/blob/master/%7B%7Bcookiecutter.project_name%7D%7D/.circleci/config.yml) example for you that leverages the `arm.large` machine type.

```yaml
default-machine: &default-machine
  machine:
    image: ubuntu-2204:current
    docker_layer_caching: true
  resource_class: arm.large
```

Thanks! Please take the time to learn more about Rails on Lambda using Lamby along with how to use arm64 with Graviton2 with your Lambda applications on our site:

- [How Lamby Works](https://lamby.custominktech.com/docs/anatomy)
- [Lamby CPU Architecture](https://lamby.custominktech.com/docs/cpu)
Finally learning Next.js
Tags: nextjs, webdev, javascript, react
Published: 2023-02-18 15:38:36

Since I got into web development with Flask, I've always wanted to learn Next.js since it's a very popular web framework.
But I usually prefer Python so I've been procrastinating learning Next.js.
**Today I decided to try it out.**

First of all, I'd like to say that the tutorial on the Next.js website is amazing.
It's very engaging, has a lot of facts and teaches very well.

During the tutorial today, I built my first website with React.js:
```html
<!-- index.html -->
<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>
```

which had the output:
![first react website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5sjyiw79vkq66tga02q.png)

---

I will continue learning Next.js and will post whenever I write some new code with Next.js.

---

Thanks to @ironcladdev and @dillonb07 for persuading me to start learning Next.js. 
I know it's been a while since I wanted to learn it, but it's better late than never!
Understanding DNS: The phonebook of Internet
Tags: beginners, internet, basics
Published: 2023-02-18 15:28:05

👋 Hey there!

Have you ever wondered how your computer finds a website on the internet? 🤔 That's where DNS comes in - it's like the phonebook of the internet!

DNS stands for Domain Name System, and it's a crucial component of the internet that allows your device to find and communicate with other devices on the internet. Here's how it works:

🌐 Websites and devices on the internet are each assigned a unique IP address, a string of numbers that identifies them on the network.
📚 But, IP addresses can be hard to remember, especially since they look something like this: 216.58.194.174.
🔍 That's where DNS comes in - it allows us to use human-friendly domain names, like www.google.com, instead of remembering a bunch of numbers.
🔗 When you type a domain name into your browser, your device sends a request to a DNS server to find the IP address associated with that domain name.
📶 The DNS server responds with the IP address, and your device can then connect to the website or device.


![Working of DNS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6l2yrq2fj1ofif5ov11.png)



So, in essence, DNS acts as a translator, converting human-friendly domain names into machine-friendly IP addresses.

But, how does your device know which DNS server to send the request to? 🤔 Well, your internet service provider (ISP) typically provides you with a default DNS server to use. However, you can also choose to use a different DNS server, such as Google's public DNS or Cloudflare's DNS.

DNS is a critical part of the internet infrastructure, and it's important to understand how it works. Without DNS, you'd have to remember the IP addresses of every website you visit, which would be a huge headache!

In conclusion, DNS is like the phonebook of the internet, translating human-friendly domain names into machine-friendly IP addresses. It's a crucial part of how the internet works, and understanding it can help you troubleshoot internet connection issues and make informed choices about your internet service. Thanks for reading, and happy surfing! 🌊🏄‍♀️🏄‍♂️
Quasar: Send email with custom data from web app without backend
Tags: quasar, email, web, app
Published: 2023-02-18 15:28:03

_This is my 4th write up on dev.to site. I show you a simple way to send an email with data from your Quasar web app. It works on my Android phone (not tested on iOS)._

## (HTML) a href mailto:
HTML language implements [mailto:](https://www.w3docs.com/snippets/html/how-to-create-mailto-links.html) schema to send an email from web page. Typical example is something like:
``` html
<a href="mailto:email@example.com?subject=Mail from our Website">Send Email</a>
```

Click on this `<a>` tag and the browser calls mail app from your operating system.

## (Quasar) q-btn href mailto:
In [Quasar framework](https://quasar.dev/) you can use `href mailto:` even in button ([q-btn component](https://quasar.dev/vue-components/button#introduction)).

Quasar is based on [VueJS](https://vuejs.org/) so you can use attribute's values indirectly from variable.

What does it mean? Instead of 

``` html
<q-btn href="mailto:email@example.com?subject=data backup" label="send email" color="green" class="full-width" no-caps></q-btn>
``` 

you can use
``` html
<q-btn :href="mail" label="send email" color="green" class="full-width" no-caps></q-btn>
```

And this is the place where the important part happens. Suppose we have variables defined in Quasar/VueJS app:

``` js
data: function(){
  return {
    address: "email@example.com",
    subject: "data backup",
    people: [{id: "001", name: "John"}, {id: "002", name: "Lucy"}],
  }
},
```

The `people` array is an example of data we send via email. We define computed function named `mail` which returns string value with complete `mailto:` schema including `people` array as body of the email message.

``` js
computed: {
  mail: function(){
    var date = new Date().toLocaleString("cs-CZ", {day: "2-digit", month: "2-digit", year: "numeric"});
    var data = "\n\n\n\n" + JSON.stringify(this.people) + "\n\n\n\n"

    return encodeURI(`mailto:${address}?subject=${subject} ${date} &body=${data}`)
  }
},

```

Pay attention to:
- `encodeURI()` function, it encodes string to be safely used via `http` protocol 
- `JSON.stringify()` to convert JSON object to string
- `backticks` at both sides of `mailto:` schema, it allows us to unite both string and variable's value

You can ask two questions now:

Q: Why there is "\n\n\n\n" on both sides of data we send? 
A: It is not necessary but that helps you copy data from mail client **on mobile phone** reading received message. 
Q: What is it good for?
A: You can use it as an naive data backup of your app's data - or - as an information email containing data you would like to see.

_Hope this article helps you..._
Using multiple git user configs with credentials store
Tags: git, github, productivity, todayilearned
Published: 2023-02-18 15:05:41

So, you have decided to have 2 separate accounts for work and personal.
Here are steps to follow to use both git configurations simultaneously with the same `.git-credentials`.

## Step 1: Separate Work/Personal directories

Create a `work` and a `personsal` directory in your Documents folder. Use these directories to separate your git directories.

```bash
  Documents
  ├── work
  │   ├── ...
  │   └── ...
  └── personal
      ├── ...
      └── ...
```

## Step 2: Separate git config for each account

- Create `.gitconfig-personal` in the `personal` dir.

  ```gitconfig
  [credential]
    helper = store
  [user]
    name = Personal_Username
    email = personal_email@domain.com
  [credential "https://github.com"]
    username = Personal_Username
    helper = store
  ```

- Create `.gitconfig-work` in the `work` dir.

  ```gitconfig
  [credential]
    helper = store
  [user]
    name = Work_Username
    email = work_email@domain.com
  [credential "https://github.com"]
    username = Work_Username
    helper = store
  ```

## Step 3: Update global `.gitconfig` to switch the profile based on directory

- Update your global config using the following command.

  ```bash
  git config --global --edit
  ```

- Add the following config.

  ```bash
  [includeIf "gitdir:~/Documents/work/"]
      path = ~/Documents/work/.gitconfig-work
  [includeIf "gitdir:~/Documents/personal/"]
      path = ~/Documents/personal/.gitconfig-personal
  ```

## Step 4: Register Access Tokens

- Check your `.git-credentials` file & add [GitHub access tokens](https://github.com/settings/tokens) for each account.

  ```bash
  https://Personal_Username:PERSONAL_TOKEN@github.com
  https://Work_Username:WORK_TOKEN@github.com
  ```

That's it, the next time you pull/push/clone a private repo, git will automatically choose the correct token for each config.