teleren/devto huggingface dataset:
Tengo problemas con esto...
Tags: javascript, css, webdev, html
Published: 2022-11-08 01:18:54

_El problema es en la posicion de la imagen, ya que quiero que cuando es en medida desktop este en el centro, y el titulo este en la parte de detras y no se vaya a la parte baja; si alguien me podria echar la mano con esto o me diga en que estoy fallando. gracias
en la parte inferior se muesra la imagen de muestra_


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y26r1fgka5ibdb7khhcq.PNG) esto es una muestra de como es en medida de ipad


**el codigo en html es este**
`<main class="hero-section">
        <div>
            <h1 class="fs-200 fs-poppins">Solo ropa <span class="big-wireless block lineheight fs-300 blod-900 fs-poppins">para</span><span class="text-white uppercase lineheight2 bold-bolder fs-poppins fs-900">mujeresss</span></h1>
            <img src="image/image1.png" alt="">
        </div>
        <div class="hero-inner flex">
            <div>
                <button class="large-btn bg-red text-white fs-poppins fs-50">Comprar por categoria</button>
            </div>
            <div class="hero-info">
                <h4 class="fs-montserrat">Descripcion</h4>
                <p class="fs-montserrat">Lorem ipsum dolor sit amet, consec 
                    elementum tempor in at urna. Suspendisse auctor libero 
                    sagittis dolor iaculis.</p>
            </div>
        </div>
    </main>`

**y el codigo en css es este**
`* ==========Hero section Css============ */

.hero-section{
   width: 93vw;
   margin-inline: auto;
   padding-inline: 2rem;
   background-color: hsl(var(--clr-gray));
   border-radius: 2rem;
   padding-top: 5rem;
}

.hero-section >* img{
   margin-top: -11rem;
   margin-left: 2rem;
}

.hero-inner{
   justify-content: space-between;
   align-items: center;
   --flex-gap: 5rem;
   margin-top: -3.5rem;
   padding-bottom: 4rem;
}

.hero-info{
   display: none;
}

/* =============Media Ipad============== */

@media (min-width: 35em) and (max-width: 59em){
   .hero-section{
      width: 95vw;
      margin-inline: auto;
      padding-inline: 4rem;
      padding-top: 7rem;
   }

   .hero-section>* img{
      margin-top: -10rem;
      margin-left: 5rem;
   }

   .lineheight2{
      --line2: 7rem;
   }
}

/* ==========Media Desktop=========== */
@media (min-width: 59rem){
   .hero-section{
      width: 95vw;
      margin-inline: auto;
      padding-inline: 8rem;
      padding-top: clamp(4rem, 30vh, 15rem);
   }

   .hero-section>* img{
      margin-top: -30rem;
      position: absolute;
   }

   .lineheight{
      --line:13rem;
   }

   .lineheight2{
      --line2: 12rem;  
   }

   .hero-info{
      display: block;
      text-align: end;
      width: 25%;
   }

   .big-wireless{
      font-size: 5rem;
   }

   .hero-inner{
      margin-top: -14rem;
      padding-bottom: 8rem;
   }
}`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp2azy6daanmwhac3lnh.PNG)
functions in Python
Published: 2022-11-08 01:01:45



`def funk(n):
    for i in range(0, n):
        print (i)
    print ("finish")
    
i = 40
funk(i)`


and furthermore: 

`
def funk(n, step):
    for i in range(0, n, step):
        print (i)
    print ("finish")
    
i = 40
funk(i, 2)
funk(2, 1) 
`
which gives back: 

`0
2
4
6
8
10
12
14
16
18
finish
0
1
finish
`
Message to those in the United States: Please go vote!
Tags: usa, opinion
Published: 2022-11-07 22:39:52

## Public Service Announcement

I really don't want to get bogged down in a political thread here. But I do want to simply urge US citizens who are eligible to vote, to make sure you're registered and please go vote in the November 8 midterm election.

There are so many messages floating around and the political ads are enough to emotionally and mentally beat you up pretty good. But to my fellow citizens, I say: "The United States is still a representative democracy as of this post. Please exercise your **civic duty** and vote!" 

Try have at least a basic understanding of issues that matter to you. Please do, at least, a cursory look into voting histories of your candidates to see if their actions match their rhetoric.

You may not think your vote matters, **but it does**.

## Plea to Moderators

I hope I have not offended anyone on this site. But this is important. I will understand the removal of this post if it violates site guidelines.
X-editable with Select2
Tags: codepen, xeditable, select2, javascript
Published: 2022-11-07 22:50:49

---
title: X-editable with Select2
published: true
description: Using X-editable library with select2
tags: codepen, xeditable, select2, javascript
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5vhvuij6izj4f6b4ayo.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-01 06:48 +0000
---

{% codepen https://codepen.io/rimbaborne/pen/NWzbjzZ %}
[recorded webinar] Improving DevOps team performance using DORA metrics with GitHub
Tags: webinar, devops, github
Published: 2022-11-07 22:48:13

Hey devs!

Last week we opened an webinar about **Improving DevOps team performance using DORA metrics with GitHub** and if you didn't have a chance to attend you can still watch the recording here:

https://go.cto.ai/dora-metrics-webinar-recording-nov-3

Join our slack to post your questions and chat with us!
https://join.slack.com/t/ops-community/shared_invite/zt-1jc16m4qq-iZyuiKMTjhxmqmPAsE_X2Q

Happy Monday!
Netlify, Vite, deploy and “Page Not Found” error
Published: 2022-11-07 22:48:07

I know that a lot of people struggling with the problem when their web app works perfectly on localhost, but on Netlify server after refreshing page they got error “Page Not Found”. Why and how it should be fixed?

!["Page not found" netlify error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toefn5qlee5irjx2afe6.png)

The key of this problem is not how Netlify works. Actually Netlify or something else is not matters, because it can be another server. The problem is the fact, that your server doesn’t know how to respond on your requests properly. Despite the fact that I’ll will refer to Netlify, you should keep in mind that it could be something else.

How Netlify [server] saves your files? — There is a `dist` directory with similar files:

```
dist
  index.html
  hash.js
  icon.svg
  favicon.ico
```

We have a Netlify server and we don’t have access to it, we cannot directly code that if a request comes to a specific address, server must give this specific file. We simply don’t have such an opportunity. But all that our Netlify server has is `dist` directory with bunch of files. So if there is a request to `https://netlify.app/icon.svg`, our Netlify server should respond with a file icon.svg from dist as well. But what if we want to get `https://netlify.app/example/1`? We do have this route in our SPA and everything works well on `localhost`, but we we’ll get “Not Found Page” error. Why? Just because there is no that file in our `dist` directory. Only thing that we have is `index.html` so we have to set up `redirects`, because we want to give responsibility of taking care of routes to SPA. So our server has to respond with `index.html` if there is no file in `dist` with matched name.

There is a bunch of ways to do it and of course as I want you to remember, there is nothing specific to Netlify till next approach. But if you’re using Vite I also recommend you read this [Public Folder Documentation](https://vitejs.dev/guide/assets.html#the-public-directory).

Well, if we’re considering Netlify, all I need is create `netlify.toml` in project directory:

```
// netlify.toml
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```

And that’s it! Error is gone.

Honestly I don’t really like this idea when I can not control the server and creating files such as `netlify.toml` is the only way to hook “our” (not really our) server makes me awkward. But I guess this is another indicator that we need to move to something more low-level than Netlify, although it is really good for pet-projects.

And thanks for reading :)
É bom conhecer o mundo
Tags: management, community, motivation, devjournal
Published: 2022-11-07 22:41:20

## E a cultura das pessoas que trabalham com você

Eu geralmente gosto do desconforto de desconhecer algo. E aí eu passo a saber sobre essa coisa e eu fico totalmente enlouquecida para saber mais. E desde que eu comecei a trabalhar em empresas que têm todos os tipos de pessoas, eu tento absorver o máximo da cultura e das diferenças ao meu redor.

Esses dias eu estava completamente obcecada com o *Diwali*. O Diwali para quem não sabe é um festival na Índia que é conhecido por ser o festival das luzes e da felicidade. Todas as cidades se iluminam para comemorar a vitória da luz sobre à escuridão. E eu só fui capaz de saber tudo isso através dos meus coworkers, que estavam saindo viajar e se reunir com suas famílias para aproveitar o feriado e celebrar. Muitas pessoas dividiram também sobre as suas infâncias assistindo o anime [Ramayana: The Legend of Prince Rama](https://www.imdb.com/title/tt0259534/) durante o feriado. 

Ah e durante o Diwali desse ano também aconteceu o grande jogo da Copa de Mundo de Cricket Paquistão x Índia, grandes rivais, pra alegrar ainda mais o feriado. O Cricket na Índia é como o Futebol aqui no Brasil, e Paquistão x Índia é como um grande jogo entre Brasil e Argentina!

E é bom conhecer o nosso mundo como ele é: **diverso**. Mas às vezes também incomoda muito porque no mundo existem diferenças que não são tão lindas , mas te faz conhecer pessoas incríveis. Mulheres incríveis como a que eu conheci hoje: **Meital Avital**.

Meital é uma manager na Red Hat e ela é de Israel. Mas além de uma manager incrível, que se preocupa até em escolher as palavras corretas para conversar com cada uma das pessoas diferentes que ela gerencia, ela também é uma mulher. Uma mulher israelita que lida com coisas que acontecem no próprio país dela com todas as mulheres.

E então ela me contou: há 6 anos, o marido dela fugiu do país, abandonando ela e as crianças. "Ela vai se divorciar né", a gente pensa. Mas então ela me conta que por mais que ela queira muito se divorciar, ela como mulher não tem o direito de pedir o divórcio. É isso mesmo, ela está presa num relacionamento em que nenhum dos dois quer estar. 

Mas ela não se contentou por aí: ela começou a militar pelo direito das mulheres em Israel. Ela se tornou uma voz para as mulheres, num país em que o serviço militar é obrigatório para as mulheres, mas que não dá à elas o direito de se divorciar. E a voz dela tá fazendo efeito: ela já foi capaz de mudar até uma lei em Israel, que permite que mulheres divorciadas possam ter mais filhos após o casamento.

E o que isso tem a ver com tecnologia? Nossos times são formados por pessoas e se o teu time for global como o meu, a cultura de cada uma dessas pessoas influencia em como elas são, o que elas fazem e o que elas acreditam. E um time só existe se relações existirem. Mas relações reais, por isso que eu absorvo tudo. Absorvo do Cricket até a injustiça de uma mulher incrível não poder se divorciar.

Aprendo muito sobre o mundo, mas principalmente sobre as pessoas, porque tecnologia sempre será sobre as pessoas.
How Do Lone Devs Raise Their Game?
Tags: programming, career, codereview, conventions
Published: 2022-11-07 22:26:10

I recently change jobs from an enterprise to a small-ish startup.

I love working in a small dev group and I feel like I have a lot to offer to help this company ride the development maturity curve with my enterprise experience. 

I am the sole front-end dev in my team. I miss having other UI devs for code reviews and share experience and relevant opinions. These really raised my game while in that job. There are UI folks in other teams but are pretty far off my time zone and language. Not to mention they aren't up to speed on what I am doing and why any more than I am about them.

Looking for ideas and opinions regarding cloud-based peer reviews. Not necessarily reviewing actual lines of code ( can't do that), but more along the lines of "What you call 'shell' is what I call 'main', I always prefer a ternary and here's why... etc etc.
[Solution] Elastic Integration issue of Apollo server Graph QL program deployed as AWS lambda
Tags: aws, graphql, elasticsearch
Published: 2022-11-07 22:02:15

Hi,

Anybody facing Elastic Integration issue with Apollo server GraphQL program deployed as AWS lambda?
with error message 
`Unable to instrument Lambda handler \"graphql.graphqlHandler\" due to name conflict with \"graphql\", please choose a different Lambda handler name`
here is the solution for it ->
https://github.com/trentm/example-apollo-lambda/tree/v1.0.0#notes--troubleshooting
Save your annual SaaS product loss of $277k
Tags: saas, algorithms, startup
Published: 2022-11-07 22:01:27

**CHURN…. the one word that puts fear into most SaaS founders.**

So, if you’re facing high churn, what can you do about it?

First, let’s do some calculations (fun!) to put this into perspective…

**If you 1000 customers paying $100 per month, and your churn rate was 10%, that equates to a loss of $55,400 ARR.**

And what if that was a per-seat price and your users purchased 5 license's on average making your ARPU $500?

That accounts for an annual potential loss of $277k!!

That’s a pretty scary figure. Mostly business losing such kind of huge amount yearly.

**Just by reducing that 10% to 5%, you could recover $142k in annual revenues!**

One way to tackle this problem is by using the customer retention tool.
Now, you could spend huge resources and megabucks using developers to build the algorithm…

Or you could simply employ a tool from another company that has already done all the hard work for you.

One great tool for this is Churnfree, which was built specifically for SaaS and eCommerce businesses.

**Churnfree will help you to retain your customer and try to avoid the cancellation of the membership.**

**This tool can save up to 46% of churned requests you can calculate by yourself.**

There are many other churn analytics and reduction tools on the market, all with their strengths and weaknesses. Still, the most important thing to remember is… to learn from any insights provided by your churn analytics and action them if you want to grow your business!
Have you used a customer retention tool like Churnfree for your SaaS?

if not, you can sign up today at **[Churnfree](https://churnfree.com/)** for free and see how much money that can save!
The Fundamentals of Software Engineering
Tags: webdev, productivity, career, beginners
Published: 2022-11-07 21:55:11

Recently I was reading The Art of Doing Science and Engineering by Richard W. Hamming, and he made the case that software engineering fundamentals go beyond data structures and algorithms. 

**Clear thinking** is the true fundamental of programming.

This makes sense, if you think about it. The whole point of a fundamental truth or skill is that it is the basic building block of the discipline built on top of it. While data structures and algorithms are foundational to everything we do in software today, can't you imagine a scenario in some very distant future where we use _different_ data structures? A future where today's algorithms are barely even mentioned in the textbooks? (Do we still use textbooks in this distant future?)

And how do we evolve into a future where we use completely different data structures and algorithms, if not by leveraging clear thinking and good problem solving skills to not only come up with solutions to tomorrow's problems, but also solve yesterday's problems more efficiently.

This really stuck with me, because I'd always believed that DS&A are what's foundational to all software, to all job interviews, to all programming books. Perhaps that's mostly true today, but a good software developer still has to go beyond that. After all, what's the point in memorizing the Depth First Search if you don't understand when to apply it? As you can see, even today, what's actually required is clarity of thought.

So keep this in mind the next time you sit down to read through that giant green Cracking the Coding Interview book (do we all have one of these at home?). And check out Richard Hamming's The Art of Doing Science and Engineering!

Until next time.
Connect your AWX/Ansible Tower with Keycloak using OIDC !
Tags: ansible, tutorial, keycloak, awx
Published: 2022-11-07 21:37:53

## Introduction

Want to connect your AWX/Ansible Tower with your SSO solution (thanks to openid connect), in my case keycloak, you're in the right place.
I have seen a lot of tutorials on how to configure with SAML, but not one with OIDC so here it is :)
## Prerequisites

    - A keycloak
    - An ansible tower / awx

If you respect all these prerequisites, you are good to go !

## Tutorial 
Go to your beautiful keycloak instance 
Add a client in keycloak with this redirect url 
https://AWX_HOST/sso/complete/oidc/
Something like this :


![Keycloak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quegriin4s2uihhidt84.jpg)



Get your keys in your credentials part (if not set, set it to Client ID and secret)


In your awx/tower instance, go to settings, generic oidc and fill all the infos :
OIDC key : Keycloak's client id 
OIDC secret : Keycloak's client secret 
OIDC provider : https://KEYCLOAK_HOST/realms/YOUR_REALM



## Conclusion

Only that, yes.

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


Your awx/ansible tower is now connected with keycloak.

See you on the next article !
How to use JS Gamepad API and Build a Gamepad Tester
Tags: javascript, webdev, html, beginners
Published: 2022-11-07 21:31:41

In this exciting tutorial we are going to learn how to use the JavaScript Gamepad API. With this API we are going to build our very own gamepad tester. A gamepad tester allows you to diagnose and figure out if anything is wrong with your controller. The video tutorial uses Javascript HTML and CSS to build a Gamepad tester.

Try out the final product here: 
https://codingwith-adam.github.io/gamepad-tester/

GitHub:
https://github.com/CodingWith-Adam/gamepad-tester

**Project Description**

This project has two parts: a grid that displays all the controller buttons and an awesome picture of a controller. As buttons are pressed you can see them turn red on the controller. When the analog sticks are moved the position is displayed on the controller image in real time. Above the controller we have a diagnostic grid that displays the values of all buttons and axes in real time.

As you may know most controllers have pressure sensitive triggers. In the controller image we tweak the contrast to show much how much pressure is being placed on the trigger. In the diagnostics grid we not only display the value but a vertical meter to show how much of the trigger is being pressed.

With the JS Gamepad API we can even make the controller rumble. In our gampad tester we create a toggle checkbox to cause the controller to rumble with each button press.

Even though we have a PS4 Controller in the picture this image will work for Xbox and even the Nintendo Switch Pro controller.

**What is the JavaScript Gamepad API?**

The JS Gamepad API allows developers to use a gamepad as an input device. The most common usage would be for game development. The Gamepad API has 2 events. One event for when a controller is connected and another for when it is disconnected. There is no event for when a button is pressed on the controller. However the developer can ask the Gamepad for the state of the buttons at any time. Included in this state is the list of buttons and a list of axes that represent the analog sticks if there are any. Checking for the controller state can be done in a loop or on a timer. For game development this will happen in the game loop. At the start of each game loop you can retrieve the state of the buttons and then use that information to manipulate your game.

The Gamepad API also includes experimental features like rumbling the controller and retrieving the position of the controller in virtual reality when using WebVR.    

All of these features can be combined together to build a gamepad tester. Check out the tutorial to learn more:

{% embed https://youtu.be/tQyrpcOK6U0 %}
Hacktoberfest_2022
Tags: hacktoberfest, github, digitalocean, holopin
Published: 2022-11-07 20:46:32

Open-source participation is celebrated for an entire month at Hacktoberfest. It is accessible to all members of our global community. The primary goal of this event is to encourage open-source contributions globally.

I took part in this and finished the Hacktoberfest 2022 challenge by making 103 commits in 46 repositories. So, participating in this event was incredibly interesting.

It was a pleasure to participate in this event, which offered me a tonne of experience with how open-source concepts operate.

**<u>GitHub</u>**: _**https://lnkd.in/dycCJZWz**_
**<u>Badges</u>**: _**https://lnkd.in/dDPzwNXc**_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gen1x93gd5ony0kjp4ix.png)
Functions for beginners
Tags: javascript, webdev, beginners, funnctions
Published: 2022-11-07 20:22:06


JS functions are a block of code that can be reused anywhere in your code, one of the building blocks of JS the example will be a function declaration.

Example:
// Declaring a function
function twoNumbers(num1 , num2) {
 return  num1 * num2
}

// Calling the function
twoNumbers(10, 2);

//This code would output 20;

So you see from the example you put in the parameters whatever two numbers you like to  put (num1, num2).Then when you are ready to call the function in the argument twoNumbers(10, 2) or whatever two numbers you like output it to the console in your browser.

console.log(twoNumbers(10, 2));

This will output in the console I use chrome so I click ctrl + shift + i

You can do the same in ES6 Arrow Functions which will be much more less code and no return statement needed if is one line.

// Arrow function
const twoNumbers = (num1 , num2) =>  num1 * num2;
console.log(twoNumbers(10, 2)); //20
How To Learn A New Company?
Tags: business, entrepreneurship, startup
Published: 2023-01-06 18:49:32

---
title: How To Learn A New Company?
published: true
date: 2022-11-07 20:00:30 UTC
tags: Business,entrepreneurship,startup
canonical_url: https://greenido.wordpress.com/2022/11/07/how-to-learn-a-new-company/
---

When you are coming to a new company/team, you want to learn about it.  
Usually, you wish to do it quickly because there is (always) pressure to start a be ‘productive.’  
There are many cases when the opposite is better for the long term.  
You want to take your time and learn more about the WHY without giving your biases a place to run. However, reality forces us to push and try to make things faster/better.

Here is a plan that worked for me in the past.

Talk with everyone on the team/project/cross-function team and ask for 30 minutes with them.  
In many cases, we are talking about 40-50 people, so it will take you a couple of weeks to accomplish it. But it’s worth it.  
In that meeting, you aren’t talking.

## You are asking about

- Their role in the company/team
- What do they like the most about their job?
- What they don’t like
- The biggest problem they are solving right now
- One thing they wish they could change
- One thing they are proud of
- And anything else they want to share

## The simple plan

- Twenty-five minutes: ask them to tell you everything they think you should know.  
Take notes.  
Always stop them from asking about things you don’t understand.  
If they covered ‘everything’ in ~10 minutes, you could ask them about ‘things they would want to know if they were in your shoes.

- Next 3 minutes: ask about the most significant challenges the team has right now.

- Final 2 minutes: ask who else you should talk to. Focus on 3-5 names.

At the end of this process, you should have a much better understanding of how your company works, what they are facing, and what they need help with.

Good luck, and be strong.