teleren/devto huggingface dataset:
Making Nav Bars
Tags: webdev, html, css, beginners
Published: 2022-09-29 22:03:37

Today i learned how to make a upward and horizontal nav bar using css. I decided to learn this since it'll be helpful for the newspaper website i'm making soon and for common web developing. In this i'm going to explain how to create one, but **if there's any improvements that you want me to make an issue on my [Github page](https://github.com/Lensco825/Nav-bar!). To go see my website for yourself go to my [replt](https://Nav-bar.lensco825.repl.co)!**


## HTML

For the HTML i started inside the body element where i created a nav element. Inside the nav is an unordered list that has 5 list items. 


```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <nav onclick="colorize()" ondblclick="reedem()">
    <ul>
      <li onclick="change()" id="first">Code</li>
      <li>Games</li>
      <li >Watch</li>
      <li >100</li>
      <li >Lensco</li>
    </ul>
  </nav>
  <br>
  <div id="output">
    
  </div>
  <script src="script.js"></script>

</body>
```





#CSS 

The basic of making the nav bar is my adding `inline-block` to both the `li` and the `nav` element. To make it upward i added `display: flex;` **(If you ever want to put a nav bar horizontal just do every step but without the flex in the list element! To space the horizontal li elements apart you use `padding`)**to the `li` element. Now that i fully made the upward nav bar i stylized it some more by adding a border and a hover animation that makes the bar go up with a shadow. When you hover over the list elements they change to a hex color.


```css
html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #D3EFBD;
}

ul {
  border: solid 2px black;
  transition: 0.8s ease;
}

/* THis is just to create some extra detail*/
ul:hover {
  margin-bottom: 50px;
  box-shadow: 12px 8px black;
}

/*This is what mainly makes the nav bar */
nav,
li {
  display: inline-block;
  transition: 0.8 ease;
}

/* With flex we can make the bar go upward, if not it would be horizontal*/
li {
  cursor: pointer;
  display: flex;

```



##Javascript 

Another thing i used to sylized the bar is when you click on the nav box the background changes red, but when you double clikc it the color is purple. I used functions to  cause this, with the help of the `onclick` and `ondbclick` attribute.

```javascript
function colorize() {
  document.body.style.background = "#D9B8C4";
}

function reedem() {
  document.body.style.background = "#FF1654";
}

```



## This code was made on replit 


This code is just a way to help me use inline block, but i posted it here so others can know it too!
Having fun with old work domains
Tags: showdev, watercooler
Published: 2022-09-29 22:01:33

Today I executed on a silly idea involving a domain I'm retiring at work, `highground.com`.  Highground was the brand I joined back in 2014, and in 2018 we were acquired by a Private Equity firm and merged with a competitor, creating the company that is now known as [WorkTango](https://www.worktango.com).  For those of us who are Star Wars fans, there is an infamous clip from Episode III: Revenge of the Sith 

![giphy](https://media.giphy.com/media/UbzFZacBqWjPG/giphy.gif)

Since _I have the Highground_, it was only natural to share it with everyone (except Anakin, of course), enjoy! 

[https://ihavethe.highground.com](https://ihavethe.highground.com)
iS Cloud (AWS) computing actually cheap !? part 2
Tags: ammarhanon, awsiraq, iutp, awscommunitybuild
Published: 2022-09-29 21:41:53

This is part1
https://dev.to/nawras_lateef/costs-and-benefits-part-1-2cfi

## AWS: Billing and Pricing

## Capex vs. Opex
Basic Pricing Policies are as follows:

1. Pay as you go
2. Pay less when you reserve
3. Pay even less per unit when using more
4. Pay less when AWS grows
5. Custom Pricing


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


Understand the fundamentals of pricing
Three  main drivers of cost with AWS:

1. Compute (EC2, Lambda)
2. Storage (S3, Glacier, Storage Gateway)
3. Data Outbound

## Free Services:

- Amazon VPC.
- Elastic Beanstalk.
- CloudFormation.
- Identity Access Manager.
- AutoScaling.
- OpsWorks.
- Consolidated Billing.
Although all the services mentioned are free, the resources that they use may not be free. For example, elastic beanstalk is free but if you decided to attach an EC2 instance to it, you’d pay for those services. So keep in mind that these services are free but the resources they use may not be free.

- Start early with cost optimization
 It will be easier to put cost visibility and control mechanisms in place before the environment grows large and complex.
- Maximize the power of flexibility
 Choose and pay for exactly what you need and no more.
- Use the right pricing model for the job.
you are offered a variety of options

- On Demand — Allows you to pay a fixed rate by the hour.
Dedicated Instance — Physical server dedicated for your use and reduce costs by allowing you to use existing server bound software licenses.

- Spot Instances — Bid a price you want for instance capacity providing for even greater savings if you apps have flexible start and end times.
- Reservations — provides capacity reservation, and offers a significant discount on the hourly charge for an instance. Contract terms can last 1–3 years.

## AWS Budget vs Cost Explorer:
AWS Budget gives you the ability to set custom budgets that alert you when your cost or usage exceed your budget amount. This is used to budget costs before they have been incurred.
AWS Cost Explorer has an easy to use interface that lets you mange, visualize, and understand your AWS costs and usage over time. This is used to explore cost after they have been incurred.

## Resources:

- https://johnsonkow.medium.com/aws-billing-and-pricing-6635537b25f6
- https://cupofcode.blog/intro-to-aws-billing-and-pricing/
Adding features to my SSG with multiple branches
Published: 2022-09-29 21:35:04

Hi everyone,

This week, I continued to work on my [SSG](https://github.com/NeilAn99/nan1-ssg) and I added two new features. 

The first feature was adding a new --lang option which will allow users to indicate the language to use when generating the lang attribute in the HTML file. To implement this feature, I first added a new option -l or --lang that the user can use to specify the language. I then took that language that the user passed in and put it into the HTML template so that the lang attribute would be written correctly. By default, the lang attribute will use en-CA (Canadian English). [The issue.](https://github.com/NeilAn99/nan1-ssg/issues/11) [The commit.](https://github.com/NeilAn99/nan1-ssg/commit/f277bc4df8886e43078876ec7900b49f9461c726)

The second feature was adding Markdown support for horizontal rules. This means that the Markdown `---` will get converted to \<hr> tags in the HTML file. I first found lines in the Markdown file that was the horizontal rule, then I converted those lines into \<hr> tags in the HTML file. [The issue.](https://github.com/NeilAn99/nan1-ssg/issues/12) [The commit.](https://github.com/NeilAn99/nan1-ssg/commit/88cd13409827c19be7b76ec851a5a19b3cb1a28c)

The main difference I did when adding these features was working on different branches for each issue. I worked on each issue separately and did not share any code between the two branches. After finishing the code, I merged both branches one by one. Thankfully, there were no issues that I ran into and everything went smoothly. I learned how to work on different branches and how to merge different branches into the main branch.
The Easy Way to Verify Domain Ownership with Google
Tags: domain, nextjs, react, blog
Published: 2022-09-29 21:20:52

Oh domains! The web of developer sadness they can indeed weave. Luckily, whether your building your website with just HTML or in React with Nextjs, there is an easy solution for you.

If you have already found the [Google's Publisher Center](https://publishercenter.google.com/) , then you are half of the way there. Next, comes the challenging part, Domain Verification. 

So what is the easy solution already? HTML Tags. Yes, just put the verification tags in your `<Head>` section on the main page of your site. 

This can be a bit tricky with something like Nextjs as their is no index.html. Instead, its just the index.js `<Head>` section that u must import like so:

`import Head from "next/head";` 

Hope this helps!

For more info check [Google's docs](https://support.google.com/webmasters/answer/9008080#domain_name_verification&zippy=%2Cdomain-name-provider%2Chtml-file-upload)
Merge k Sorted Lists
Published: 2022-09-29 21:13:23

Day 9 of the #I4G10DaysOfCodeChallenge was to merge k sorted lists.

You are given an array of k linked-lists lists, each linked-list is sorted in ascending order.

Merge all the linked-lists into one sorted linked-list and return it.

```
Example :

Input: lists = [[1,4,5],[1,3,4],[2,6]]
Output: [1,1,2,3,4,4,5,6]
Explanation: The linked-lists are:
[
  1->4->5,
  1->3->4,
  2->6
]
merging them into one sorted list:
1->1->2->3->4->4->5->6
```

**Approach:**
The Divide and Conquer strategy is covered in this challenge. This method operates in O and doesn't require additional heap space (nk Log k)
The merging of two linked lists can be accomplished in O(n) time and O(n) space, as is well known.

1. The plan is to merge each pair in linear time utilising O(n) space after pairing up K lists.

2. K/2 lists, each of size 2*N, are left after the initial cycle. K/4 lists, each of size 4*N, are left after the second cycle.

3. Continue the process until there is just one list left.

Thank You❤️
Submoduler: A tool to automatically keep git submodules updated through Python & Docker
Tags: submodules, git, docker, python
Published: 2022-09-29 21:00:43

## Intro 
Most of the comments I read online about git submodules go from:
"avoid them"
"never use submodules"
"use one big repo"

And after working with them for a year now I can understand why.

I would myself suggest to stay away from submodules, as they are not exactly immediate to understand and not a nice thing to maintain either.

That said, submodules **can** be useful at times.

For example:

- You could have multiple repositories to which you want to provide the same developer scripts. One way of achieving this could be to have them live in a separate repository and add this as a submodule.
- You have a very tight relationship between two repos, but at the same time you do not want (or can't) use a monorepo.

## Submodules in a Nutshell

If you do not know what submodules are, they are simply links to a specific commit in another repository.

That's where the trick is.

Read again:
**They are not links to another repository**, they are links to a **specific commit** in another repository.

Let's imagine the current scenario:

- We have repository_a and repository_b
- We create a submodule of repository_b inside repository_a
- All works good, we can see repository_a in Git and it gets pulled together with repository_b.

At some point, we might make a change inside repository_b.
We then fetch/pull inside repository_a, and surprise: the change is not there.

That's because, again, submodules point to a specific commit.

The process to update a submodule is quite straight forward:
```
cd repository_a
git submodule update --remote --recursive
```

Great! The submodule is now updated and we see the latest changes we pushed to **repository_b**.

What about doing this every day, every time there's a change in repository_b? 
What if repository_b is a submodule in 10/20/30 repositories?

Too much work.

## Submoduler

That's where Submoduler comes in.

Submoduler is a simple Python app that can run in a Docker Container, and loops a list of repositories provided by the user to update all of their submodules in an automatic fashion.

You can find it here:
https://github.com/ginwakeup/submoduler

You can using by quickly pulling the Docker Image and running it with a simple configuration.yaml in which you can list the repositories to be updated as https urls together with options, and then run it passing a user and pat through the -env flag.

Hopefully this will be of some help to someone!
Mesmerizing CSS art: Silence
Tags: css, html, watercooler, webdev
Published: 2022-09-29 20:23:04

This is just a short post about a piece of CSS art I made that mesmerized me and I hope it does the same for you :)

{% codepen https://codepen.io/TheAngularGuy/pen/BaxYVbJ %}


Fun fact: There are 5000 snow flakes in this pen ❄️


---

If you like content like this, make sure to follow me [@theAngularGuy](https://twitter.com/TheAngularGuy) on Twitter.

Cheers everyone!


&nbsp;
&nbsp;

### What to read next?

{% embed https://dev.to/mustapha/5-webdev-tips-you-may-want-to-know-an1 %}
Database Seed - MarketPlace - #1
Tags: laravel, php
Published: 2022-09-29 20:20:30

Um pouco diferente do que estamos habituados, neste artigo vou mostrar como criar dados de forma relacional como acontece no mundo real.

---

> Introdução

A ideia é montar uma espécie de marketplace, com clientes, lojas e produtos, onde um cliente conectado à plataforma tem a possibilidade de comprar qualquer produto em qualquer uma das lojas disponíveis. 

Como este projeto é voltado totalmente para o back-end não desenvolvi nenhuma página web para visualização e interação com usuário. Tomei esta decisão para evitar que o projeto ficasse grande sem contar que acabaria fugindo do objetivo do artigo.

Por essa razão, busquei criar um cenário que fosse o mais fiel possível ao ambiente real, com vários usuários comprando vários produtos de diversos vendedores.

Esse pensamento deu origem ao diagrama mostrado a seguir, onde é possível ver como as entidades se relacionam entre si. 

:grin:

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

O projeto em si é pequeno mas devido à complexidade na preparação do ambiente optei por dividí-lo em 5 partes sendo esta a primeira, onde faço uma introdução.

---

Na segunda parte vamos nos concentrar nas migrações, explicando alguns conceitos básicos e detalhando o relacionamento entre as tabelas.

---

Já a terceira parte será destinada a criação dos modelos objeto-relacional. 

Esta parte é a mais importante porque a forma como implementaremos as classes terá impacto direto nas consultas que serão criadas.

---

Em seguida, na parte 4 deste artigo veremos como implementar e fazer uso das classes **factory**.

Ainda nesta parte mostro como criar dados aleatórios relacionando as informações de forma consistente.

---

E por fim, criaremos algumas rotas com o intuito de consultar as informações geradas no banco de dados.

---

Nos vemos em breve.
:blush:
DAY 9 CODE CHALLENGE
Tags: javascript, leetcode, challenge
Published: 2022-09-29 20:14:34

## **MERGE k SORTED LISTS**

An array of k linked-lists "lists", was given, of which each linked-list was sorted in ascending order. We were asked to merge all the linked-lists into one sorted linked-list and return it as shown in the given example below:


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

**PROCEDURE**

- I merged two lists at a time and pushed to the array until lists.length === 1 and returned into the array.
For instance, if:
x = 1 -> 4 -> 5
y = 1 -> 3 -> 4
mergedXY = 1 -> 1 -> 3 -> 4 -> 4 ->5

(push mergedXY to the array)

we now have lists = [2 -> 6
                     1 -> 1 -> 3 -> 4 -> 4 ->5]

(the merging was repeated again)

x = 2 -> 6
y = 1 -> 1 -> 3 -> 4 -> 4 ->5
mergedXY = 1 -> 1 -> 2-> 3 -> 4 -> 4 ->5 -> 6

(And this was pushed to the array)

lists = [1 -> 1 -> 2-> 3 -> 4 -> 4 ->5 -> 6]

- The above was returned.

**CODE**
`var mergeKLists = function(lists) {
    if(lists.length ===0){
        return null;
    }
while(lists.length>1){
    let x = lists.shift();
    let y = lists.shift();
    let mergedXY = mergeList(x,y);
    lists.push(mergedXY);
}
    return lists[0]
};`

**OUTCOME**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zta5c284ojqn2jd4evao.PNG)
React Js error : Module not found: Error: Can't resolve 'fs'
Published: 2022-09-29 19:12:35

When I executed "npm install" in already created project it shown the error like below 
Failed to parse source map: 'webpack://ReactPixel/fb-pixel.js' URL is not supported

ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in 'C:\octilus\react-boiler-plate-13\node_modules\dotenv\lib'

How can I solve this issue?
Redirect traffic to another IP
Tags: linux, iptables, camera
Published: 2022-09-29 19:02:21

Imagine that you have an server Linux at your home eth0(192.168.0.10), like a raspberry pi, and this machine has a another ethernet card as vpn like wg0(172.14.11.10).

When you online at vpn the other host can research you Linux server(172.14.11..), but can't access any device on network 192.168.0.. and you would like to share a security camera for example.

What you can do is make a iptables rules on your server to forward the requisition on a por 6666 to internal ip 192.168.0.11:554 (camera ip)

```
forward 6666 requests packets to camera
iptables -t nat -A PREROUTING -p tcp -i wg0 --dport 6666 -j DNAT --to-destination 192.168.0.11:554
iptables -t nat -A PREROUTING -p tcp -i eth0 --dport 666 -j DNAT --to-destination 192.168.0.11:554
iptables -A FORWARD -p udp -d 192.168.0.11 --dport 554 -m state --state NEW,ESTABLISHED,RELATED -j ACCEPT
iptables -t nat -A POSTROUTING -p tcp -d 192.168.0.11 --dport 554 -j SNAT --to-source 192.168.0.10
```

From vpn computer will be able to access 172.14.11.10:6666 where in really is accessing the 192.168.0.11:554.
Create parallax effect of a 2D game background (Unity3D)
Published: 2022-09-29 18:50:33

We often see the _parallax effect_ in the background of 2D games.  We can easily make this with Unity3D. To do this, we need to create a material. Change the shader type to **Unlit/Texture**.  


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

Then select the background texture. Create a Quad. Resize it. Drag the material into material portion in _mesh renderer_.


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

Create a script name "Parallax" and attach to the _quad_. Open the script and paste the code.

`
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Parallax : MonoBehaviour
{
    MeshRenderer meshRenderer;
    [SerializeField]float animationSpeed = .5f;

    private void Awake()
    {
        meshRenderer = GetComponent<MeshRenderer>();
    }
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        meshRenderer.material.mainTextureOffset += new Vector2(animationSpeed * Time.deltaTime, 0);
    }
}
`

Here the _mesh renderer_ attribute access the background material. We just change the offset value over frame so that it can rotate on _X axis_. 

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


That's it. Your parallax background is ready for the game. 


Happy coding ☺️!
how to validate email with special characters |, :, &?
Tags: webdev, java, regex
Published: 2022-09-29 18:41:07

I have a regex `^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$`. Now i want to allow all special characters(|,&,:) in it with out changing whole regex

thanks in advance
If you want to be good developer do tests
Tags: javascript, programming, beginners
Published: 2022-09-29 18:21:16

# Why are important?
I wondered at the beginning why I should adopt the culture of creating tests, and I could understand the following arguments:
* Not having 100% testability in all your software development, **it will be necessary to pray that there are no bugs** and, eventually, having a gigantic inefficiency;
* **Tests can portray a harmonious and classical opera rehearsal**, after all, an opera performance contains important components and needs rehearsals to achieve “perfection” and not have an inconvenient event like errors or side effects;
* Ensure that our results are as **expected**. A good developer get centralize the idea and to know each a bit of code. If you don't want bad and expensive code, make it tests.

> Robert C. Martin said: "Why do most developers fear to make continuous changes to their code? They are afraid they’ll break it! Why are they afraid they’ll break it? Because they don’t have tests."

# The lovely: TDD
The Test Driven Development is a philosophy on the result of test construction. In their essence, TDD is a technique for building software that guides software development by writing tests.

Your could follow three simple steps repeatedly:
1. Write a test for the next bit of functionality you want to add.
2. Write the functional code until the test passes.
3. Refactor both new and old code to make it well structured.

## Constructive Criticism of Using TDD
In general, **TDD is something that cannot always be rigorously applied on a day-to-day.** After all, this implies its productivity and delivery within a certain period, as this cycle is very slow in an environment where there are dense updates.

I will say that I'm not saying that its use is impossible, however, deadlines may not get along with these cycles.

# Final considerations
There you have it, the whole culture of creating tests and embedding TDD is pretty cool and it works. Just see what works best when it comes to applying TDD and you have a product that is fully testable and free of intrusive events.

Good bye! See you next time!

[Content about TDD by Martin Fowler](https://martinfowler.com/bliki/TestDrivenDevelopment.html)