teleren/devto huggingface dataset:
The Beginning
Tags: beginners, programming, career, devjournal
Published: 2022-09-19 13:38:31

I am Ky-Jo, 34, a future developer. I started my computer science learning a long time ago in college, as it happens my life was derailed. I dropped out of college and left programming behind. I'm back. Programming, design, and creating was my passion. Now that I'm here again, I can't believe I ever left. Hopefully I keep the discipline to keep learning and eventually get a job in the field I always wanted. Game Development. I created a few games back in the day on BYOND, which I will blog about as I progress. I'm so happy to be joining a community of like-minded individuals, and excited to meet as many of you as I can.

I've just finished going through my first course on Scrimba, Learn JavaScript for Free, and will be starting The Front-End Development Career Path course today.
Gnarly Grid Challenge | CSS Grid
Tags: codepen
Published: 2022-09-19 13:37:11

---
title: Gnarly Grid Challenge | CSS Grid
published: true
tags: codepen
---

<p>The end result should be that the captioned photo grid flows seamlessly through different screen sizes, without uneven gaps between the columns or rows. </p>

{% codepen https://codepen.io/samudras_andra/pen/NWMbpVp %}
Openstack Manual install Part 3 - Horizon dashboard and Cinder
Published: 2022-09-19 13:23:06

---
title: Openstack Manual install Part 3 - Horizon dashboard and Cinder
published: true
description: In this video, we look into installing the Horizon dashboard and the Cinder volume storage. The volume storage will utilize Ceph as a backend, so we take a couple of extra steps for that to work.
tags:
cover_image: https://i.ytimg.com/vi/sOm6nha-6aQ/maxresdefault.jpg
---

{% youtube sOm6nha-6aQ %}

In this video, we look into installing the Horizon dashboard and the Cinder volume storage. The volume storage will utilize Ceph as a backend, so we take a couple of extra steps for that to work.
Interface de uso
Tags: beginners, programming, braziliandevs, codenewbie
Published: 2022-09-19 12:40:31

Todo iniciante que se preze já perdeu horas da vida tentando entender como algo funciona inter​​namente, para aí sim fazer uso da tecnologia. Com o objetivo de demonstrar como isso é bizarro vou fazer duas comparações:

- 🚙 Imagine que para conseguir dirigir você precisasse saber como um motor funciona? Ou
- 🍿 Para fazer um saco de pipocas teria que saber as leis físicas envolvidas no processo do microondas?

Será que isso é necessário?

Definitivamente não! Como diria o grande poeta Ariano Suassuna através do personagem Chicó: "Eu não sei, só sei que foi assim".

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

###Interface de uso
O passo inicial de todo iniciante é compreender o uso das interfaces. 

Entenda como interface de uso todos os controles que te permitem se comunicar com determinada ferramenta e com essa comunicação fazer a ferramenta agir em prol do seu objetivo. Precisa entender também que quanto mais complexo a tarefa, mais uso de interfaces são necessárias e além disso mais reconhecimento do feedback dado pelas ferramentas.

Vamos ver o uso das interfaces para as situações acima listadas:

* 🍿 Fazer um saco de pipocas no microondas
  + 🚪 Abro tampa física do microondas
  + 🍿 Coloco saco de pipocas
  - 🚪 Fecho tampa física
  - ⏲️ Digito tempo ou se a interface for bem elaborada pressiono o botão pipoca
  - ▶️ Pressione botão Ligar 

* 🚙 Mudar carro para vaga da frente
  + 🛑 Pressiona pedal do freio
  + ▶️ Pressionar botão start
  - ✋ Libera freio de mão
  - ✅ Muda marcha para o D
  - 🛑 Solta pedal do freio
  - 🏁 Aciona pedal de acelerar

O Objetivo desse texto caro amigo iniciante em tecnologia, é para te tranquilizar e diminuir sua ansiedade, é bom saber consertar um motor? Claro que é, mas não é algo que você será capaz no nível que você está, deixe para aprender mecânica quando você dominar a direção. Talvez você nunca precise abrir um motor então porque perder tempo?

Foque sua atenção inicial nas interfaces de uso, aquelas que são próprias da linha de carreira que você escolheu: Back-end, Front-end, QA, Devops e etc.

Você precisa saber da existência e como usar mas não precisa necessariamente saber do funcionamento interno.

"Eu não sei, só sei que foi assim" - SUASSUNA, chicó

Até Breve 👋
Penny for your thoughts? Literally.
Tags: kubernetes, microservices, devops, testing
Published: 2022-09-19 12:36:13

Hey developers!👋🏻

I'm looking to onboard folks with in-depth technical expertise for writing in your free time!✍🏻

While I understand that you may have prior engagements, <u>this is something which will not run interference with your primary work.</u> 

**Writing for us can be remote, per your schedule and whenever you like!**🚀

We generally cover topics related to <u>DevOps, Kubernetes, Scalability, CI/CD, Microservices,</u> etc

If this is something that sounds of interest to you, I would love to hear your thoughts on the same, [here](https://www.cohesive.so/write-for-cohesive)
Custom 'Tooltip' component using Tailwind and React Js
Tags: react, tailwindcss, javascript, beginners
Published: 2022-09-19 12:29:28

**Bonjour**
I hope you all guys are good in health. I always prefer creating custom components (like a tooltip) instead of libraries because libraries mostly bring extra code. Of course, for major functionality. You should use a library as its code is optimized and provide a variety of possibilities.

Let's come back to our original topic. The reason behind choosing Tailwind instead of bootstrap.

1. It is Highly Customizable.
2. It Has Common Utility Patterns.
3. It Can Be Optimized Using Purge CSS.
4. It Enables Building Complex Responsive Layouts Freely.
5. It Facilitates Fluid Community Interaction.

I would not explain these points in detail but I hope they're enough to give an idea.

```
import React, { ReactNode, useState } from "react";

export const Tooltip = ({ message, children }: { message: string; children: ReactNode }) => {
  const [show, setShow] = useState(false);
  return (
    <div className="relative flex flex-col items-center group">
      <span className="flex justify-center" onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
        {children}
      </span>
      <div className={`absolute whitespace-nowrap bottom-full flex flex-col items-center  group-hover:flex ${!show ? "hidden" : null}`}>
        <span className="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">
          {message}
        </span>
        <div className="w-3 h-3 -mt-2 rotate-45 bg-gray-600" />
      </div>
    </div>
  );
};
```

Now, you can simply import this and call it like below

```
<Tooltip message="Hello, world!">
   <InfoIcon />
</Tooltip>
```

You can style your tooltip box of any type. Also, it will allow you to style info text which you can not normally with an npm package. I hope it was helpful, 
Please like and share this post.
You can also connect with me on [LinkedIn](https://www.linkedin.com/in/muhammad-azfar-aslam) 😉
Learning React - Day 2
Tags: react, beginners, codenewbie
Published: 2022-09-19 12:15:24

## Hooks
This was the topic of a short day. I did not have time to study too much. I got distracted :D Started to write the backend side of the app I am planning to do (the renovation helper app). But I managed to squeeze 1-2 hours of React study, where I got insight to Hooks and mainly useState Hook.
Glue – Athena custom output fixed number Of Files
Tags: aws, glue
Published: 2022-09-19 12:04:41

## Situation:
When I only use partition clause, there are so many files in S3 bucket which is <1MB, this affect to the query speed and I want to make those become a bigger file. 
## Solution: 
#### Solution 1: Use Athena "bucketing" method to custom the number of output file. 
You can see this AWS blog for more information: 
[How can I set the number or size of files when I run a CTAS query in Athena?](https://aws.amazon.com/premiumsupport/knowledge-center/set-file-number-size-ctas-athena/?nc1=h_ls)

However, there is one drawback if you use bucketing: Bucketed table do not support INSERT INTO query. Here comes the solution 2. 

#### Solution 2: Use Glue repartition
The context is the same but now I want to use INSERT INTO query.

You can refer to this AWS blog for the procedure: 
[Build a Data Lake Foundation with AWS Glue and Amazon S3](https://aws.amazon.com/blogs/big-data/build-a-data-lake-foundation-with-aws-glue-and-amazon-s3/)

Note that in the step numbered "13. View the job", we add the following code into the job: 
```
datasource_df = dropnullfields3.repartition(<number of output file you want here>)
```
right after the line: 
```
dropnullfields3 = DropNullFields.apply(frame = resolvechoice2, transformation_ctx = "dropnullfields3")
```
and edit the code:
```
datasink4 = glueContext.write_dynamic_frame.from_options(frame = dropnullfields3, connection_type = "s3", connection_options = {"path": "<your_s3_path>"}, format = "parquet", transformation_ctx = "datasink4")
```
to: 
```
datasink4 = glueContext.write_dynamic_frame.from_options(frame = datasource_df, connection_type = "s3", connection_options = {"path": "<your_s3_path>"}, format = "parquet", transformation_ctx = "datasink4")
```
If you want to know more about Glue repartition: 
[](https://docs.aws.amazon.com/glue/latest/dg/aws-glue-programming-python-samples-legislators.html)

**Try querying with Athena**
Create table: 
```
CREATE EXTERNAL TABLE IF NOT EXISTS demo_query (
  dispatching_base_num string,
  pickup_date string,
  locationid bigint)
STORED AS PARQUET
LOCATION 's3://athena-examples/parquet/'
tblproperties ("parquet.compress"="SNAPPY");
```
Try to insert: 
```
insert into demo_query ("dispatching_base_num", "pickup_date", "locationid") values ('aa23dtgt', '2020-12-03', 1234);
```
The insert query now should work. Success!
Handling new tab in Cypress
Tags: javascript, webdev, programming, testing
Published: 2022-09-19 12:04:24

In this post, we will learn how to handle new tab in Cypress. By default, new tabs are not supported by Cypress, we will take a look at a workaround to solve this issue.

### Why Cypress doesn't support second tab?
Cypress tests runs within a browser and because of that it injects the tests into a first window / tab; anything else outside of the tab, Cypress does not have access to it. 

This was a design decision by the Cypress team and they will never support multiple tabs even in future. 

---

### How to handle new tab in Cypress?
Alright, so we understand that Cypress doesn't support new tabs but what if your application opens links in new tab then how do you handle such case? Well we will need to do some workaround to get this to work. 

First, it's important to understand how the website is opening the second tab? These are 2 of the common ways - 

- using `target="_blank"` attribute _(most common)_
- using JavaScript redirect

---

### Handling the `target` attribute
```
<a href="/contact" target="_blank" role="button" id="contact-us">
```
When a browser sees `target="_blank"` on a link, it automatically knows to open the link in a new tab. We can use this to our advantage and remove the `target` attribute from the link and then the browser will open the link in the same tab.

```
  it('Handling new tab', () => {
    cy
      .get('#contact-us')
      .invoke("removeAttr", "target")
      .click() // will open the contact page in a new tab
    cy.get("h1").should("have.text", "Contact");
  })
```

We are using the `invoke` method to remove the `target` attribute from the link element which triggers the browser to open the link within the same tab.

---

### Handling JavaScript redirect
For JavaScript redirects, you will need to understand how the redirect is being done and based on that implement a solution for it. This is a good [link](https://glebbahmutov.com/blog/cypress-second-tab/) to refer to by Gleb Bahmutov which provides various solutions to handle such scenarios.

---

**To learn more about how to handle new tab in Cypress, check out the video below –**

{% youtube SLhg0yKZFy8 %}

---

📧 Subscribe to my [mailing list] (https://automationbro.com/mailing-list) to get access to more content like this as well as be part of amazing free giveaways.

👍 You can follow my content here as well - 
- [Twitter](https://twitter.com/automationbro)
- [LinkedIn](https://www.linkedin.com/company/automation-bro)

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>
Using the semi-secret `within` matcher in RSpec
Tags: rspec, ruby, rails
Published: 2022-09-19 11:49:03

---
title: Using the semi-secret `within` matcher in RSpec
published: true
description: 
tags: RSpec, rspec, Ruby, Rails
---

Sometimes, it can be tricky to write asserts for values that are nondeterministic, but flicker by a negligible amount, especially when working with time.  
While I agree that the first line of defence should be to seek to freeze the time, sometimes it's not an option. Enter the "fuzzy" `within` matcher.

```rb
# bad
is_expected.to(
  be < execution_start.since(5.seconds)
  .and(be >= execution_start)
)

# good
is_expected.to be_within(5.seconds).of(execution_start)
```

[Docs on this matcher](https://relishapp.com/rspec/rspec-expectations/v/3-11/docs/built-in-matchers/be-within-matcher) are rather limited and fail to mention that it can also be used in collections and arguments by omitting the `be_` part.

```rb
is_expected.to(
  change { record.field }.to(within(5.seconds).of(some_time))
)

expect(SomeClass).to(
  have_received(:call)
  .with(stamp: within(5.seconds).of(some_time))
  .once
)
```
What is your Take on The State of Open Source Ecommerce 2022?
Tags: opensource, javascript, programming, webdev
Published: 2022-09-19 11:30:07

_We are very excited to announce our upcoming report on **The State of Open Source ecommerce 2022.**_

As one of the leading open source headless ecommerce platforms, we want to contribute to the community by conducting a report that monitors trends and key drives in the market.

Hence, we want to hear your input (even if you have limited experience with open source)!

In the coming months, our Medusa Insights team will gather inputs from developers and merchants about:

- Experience with current ecommerce setup
- Outlook on the future usage of open source software in ecommerce stacks

The purpose of the research is to create insights into the use and behavior of existing, as well as emerging, technologies on the market.

We would therefore like to hear from you if you have experience in the ecommerce field and want to share your perspectives - even if you are not working with any open source solutions today.

We expect to finalize the report in late 2022. Make sure to get early access by completing the survey. You can sign up now via this **[link](https://ky5eo2x1u81.typeform.com/to/q2r9Dq9f)**
Load Balancing with Golang
Published: 2022-09-19 11:29:43

Load balancing is the process of efficiently distributing incoming network traffic across a group of backend servers.
In an instance where there are constant requests from users mostly common with banking systems etc, having a traffic ‘cop’ in between the user requests goes a long way to efficiently maximize the requests to maximize on speed and capacity utilization to ensure no server is overworked. If one server goes down, the load balancer redirects traffic to the remaining online servers.


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

In the above instance, when a user makes a request, it goes through the load balancer to determine which server is available.
A reverse proxy is required in this as well for security. We are using the http util package to create the reverse proxy. The reverse proxy redirects the request while hiding the address of the server

```
type simpleServer struct {
	addr  string
	proxy *httputil.ReverseProxy
}

func newSimpleServer(addr string) *simpleServer {
	serverUrl, err := url.Parse(addr)
	handleErr(err)

	return &simpleServer{
		addr:  addr,
		proxy: httputil.NewSingleHostReverseProxy(serverUrl),
	}
}

```

The loadbalancer will be implemented as a struct with a port, server and roundrobincount to check between the alive servers.

```
type LoadBalancer struct {
	port            string
	roundRobinCount int
	servers         []Server
}

func NewLoadBalancer(port string, servers []Server) *LoadBalancer {
	return &LoadBalancer{
		port:            port,
		roundRobinCount: 0,
		servers:         servers,
	}
}

```
We also create a function to create a new loadbalancer and server based on the struct.

We have 2 methods
isAlive method checks if the server is up or not and 
Get address method to get address of the server

```
func (s *simpleServer) Address() string { return s.addr }

func (s *simpleServer) IsAlive() bool { return true }

```
An overview of this;

We have a main function which creates a server list and calls the server proxy function to get the next available server. Thus checks if the server is alive through roundrobin
Link: Test && Commit || Revert
Published: 2022-09-19 11:05:25

---
title: Link: Test && Commit || Revert
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Feeling masochistic? Want a tactical way to learn how to make frequent & smaller changes to your code base with confidence? Kent Beck of XP fame has a technique he's tried called [test && commit || revert](https://medium.com/@kentbeck_7670/test-commit-revert-870bbd756864). It's nuts and horrible. I have to try it. 

Here's how it works:

1. write some code and commit it
2. if the tests pass, your commit can live
3. if the tests fail, your commit is reverted; all the code you wrote is deleted forever and you have to try again.

https://medium.com/@kentbeck_7670/test-commit-revert-870bbd756864
Link: When To Refactor
Published: 2022-09-19 11:03:59

---
title: Link: When To Refactor
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Mark Seemann on "[When To Refactor](https://blog.ploeh.dk/2022/09/19/when-to-refactor/)"

"... moving in small steps is a skill that must be explicitly learned. This may seem obvious once posited, but it may also be helpful to explicitly state it."

Almost a decade for me to learn this the hard way. I've had that exact same experience Mark talks about where I had to ask for huge refactors with many failures/successes. Only much later did I realize I was doing it all wrong.

https://blog.ploeh.dk/2022/09/19/when-to-refactor/
Arquitetura Front-end
Published: 2022-09-19 09:46:00

Atualmente, com necessidades mais complexas e equipes numerosas, problemas e erros difíceis de resolver aparecem. É uma tendência natural que projetos se tornem obsoletos com o passar do tempo e, a dificuldade de mantê-los atualizados aumenta quando temos um número alto de dependências, fazendo com que a entropia do projeto cresça, afinal de contas é muito mais fácil adicionar uma biblioteca a um projeto, do que remover uma que está sendo usada em produção e em diversos lugares da aplicação.

É aqui que a arquitetura de software entra em cena, pois ela vê o software como ponto principal para que o produto consiga gerar o valor esperado, planejando um design de alto nível que será o alicerce, a estrutura sobre a qual o software será desenvolvido.

Fazendo uma analogia entre o desenvolvimento de software e a construção de um prédio, o arquiteto faz o desenho considerando suas necessidades estruturais e o uso que é previsto para ele, tanto em casos como intensidade. Então entrega aos engenheiros e técnicos que irão trabalhar na construção.

Isso é muito importante na engenharia de software, porque diferente de um prédio, o software segue sendo construído e modificado sempre, e não concluído em 1 ou alguns poucos anos. É muito comum que novos planos apareçam com mudanças no escopo, o mercado digital é muito mais rápido, não só pelas variações de oferta e demandas, mas também por evoluções de tecnologias usadas.

A arquitetura de software facilita o desenvolvimento de produtos mais robustos e sofisticados, criando diretrizes claras que permitem aos engenheiros saber a todo momento que tipo de código precisam construir para obter os resultados esperados.

Tendo uma visão ampla sobre a vida útil de um software, os arquitetos podem incluir já nos estágios iniciais estruturas chaves que se feitas quando o produto estiver em produção, demandam alto custo de implementação, darei um exemplo. É comum que startups de tecnologia se concentrem mais na funcionalidade e na entrega de resultados imediatos do que na arquitetura e no ciclo de vida de seus produtos.
Isso faz com que elas comecem a usar técnicas que não escalam bem e frameworks fáceis de usar ou que dependem muito de terceiros. Quando aparecem milhares ou milhões de usuários e os investidores exigem escalabilidade com estabilidade, as coisas se complicam.

Alterar a estrutura de uma aplicação que ninguém usa e uma mudança global que afeta milhões de usuários ao mesmo tempo são coisas completamente diferentes, assim como mudar de servidor algo em desenvolvimento ou em produção com uso intensivo, pois em casos de falhas, mudanças assim poderiam custar milhões em perdas. Certamente não é a mesma coisa alterar a linguagem de programação de um aplicativo quando apenas algumas pessoas trabalham nele, que realizar isso com centenas de colaboradores envolvidos.

É pra isso que existe a arquitetura de software, ela ajuda na tomada de decisões críticas a tempo de escolher quais riscos desejam ser assumidos e afetando para sempre o rumo do projeto.


> 📅 Publicação: 17/09/2022 por [Guilherme Siquinelli](https://twitter.com/guiseek)
Forgot Password Form using CSS
Tags: html, css, beginners, webdev
Published: 2022-09-19 10:57:42

Hello Guys! In this blog, I'm going to explain to you how to make a Forgot Password Form with the Glassmorhism effect using CSS. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Get FULL SOURCE Code and more Amazing Web Development projects on [Coding Torque](https://www.codingtorque.com/)
Vanity Post, the fun way to spread vanity
Tags: showdev, webdev, react, nextjs
Published: 2022-09-19 10:56:48

So over the past fortnight we built [Vanity Post](https://vanitypo.st), a fun little website that lets you create stylish images and videos of your upcoming or past posts. 

You can either draft a new post on the homepage or convert a tweet to a post using the [https://vanitypo.st/tweet/[tweetId]](https://vanitypo.st/tweet/1568538724480450560) route.

The site was built with React and Next.js and is hosted on Vercel. We use browserless.io for OpenGraph images that are stored on S3.

We had a lot of fun with this one, originally mocking LinkedIn guru's who make similar styled posts before realising that the video aspect makes for engaging and more human content.

We're currently live on [Product Hunt](https://www.producthunt.com/posts/vanity-post) as well so if you enjoyed the tool, please spread some support over there too!


![Vanity Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwggau9igclz4aq4wkwy.png)