teleren/devto huggingface dataset:
Div. Positioning (Absolute)
Tags: webdev, beginners, frontend, css
Published: 2023-06-22 16:20:10

## Absolute

This article focuses on **position: absolute,** however you can read my earlier articles on [position: static;](https://dev.to/whozormah/html-elements-and-div-positioning-5a7c) and [position: relative;](https://dev.to/whozormah/div-positioning-relative-17bg) to catch up.

The positioning of a div relative to the closest containing element is what distinguishes absolute positioning from relative positioning. 

The absolute position can be used with other position properties such as Top, Bottom, Left, and Right to offset the div as desired.

In contrast to position: relative;, position: absolute; totally removes the element from the document flow, and all other elements continue to move as if the div does not exist.

Since the div's movement no longer affects the positioning of other elements, it is now responsible for stacking and overlapping.


> Relative is positioned relative to itself or, better still, relative to its original location. In contrast, absolute is positioned relative to the closest parent element. 

It's important to keep in mind that there are two elements to be considered using the absolute positioning.  

```
.container {
  border: 1px solid #000;
  position: relative;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: absolute;
  top: 20px;
}
.box2 {
  width: 60px;
  height: 60px;
  background-color: #0003;
}
```
The above are the CSS settings for an HTML document with two child elements (box1 and box2) and a div (container) acting as their parent div.

The parent div (container) has its position property set to relative; this allows (box1) to be placed absolutely to it. 

[view Code](https://codepen.io/whozormah/pen/gOQwZPq)

Take note of how **Box1** has now shifted 20 pixels away from the top of the container div. 

>Recall that I said we use an absolute position, relative to the nearest parent element. 


![Box1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00yi8z0snzv5seoa05dz.PNG)

**What happens when the Parent div isn't positioned relative?**
Of course, since the container div is the element's closest parent div, Box1 will still move 20 pixels away from it.



![No Position ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoxjs4odftadghq5fx5p.PNG)

When the position: relative; property associated with the container div is commented out, the distance between box1 and the container decreases. This is because box1 is now adopting the screen as its parent div.


The position of Box2 will be based on the normal document flow since its position property is not set. It is positioned behind Box 1 causing stacking or overlapping. 

In order to manage the overlapping, one can use the CSS property **z-index**.
Fundraising for your startup
Tags: fundraising, startup, tutorial, web3
Published: 2023-06-21 16:46:08

You've built a product and have a little bit of traction, thus proving your business model. Now you need some capital to grow the business.

After poring through hundreds of startup pitch decks over the years and subsequently investing in a fair share, I'll go over what I consider to be essential slides to include.

I'll draw on Airbnb's angel round pitch deck in this piece. In 2008, in the depths of a severe recession, Airbnb raised $600k at a $3 million valuation. $100k invested in that round would be worth north of $1 billion today.

Airbnb's pitch deck was 14 pages long. Investors lose interest and focus reading through long pitch decks, so I would consider this to be about the comfortable limit.

## 1. What is the problem you're solving

"No easy way exists to book a room with a local or become a host".

There were three points, but this should've been at the top. It was a category defining problem to solve.


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

## 2. Solution to the problem
 
Self-evident in Airbnb's case. Their platform was already built and operating. It is difficult to impossible raising for something that hasn't been built, unless you have a strong track record.
 
## 3. Market size

Start with the market you can reasonably achieve locally, then build from there. Refrain from saying "we aim to take x% of the global market" because predicting anything 10 years out might as well be science fiction... Although in Airbnb's case it actually worked out!

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

## 4. Business model
 
Airbnb takes 10% of every transaction on their platform. Simple.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7cj0wxfi7ayy31lpmj7.jpeg)
 
## 5. Competition
 
List your competitors and what they offer and show where you sit in that space.

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

## 6. Competitive advantage

Perhaps the most important slide of all. You must have some sort of outsized advantage or knowledge that is difficult to reproduce. If you don't you will be just another fish in the school.

## 7. Founding team

What's your background and how long have you known and worked together. Founder break-ups are a common cause of startup failure. This is important because you'll likely spend more time together building your business than with your spouses.

## 8. Your ask

What are you aiming to raise and what milestones do you expect to achieve.

See the rest of the airbnb angel round [pitch deck](https://deckviewer.com/v/9247c52). Password is airbnb.
Just completed the JavaScript Scrimba course
Tags: scrimba, javascript, beginners, tutorial
Published: 2023-06-22 16:15:54

Although it has taken me longer than I would have hoped, I have finally completed the Scrimba 'JavaScript' course. It was certainly difficult at times, and I will no doubt have to revisit it to remind myself of certain things, I am still very proud of this accomplishment.

I will most likely take a small break from JavaScript, just so I'm not too overwhelmed, but when I return I plan on tackling the Scrimba 'React' course. I am somewhat daunted by this as it is longer than the JavaScript one that I have just completed. However, I'm sure that if I take it at my own pace I'll be fine.
The journey of ML from Zero.
Tags: machinelearning, python, ai, learning
Published: 2023-06-22 15:53:10

###### Before starting with it, I just want to say hi 👋 to the Dev.to community, Its been a year since I last created any post. (can you please comment `welcome back` for a little motivation for me😄)

Lets start with a simple question...

## What is Machine Learning?🤔

Machine learning 🤖 is like having a super-smart 🧠 friend who learns from examples and gets better over time. It's all about teaching computers to understand patterns 🧩, make predictions 🎯, and even learn from their mistakes 📚. Just imagine a computer 🖥️ that can recognize cats 🐱 in pictures or play chess ♟️ like a grand master. It's like magic ✨, but with algorithms and data 📊! So get ready to dive into the exciting world of machine learning, where the possibilities are endless 🚀!

## What is this post about?🤔

Well I am also a beginner in ML ( machine learning ) but this doesn't means that this is a useless post or something sh!t 💩. I will get to the main point without making any further ado.

*Back story: If you are not living under the rock 🤡 then you must know what AI is(oh the almighty ChatGPT). I am good in creating UI/UX and have `{NULL}` knowledge in ML/DL/DSA etc. and here comes ChatGPT to complete my job, even tho it is not perfect in creating UI/UX to replace the job of Freelancers but it doesn't means that it will NEVER BE ABLE TO DO IT! After getting absolute 0 freelancing projects of UI/UX, I knew that it is the perfect time to learn ML. But after searching thousands of github repos/gists, YouTube videos/playlists, websites I wasn't able to find the "PROPER" guide for ML in a single place.*

Now I need you guys who are beginners/Intermediates/experienced in this field to send PRs in the Repo guide to help people like me to kick start their journey.

And If you have `{NULL}` experience in this field, the Repository currently have all the prerequisites (written by a person working in a MNC, can't mention them)

[![Machine-Learning-Starter-Guide](https://socialify.git.ci/CodeWhiteWeb/Machine-Learning-Starter-Guide/image?font=Bitter&language=1&name=1&pattern=Floating%20Cogs&theme=Dark)](https://github.com/CodeWhiteWeb/Machine-Learning-Starter-Guide)

The Repo is still not polished/perfect so bare with it, or just add what you need and send a PR.

Thanks in advance 🙏 to everyone helping/using it.

🌟 Please Star the repo so that it can reach more people

REPOSITORY - [LINK](https://github.com/CodeWhiteWeb/Machine-Learning-Starter-Guide)
I need help in my react ecommorce project
Tags: javascript, react
Published: 2023-06-22 15:39:34

How Can i handle adding product with multiple sizes iam storing the product in the local storage with 2 sizes (size1,size2) and the selected size is named size 
so how can i split it to 2 components inside the cart
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glk33lfkb18edbxtzfzq.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlto7y8iwbxc4b08r1ac.png)
Start Using Yaml Files
Tags: apacheage, tutorial, beginners, productivity
Published: 2023-06-22 15:30:44

Yaml stands for "YAML Ain't Markup Language". It is a human-readable data serialization language that is commonly used to describe configuration files. Some of the benefits of using Yaml are:

Easy to read: Yaml files are easy to read and edit by humans. They use indentation instead of brackets, and colons and dashes instead of equal signs.

Flexible: Yaml supports lists, objects, strings, booleans, integers, floats, null. It can represent complex data structures in a clean format.

Language independent: Yaml files can be parsed and emitted by programs written in any language.

Configuration files: Yaml is a popular format for configuration files. Many applications like Kubernetes, Ansible, and Github Actions use Yaml for their config files.

Model libraries and UML diagrams: Because Yaml has a simple syntax and can represent complex data structures, it is useful for modeling libraries, architectures, and even UML diagrams. The indentation and formatting make the models very readable.

and here is my journey of living with one of the huge libraries ever. Libpg.h though the header file of the libPg is enough to see the available procedures but still you need to give more hints and make it easier to recap the functionality or notes for a specific function.
I started to write YAML files for each function and then connected these files in a UML representation you can actually do similar thing in your local machine with [yml2dot](https://github.com/lucasepe/yml2dot) and then olaaa you got a visualization of your documentation.
Rust Developer Needed
Published: 2023-06-22 15:16:12

Requirements:
- Degree in Computer Science or equivelant
- Experience developing applications in rust

Preferences
- Knowledge of algorithms and data structures
- Experience building multi-threaded applications
- Experience designing a robust API
- Knowledge of cache databases
- Focus on optimization and low-level programming

Nice-to-haves
- Worked on at least one production-grade rust application
- Experience working with ethers
- Knowledge of Ethereum blockchain
- Experience working eith EVM or Solidity

Role

We are looking for a rust developer with a knowledge of best practices, algorithms, and data structures. You will be working on a backend to process data from the Ethereum blockchain. The focus of your work will be to design highly optimized modules in rust and identify modules that can be improved.
Asynchronous Programming in Go
Tags: go, programming, softwareengineering, coding
Published: 2023-06-22 15:09:22

If you're a Go developer, discover the secrets of robust asynchronous code in golang! Dive into the world of managing concurrency & asynch processing with this insightful [post]( https://rotational.io/blog/async-or-swim/).
![sea otter inspector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otdoiujl9f93ncm2zawn.png)
Spheron SOSS
Published: 2023-06-22 14:58:34

How to make a video with Midjourney 
 
 Midjourney is a powerful AI tool  to create amazing images. But did you know  you can also use Midjourney to make videos? 
  In this blog post, I'll show you how to create a video using Midjourney. I  cover the following topics: 
 
 * How to use the "-video" parameter to create a video of the image creation process 
 * How to edit  video in  video editing software 
 * How to export  video 
 
 1. Step 1: Create a video about the image creation process 
 
 If you want to create a video of the image creation process, you must use the "-video" parameter when creating the image. This parameter creates a short video of the AI creating the image.  For example, if you want to create an image of a cat,  use the following command: 
 
 
 /imagine a cat -- video 
 
 
 This command creates a video of an AI creating an image of a cat. The video shows the  progress of the AI as it creates an image from the initial sketch to the final rendering. 
 2. Step 1: Edit the video in  video editing software 
 
 After creating a video, you can edit it using video editing software. It allows you to add text, music and other effects to your video.  
 I recommend using a video editing program like Adobe Premiere Pro or Final Cut Pro. These  programs have a wide range of features that you can use to edit your videos. 
 Step 3: Export the video 
 
 After editing your video, you can export it in a format that you can share. I recommend exporting the video in MP4 format. Most video players support this format. 
 To export a video, open the export settings of your video editing software and select MP4 as the output format.  Conclusion 
 
 Creating a video with Midjourney is a great way to share your AI  with others. The "-video" parameter makes it easy to create a video from the image creation process, and the video editing software allows you to add text, music and other effects to the video. 
 Hopefully this blog post has shown you how to make a video using Midjourney. If you have any questions,  leave a comment below. 
  Here are some more tips for making videos with Midjourney: 
 
 Use clear and concise instructions. AI will understand instructions better  if you use clear and concise instructions. Try different parameters. The "-video" parameter is just one of many parameters  you can use to control Midjourney's output. Experiment with different parameters to see what  results you  get.   Please be patient. The AI may take some time to generate the image, especially if you use a lot of parameters. Be patient and let the AI do its job. 
 I hope these tips help you create great videos with Midjourney!
On the pending sale of Google Domains to Squarespace: Any thoughts/opinions on domain registrars?
Tags: discuss, webdev
Published: 2023-06-22 14:34:20

Google Domains is in the process of being sold to Squarespace. See Squarespace [for more info on the pending sale](https://domains.squarespace.com/). 

What are your thoughts on alternative domain registrars to Google Domains? Do nothing and just go with Squarespace after the transition? They indicate they will keep Google's renewal pricing for at least 12 months, but I'm guessing they will increase significantly after that (e.g., domains that currently cost $12 at Google would cost $20 at Squarespace's current rates).

Alternatives to Squarespace that I'm considering are Porkbun and Cloudflare. What are your opinions on those? Pros and cons? What others should I consider? Some things that are important to me include no game playing on pricing (e.g. same renewal price as registration price), no added costs for things that should be included (e.g. DNSSEC, Whois privacy, etc). Squarespace appears to meet those requirements.

Which registrars do you use or have used? What do you like about them? What don't you like? Have you had any problems?
Blackfire.io: A rookie agent’s guide for organization owners and admins
Tags: webdev, beginners, tutorial, productivity
Published: 2023-06-22 14:32:17

Have you taken the first step to levelling up your performance optimization game with a shiny new Blackfire subscription? 

Congratulations, you are now the owner of a new organization. You’ve taken a significant step in improving the performance of your application by putting an observability strategy in place. And we couldn’t be more excited for you!

Now it’s time to kick off your journey and explore the **[ultimate rookie agent’s guide](https://blog.blackfire.io/welcome-to-blackfire-a-rookie-agents-guide-for-organization-owners-and-admins.html?utm_source=devto&utm_medium=social&utm_campaign=blackfireblog)** that will help you get setup for success in your first days with Blackfire.

Happy performance optimization ❤️ the Blackfire team!
How to execute end-to-end Cypress test cases in a Google Cloud Pipeline?
Tags: testing, javascript, googlecloud, google
Published: 2023-06-22 14:22:28

How to execute end-to-end Cypress test cases in a Google Cloud Pipeline?

Integrating Cypress with Google Cloud Pipeline, you can leverage the scalability and automation capabilities of the cloud platform to execute your tests in a consistent and controlled environment.

[Follow the link for How to execute end-to-end Cypress test cases in a Google Cloud ](https://qaautomationlabs.com/how-to-execute-end-to-end-cypress-test-cases-in-a-google-cloud-build-pipeline/)

This integration allows you to incorporate Cypress tests into your overall software delivery pipeline, helping you ensure the quality and stability of your applications.
Test your Ansible Playbook skills 🏆
Tags: ansible, automation, ansibleplaybooks, ansiblechallenge
Published: 2023-06-22 14:15:00

Want to show off and test your Ansible Playbook writing skills? We’re excited to introduce the [Steampunk Ansible Challenge](https://steampunk.si/ansible-challenge/?utm_source=devto&utm_medium=social), a monthly series of competitions where participants take on exciting challenges, solve complex automation problems, and demonstrate playbook expertise. 

So, what’s the plan? 

**Pre-sign up**

First things first, we need to weigh interest to convince our bosses and make the event happen in the fall. 😉 Let us know if you’re interested by [filling out the form](https://steampunk.si/ansible-challenge/?utm_source=devto&utm_medium=social). And rest assured, the registration only expresses your interest, it’s not a commitment to participate.  

**Challenges and Leadership Board**

If we gather enough interest, we'll seize the summer to get our gears turning and create a set of challenges for participants to solve. Your performance will be tracked on our Leadership Board where you can see how you rank against other participants. 

**Special prize for the winner**

At the end of the challenge, the participant with the highest score on the Leadership Board will be crowned the winner and receive a special prize. 👑 

Sounds fun? Pre-sign up now and let’s make it happen! 

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jfo903hcem28watazrv.png)](https://steampunk.si/ansible-challenge/?utm_source=devto&utm_medium=social)
Laravel Upload de Arquivos: Salvar arquivo no Storage
Tags: webdev, laravel, php, backend
Published: 2023-06-22 13:49:40

Existem algumas opções para salvar o arquivo no storage e o caminho da pasta no banco de dados. Nesse tutorial irei demostrar salvando apenas o nome do arquivo e criando um armazenamento separado a qual considero a forma mais prática e flexível.

---

Antes de iniciar você deve saber qual tabela deseja salvar o caminho da imagem e cria-la. No nosso caso iremos salva o avatar do usuário, assim adicionei a coluna avatar no Model User.

Configurações iniciais realizadas iremos criar um espaço novo no storage.

**config/filesystems.php:**
```
return [
 
    // ...
 
    'disks' => [
 
        // ...
 
        'avatars' => [
            'driver' => 'local',
            'root' => storage_path('app/public/avatars'),
            'url' => env('APP_URL').'/storage/avatars',
            'visibility' => 'public',
            'throw' => false,
        ],
 
    ],
 
    // ...
 
];
```

Assim, quando for salvar o arquivo faça da seguinte forma

**app/Http/Controllers/Auth/RegisteredUserController.php:**

```
class RegisteredUserController extends Controller
{
    // ...
 
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'name'     => ['required', 'string', 'max:255'],
            'email'    => ['required', 'string', 'email',
                          'max:255', 'unique:'.User::class],
            'password' => ['required', 'confirmed',
                           Rules\Password::defaults()],
            'avatar'   => ['nullable', 'image'],
        ]);
 
        if ($request->hasFile('avatar')) { 
            $avatar = $request->file('avatar')
                              ->store(options: 'avatars');
        } 
 
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
            'avatar' => $avatar ?? null, 
        ]);
 
        // ...
    }
}
```

No arquivo Blade use o método abaixo.

```
<img src="{{ Storage::disk('avatars')->url(Auth::user()->avatar) }}" 
     alt="{{ Auth::user()->name }}"
/>
```

E caso mude a hospedagem das imagens para um S3, por exemplo. Seria muito prático essa mudança, mudando apenas o disk que salva e mostra o arquivo.

```
<img src="{{ Storage::disk('s3')->temporaryUrl(Auth::user()->avatar, now()->addMinutes(5)) }}"
     alt="{{ Auth::user()->name }}"
/>
```

---

> _Fonte: https://laraveldaily.com/post/laravel-file-uploads-save-filename-database-folder-url?utm_content=buffer014d6&utm_medium=social&utm_source=linkedin.com&utm_campaign=buffer_