teleren/devto huggingface dataset:
Day 160: Fighting with Swiper JS
Published: 2023-02-05 21:47:09

Hi!
Today was all about fighting with Swiper JS. Swiper JS is a package used to create sliders for mobile and the web and today I was using it to implement a design but I had a hard time getting it to work and customizing it the way I wanted

Initially getting it working was quite straight forward but after it was working I tried to customize it to match the design I was working with but the styles were not working no matter what I tried to do. After long research, I found something that worked which still feels like a hack even though it is the recommended way from their docs. I was so irritated with this to the extent I started to work on an extended blog this that I will share soon

It was a good experience though I learned a lot about Swiper itself and also about fighting with CSS therefore I declare today as a success. Hopefully, the following week will be too

Signing off...
Texto Fluido e Responsivo com Tailwind e Clamp()
Tags: tailwindcss, css, react, nextjs
Published: 2023-02-05 21:32:30

_Essa era uma dúvida que eu tinha..._ 

> _Como aumentar ou reduzir o font-size de acordo com o tamanho da tela mas de forma fluída_

Calma lá jovem! Você deve ter pensado em [@media queries](https://tailwindcss.com/docs/responsive-design), mas não é bem isso.

É uma técnica muito usada e adequada quando falamos em responsividade, e por isso gosto tanto do Tailwind, pois é extremamente simples.

Mas o que digo é sobre esse exemplo abaixo... repare no tamanho do meu nome "**André Peixoto**" como ele aumenta ou reduz de forma fluida. Isso não acontece com media queries.


![Exemplo de texto fluído usando Clamp no Tailwind](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpnvel66ed9i7g418ty0.gif)

Com o Tailwind é simples de ter esse efeito, vou mostrar como fazer isso com clamp().

```css
theme: {
    extend: {
      fontSize: {
        corpo: "clamp(15px, 4vw, 25px)",
        titulo0: "clamp(14px, 3vw, 30px)",
        titulo1: "clamp(17px, 4vw, 25px)",
        titulo2: "clamp(22px, 6vw, 32px)",
        titulo3: "clamp(36px, 8vw, 78px)",
        titulo4: "clamp(40px, 8vw, 78px)",
      },
```
No arquivo **_tailwind.config.js_** você acrescenta o parâmetro clamp().

O primeiro valor é o tamanho mínimo, o segundo o valor de referência, nesse caso usei o vw (viewpoint), mas pode ser % e outras aplicações, e o terceiro o máximo valor possível.
 

> _[Nesse artigo](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#try_it) pode achar mais detalhes sobre o clamp._

Agora, no arquivo global.css eu criei uma chamada dentro do Layer Components, como no exemplo abaixo.

```css
@layer components {
  .titulo-3 {
    @apply text-titulo3 ...;
  }
 ```
 
E por fim é só usar agora essa classe no seu texto.

```javascript
<div>
   <a href="#" className="titulo-3 ...">
      André Peixoto 
   </a>
</div>
```
mastering git: the only essential commands you need to know to be a productive developer [pt 1] 🔥
Tags: git, programming, beginners, productivity
Published: 2023-02-05 21:28:25

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

### intro

git is something all programmers have used or will use one way or another. with its vast number of commands and options, it can be overwhelming for someone that is just starting out. learn these few essential commands and you'll be 80% there with your journey with git.

#### 1 - `git init`

this command is used initialize a new git repository. it creates a .git folder wehre all of the version control information is stored.

``` bash
git init # to initialize a repository
```

#### 2 - `git clone`

this command is used to clone an existing repository from a remote server to your local machine.

``` bash
git clone https://github.com/user/repo.git # to clone a repository

git clone https://github.com/user/repo.git another-repo-name # to clone a repository and give it a different local name
```

#### 3 - `git add`

this command is used to add changes to the staging area. 

``` bash
git add . # to add all changes in the current directory

git add file.txt # to add changes in a specific file
```

#### 4 - `git commit`

this command is used to save changes to the repository. the changes can be a single file or multiple files. when you run git commit, you'll be prompted to write a commit message to describe the changes you've made.

``` bash
git commit -m "commit message" # to commit changes with a message directly from the command line

git commit -a # to commit all changes in the repository
```

#### 5 - `git push`

this command is used to push changes from your local to a remote repository.

``` bash
git push origin main # to push changes to the remote repository named "origin" and the branch named "main"

git push -u origin main # to set the upstream branch for "origin/main" to "main"
```

#### 6 - `git pull`

this command is used to retrieve changes from a remote repository and merge them into your local repository. 

``` bash
git pull origin main # to get changes from the remote repository named "origin" and the branch named "main"

git pull --rebase # to reapply your local changes on top of the changes in the remote repository
```

#### 7 - `git checkout`

this command is used to switch between different branches in the repository. branches allow you to work on different version of the project.

``` bash
git checkout -b new-branch # to create a new branch named "new-branch" and switch to it

git checkout branch-name # to switch to an existing branch named "branch-name"
```

### conclusion

these are the seven essential git commands that you need to get started. mastering these command, and you'll be on your way to become a git expert.
Ternary operator in Power Automate
Tags: powerautomate, microsoft, programming
Published: 2023-02-05 21:23:55

## How to use ternary operator in power automate?

Well, before to I show you, let's go over some concepts...

1.
The ternary operator structure

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

2. 
The expression must be a boolean value (true or false), never put an object, array, or string, as it will return an error:

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

**Applying ternary operator**
"What do I make, if my expression is an object, array, or string?"
In this case, we can use the operators: Greater, Less, or Equals.
For example:


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

if(variables('Age') > 19,'Yes', 'No') ❌
if(greater(variables('Age'),19),'Yes', 'No') ✅

If the age is greater than 19, show yes in compose

The result:

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

That's all for today!  🤟🏻
Firebase Authentication
Tags: firebase
Published: 2023-02-05 20:57:25

> In your module (app-level) Gradle file (<app-module>/build.gradle), add the dependency for the Firebase Authentication Android library. 

```
dependencies {
    // Import the BoM for the Firebase platform
    implementation platform('com.google.firebase:firebase-bom:31.2.0')

    implementation 'com.google.firebase:firebase-auth-ktx'
}
```

> Authentication Services

- Sign-in providers : Firebase Auth by adding your first sign-in method

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

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

- Templates

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

## Sign in with Google 

- In your module (app-level) Gradle file. add the dependency for the Firebase Authentication Android library.

```
dependencies {
//Google Play services library and specify its version
    implementation 'com.google.android.gms:play-services-auth:20.4.1'
}
```

- XML Desing 
```XML
    <com.google.android.gms.common.SignInButton
        android:id="@+id/signInBtn"
        android:layout_width="match_parent"
        android:layout_margin="16dp"
        android:layout_gravity="center"
        android:layout_height="wrap_content"/>
```

```kotlin
        // [START config_signin]Configure Google Sign In
      val gso = GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestIdToken(getString(R.string.web_client_id))
            .requestEmail()
            .build()
```

You must pass your "server" client ID to the [ Credentials page](https://console.cloud.google.com/apis/credentials). To find the OAuth 2.0 client ID: The Web application type client ID is your backend server's OAuth 2.0 client ID

```
    private lateinit var googleSignInClient: GoogleSignInClient
    private const val RC_SIGN_IN = 9001
    googleSignInClient = GoogleSignIn.getClient(this, gso)

   // [START signin]
    private fun signIn() {
        val signInIntent = googleSignInClient.signInIntent
        startActivityForResult(signInIntent, RC_SIGN_IN)
    }
```

- [GoogleSignInActivity](https://github.com/firebase/snippets-android/blob/9f9e1e06308316b5abe4b00664fbd8aad27c4a3c/auth/app/src/main/java/com/google/firebase/quickstart/auth/kotlin/GoogleSignInActivity.kt#L50-L55)


onViewCreated
onStart
updateUI
then click
signIn
onActivityResult
firebaseAuthWithGoogle
updateUI

onViewCreated
onStart
updateUI







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

## [Email and Password](https://youtube.com/playlist?list=PLvwAoqlxB7bli9fbTrb-Y3WNGeb6DPVeD)

## [Sign in with Facebook](https://youtube.com/playlist?list=PLSrm9z4zp4mEwkIcaZzq__H8WuR2W_t5v)

## Phone Number
Cookies and Sessions: Understanding the Differences for Web Development
Tags: cookies, sessions, development, differences
Published: 2023-02-05 20:57:05

As a web developer, you are likely to have come across the terms "cookies" and "sessions" while working on different projects. Both cookies and sessions are used to store information about users, but they function in different ways and are used for different purposes. In this post, we will look at the differences between cookies and sessions and how they can be used to enhance the user experience on your website.


[![Cookies and Sessions: Understanding the Differences for Web Development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6rdz3v88m1a3gbjq83o.png)](https://eyesoftechnology.blogspot.com/2023/02/cookies-and-sessions-understanding.html)


## Cookies

Cookies are small text files that are stored on the user's computer by the browser. They can be used to store information such as login credentials, preferences, and shopping cart contents. Cookies are usually saved for a specific duration and are sent back to the server with each subsequent request made by the user.


**Advantages of Cookies:**

_**Persistence:**_ Cookies are stored on the user's computer and can be retrieved even after the user closes their browser or restarts their computer.

_**Cross-Site Functionality:**_ Cookies can be read by any website that the user visits, which allows for cross-site functionality. For example, if the user logs into a site using their Facebook account, the cookie can be used to pre-populate the login form on other sites that the user visits.


**Disadvantages of Cookies:**
Limited Size: Cookies are limited in size and can only store a small amount of information.

**_Security:_** Cookies can be easily hacked and their contents read by malicious individuals. This can lead to sensitive information, such as login credentials, being stolen.



## Sessions
Sessions, on the other hand, are stored on the server and are used to store information about a user's session on a website. Unlike cookies, sessions are not stored on the user's computer and are deleted when the user closes their browser or the session expires.

**Advantages of Sessions:**
_**Security:**_ Since sessions are stored on the server, they are less vulnerable to hacking than cookies.

_**Large Size:**_ Sessions can store a large amount of information as they are stored on the server and not limited by the size restrictions of cookies.

**Disadvantages of Sessions:**
_**Persistence:**_ Sessions are not persistent and are deleted when the user closes their browser or the session expires.

_**Scalability:**_ Storing a large number of sessions on the server can impact its performance and scalability.

In conclusion, cookies and sessions both have their own advantages and disadvantages, and the choice between the two depends on the specific needs of the website and the information being stored. By understanding the differences between cookies and sessions, you can make an informed decision about which method to use for storing user information on your website.
How to Connect Your Node.js Server to Facebook Page API
Published: 2023-02-05 20:52:19

Are you looking to automate your social media presence by posting to your Facebook page from your Node.js server? With the Facebook Page API, you can do just that! In this blog post, we will show you how to connect your Node.js server with the Facebook Page API and post a post.

**Step 1: Register Your App with Facebook**

To get started, you need to register your app with Facebook. Go to the Facebook Developer Dashboard and create a new app. You will be given an App ID and App Secret. These two pieces of information are essential to connecting your Node.js server with the Facebook Page API.

**Step 2: Obtain a Page Access Token**

Next, you need to obtain a Page Access Token for your Facebook page. To do this, use the Facebook Graph API Explorer and provide your App ID and App Secret. You will also need to grant the necessary permissions to the app.

**Step 3: Install the Facebook SDK for Node.js**

In your Node.js project, install the Facebook SDK for Node.js using the following command:

```
npm install facebook-node-sdk
```

**Step 4: Write the Code to Post a Post**

Now, it's time to write the code to post a post to your Facebook page. Use the following code as a starting point:

```
const Facebook = require('facebook-node-sdk');

const facebook = new Facebook({ appId: 'YOUR_APP_ID', secret: 'YOUR_APP_SECRET' });

facebook.api(`/PAGE_ID/feed`, 'post', { message: 'Hello, world!' }, function(res) {
  if(!res || res.error) {
    console.log(!res ? 'error occurred' : res.error);
    return;
  }
  console.log('Post Id: ' + res.id);
});

```
Replace _YOUR_APP_ID_ and _YOUR_APP_SECRET_ with your Facebook app's App ID and App Secret, respectively, and _PAGE_ID_ with the ID of your Facebook page.

**Step 5: Run the Code**

Finally, run your Node.js code and check if a post is made to your Facebook page.

In conclusion, connecting your Node.js server with the Facebook Page API is a straightforward process. By following the steps outlined in this blog post, you can automate your social media presence and save time by posting to your Facebook page from your server.
Custom Gravatar!
Tags: webdev, beginners, tutorial, productivity
Published: 2023-02-05 20:27:48


![Gravatar Placeholder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49rcce4b58gtfye7knj3.jpg)

Step up your online profile with a custom Gravatar! 💻🔥 Our latest article breaks down [how to create one](https://dev.to/expoverse/creating-a-gravatar-2i0b), making it easier than ever to have a polished and professional look.

## Other Web Development Resources

![The web development website AppCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5nyj4yg2mezslyktt6qm.png)

AppCode contains a wide range of articles and tutorials on everything from [CSS animations to responsive design](https://appcode.app), you'll find everything you need to take your skills to the next level.
Start Up Ideas
Tags: startup, brainstorm, beginners, programming
Published: 2023-02-01 02:07:18

today as i commuted to my place of work/education, i read an essay by Paul Graham. While many of us think of multiple ideas everyday, as do i due to frustration, or thinking we might be doing something to change the world, even though it might already exist. This essay did something for me that had not been done in a while. it put my mind into a different perspective and made me think differently. i started flowing with ideas that seemed more plausible than many of the ones i had came up with which were always tagged by the idea of #money. even though i thought of new ideas, it did help to cull and update many of my more detailed startup ideas and how to think like an user and how to put myself in the shoes of an user and make it possible to make the idea...possible. 

freeing the mind from filters that clutter the mind when brainstorming helped more in retrospect rather than thinking about profit/monetary gain. i started to think as a problem solver again, i started to think a lot more as if a switch had been turned on or dusted off from when i was a child and the imagination was as free and wild.
Seeing JavaScript Math.random Not Be So Random
Tags: javascript, estimation, montecarlosimulations
Published: 2023-02-05 20:09:24


---
title: Seeing JavaScript Math.random Not Be So Random 
published: true
description: 
tags: JavaScript,Estimation,MonteCarloSimulations
canonical_url: https://jessewarden.com/2023/02/seeing-javascript-math-random-not-be-so-random.html
cover_image: 
---

Read [Flow Metrics](https://prokanban.org/%20scrum%20flow%20metrics/). Learned about Monte Carlo Simulations. Learned you can use that to make accurate estimations with lots of data points. It’s one thing to hear “Math.random in JavaScript isn’t random”, and another to see it after only 1,000 samples. SOO COOL!

![](https://jessewarden.com/wp-content/uploads/2023/02/Screen-Shot-2023-02-05-at-2.33.21-PM.png)Context: “If you run Math.random enough between 1 & 6, you’re most likely to get 3.5”.

Code: <https://ellie-app.com/kVjPdGBbP2ka1>

Uses [Elm Charts](https://elm-charts.org/) (horribly, sorry, I didn’t spend time styling it)

Article which helped get me some code: <https://questsincode.com/posts/monte-carlo-simulation-javascript>
Tip: Debug your Roslyn Source Generator with JetBrains Rider IDE
Tags: dotnet, csharp, roslyn, jetbrainsride
Published: 2023-02-05 20:05:06

.NET Compiler Platform becomes bigger thing, and in the same time, toolset is growing around it. So, it becomes easier to be used.

While writing code that parses/analyzes your code is not a simple task, it might be helpful in various ways. One way I just learned (thanks to my colleagues) is a **refactoring**.

Usually, code of your source analyzer and/or generator will not be the easiest one to read and maintain. But the idea is it doesn't always need to! The idea is that you have to use source generator as a temporary solution that makes refactoring an easier task for you and your team. And after some refactoring is done, you can simply throw away that code as a legacy one.

I think there is a lot of examples on youtube and in the internet, so I don't need to share another "sample". Instead, I will share most recent practical

## Tip of the day

> To debug C# Source Generator based on Roslyn .NET Compiler Platform in Rider IDE you need to install Rider 2023 EAP (yes, early preview) and then follow instructions from https://github.com/JoanComasFdz/dotnet-how-to-debug-source-generator-vs2022

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

If you haven't use Rider IDE for some reason, you should try it. It much more efficient than Visual Studio, especially at big monolithic projects (you know what I mean, if you work at enterprise). Though, debugging source generators was not possible till recently. From know it all yours!
Debouncing & Throttling
Tags: javascript, programming, webdev
Published: 2023-02-05 19:53:50

**What is debouncing?**

It is limit the execution of a function call & waits for a certain amount of time, before running it again.

So, debouncing allows us to - **discard** all the same **functionCall's()**, but **except** just **1 functionCall()** from them, **after** a certain amount of time.

So, debouncing guarantees us - that a function will be **run** after "x" amount of time, **just once**...

-----------------------------------------------------------------

**What is throttling?**

It is a limit the execution of function call when this function call triggers continuously due to user actions.

So, throttling allows us to - **pass** all the same **functionCall's()**, but **pass** just **1 functionCall()** - one by one from them, **under** a certain amount of time.

So, throttle guarantees us - that a function will be **run** after "x" amount of time, **one by one**...

-----------------------------------------------------------------

For both example - that time can be 500 or 800 milliseconds, as per your requirement.
Quality Assurance roles and responsibilities
Tags: qa, qualitysoftware
Published: 2023-02-05 19:51:46

This page defines roles and responsibilities to ensure we deliver high-quality systems.

## QA engineer

-   Wear the User Hat - bring to the team all the issues or pour experiences from the user’s perspective.
    
-   Review the User-facing documentation
    
-   Manually test all the Acceptance criteria
    
-   Ensure the steps to test are described in the ticket
    
-   Add evidence of the tests to the ticket
    
-   Signoff User stories ticket releases
    
-   Review component tests
    
-   Add automated tests covering the user journey (E2E tests)
    
-   Ensure the E2E tests are always passing
    
-   Help to refine stories from the testing perspective
    

## Developers

-   Write unit tests
    
-   Write Component tests
    
-   Code review E2E tests
    
-   Add instructions to QA engineers validate user story implementation 
    
-   Provide concise documentation when it can not be represented in the code
    
-   Responsible for testing tech tasks
    
-   Close Tech tasks
    
-   Test all the releases in the development environment
    
-   Ensure all E2E tests are passing
    
-   Release to staging before handover the ticket to QA engineers
    
-   Get signoff ASAP from QA engineers to release to prod
    
-   Release to prod
    
-   Ensure the code merged to the main branch is released to prod as soon as possible
    

## Team Lead

-   Code Review
    
-   Document and ensure best practices
    
-   Help to breakdown User stories into small deliverables
    
-   Review sprint deliverables

## Product owner
- Validate user stories implementation 
- Approve Devs to close User stories