teleren/devto huggingface dataset:
Eventlistener(scroll) using tailwindcss and vanilla Javacript
Published: 2022-11-16 14:12:55

Scroll event happen when user  scroll in a saturn direction  and it works on the browser window lets take an example of the page where navbar change background ,text and image when scroll event happen

#index.html
```
<html>
<head>
<title>capgemini</title>
</head>
<body>
//navbar
<div class="w-full h-[800px]  relative  pb-10 bg-heroImage  bg-cover">
        <div id="navbar" class="navwhite text-white   fixed p-8 top-0 w-full  flex  gap-8 justify-between lg:justify-start z-50 items-center "> 
                <img id="image1"  class="w-28" src="./img/logo-white.svg" alt="logowhite">
                <img  id="image2" class="w-28" src="./img/logoblue.svg" alt="logoblue">
                
                <div class="flex   gap-3">
                    <a href="">Insights</a>
                    <a href="">Industries</a>
                    <a href="">Services</a>
                    <a href="">Carees</a>
                    <a href="">News</a>
                    <a href="">About us</a>
                </div>
        </div>
        <div class="absolute bottom-2 lg:bottom-32 py-6  px-8  space-y-2  bg-opacity-90 text-white   lg:left-20 mx-4 bg-[#056295]  lg:mx-0">
            <h1 class="text-3xl font-bold ">AUTHORS OF CHANGE</h1>
            <p class=" text-lg ">Making the world more inclusive with words</p>
        </div>
    </div>
<script src="/navbar.js"></script>
</body>
</html>
```
#index.css

```
@tailwind base;
@tailwind components;
@tailwind utilities;

.navwhite{
  @apply bg-white text-black; 
}
```

#navbar.js
```
function changeNav(){
  var navbar= document.getElementById('navbar');
  var image1=document.getElementById('image1');
  var image2 = document.getElementById("image2");
  var scrollyValue=window.scrollY;
  if(scrollyValue < 20){
    navbar.classList.remove('navwhite')
    image2.style.display="none";
    image1.style.display="block"
  }
  else{
    navbar.classList.add('navwhite')
    image1.style.display= "none";
    image2.style.display="block"
  }
}
  window.addEventListener("scroll", changeNav);

```

#Before:The fixed navbar 

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

#After:when scrolling  navbar changes background color, textcolor, and logo image  until user stop scrolling
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vsyxcyewbdhzv9192vhb.png)
Encrypt auto created log groups from AWS Lambda with AWS CDK
Tags: aws, lambda, cdk
Published: 2022-11-16 14:10:02

First of all: Log group data is always encrypted in [Amazon CloudWatch](https://aws.amazon.com/cloudwatch/) Logs. By default, CloudWatch Logs uses server-side encryption for the log data at rest.

However, sometimes it is necessary - for example, because of compliance guidelines - to encrypt the logs with a customer managed key. No problem, you can use [AWS Key Management Service (AWS KMS)](https://aws.amazon.com/kms/) for this encryption.

But how does this work with automatically created log groups by AWS services, like [AWS Lambda](https://aws.amazon.com/lambda/)? In this blog post, I want to show you what steps are necessary to do this.

Enough introduction, let's get to the code.

---

My code examples are written in TypeScript. I use the [AWS Cloud Development Kit (CDK)](https://aws.amazon.com/cdk/), which allows you to define your cloud infrastructure as code in any of the supported programming languages.

---

## AWS KMS

I use the [AWS KMS Construct](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_kms.Key.html) to define a new KMS key:

```ts
const kmsKey = new aws_kms.Key(this, 'KmsKey');
```

Now I grant the CloudWatch Logs service encryption and decryption rights for my region using this KMS key:

```ts
kmsKey.grantEncryptDecrypt(
  new aws_iam.ServicePrincipal(`logs.${this.region}.amazonaws.com`)
);
```

This was the necessary configuration for AWS KMS. The key can now be used.

## AWS Lambda

AWS Lambda automatically creates a log group if it does not already exist. Unfortunately, the log group cannot really be configured using the [AWS Lambda Construct](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_lambda_nodejs.NodejsFunction.html). With one small exception: The `logRetention` can be specified.

For completeness, I create a Lambda function where the log group is to be encrypted with a KMS key:

```ts
const lambdaFn = new aws_lambda_nodejs.NodejsFunction(this, 'LambdaFn', {
  entry: '/path/to/my/file.ts'
});
```

Now I create a new log group using the [AWS LogGroup Construct](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_logs.LogGroup.html):

```ts
new aws_logs.LogGroup(this, 'LambdaLogGroup', {
  encryptionKey: kmsKey,
  logGroupName: `/aws/lambda/${lambdaFn.functionName}`
});
```

⚠️ With the `encryptionKey` property I define which KMS key should be used to encrypt the log group. The important step is the `logGroupName` property. By default, the log group of the Lambda function is created with the prefix `/aws/lambda/`, followed by the function name. Naming the log group according to this naming scheme ensures that the Lambda function uses it.

Of course, you can also define the retention (`retention`) or removal policy (`removalPolicy`) for the log group.

Ready! The log group of the Lambda function is now encrypted with the KMS key.

---

If you have any kind of feedback, suggestions or ideas - feel free to comment this post!
Dummy Proof : Variables
Published: 2022-11-16 14:03:44

>*For a quick skim => read underlined material along with code examples*

If you're learning JavaScript for the first time then let's start off with JavaScript fundamentals. Understanding the basics of JavaScript can start by learning what **variables** are. And if you're like me then you might need someone to really break it down and spell it out for you. 

What are variables? 
- <u>Variables stores the data value that can be changed later on</u>
- Imaginary box that you store your information/value in to use later

Ways to declare a JavaScript variable w/ reserved words: 

- var
- let
- const

<u>How to declare a variable</u> :

When we want to declare a variable we need to use a reserve word, a unique name that identifies it , and whatever value it is equal to. 
   

>  Rules for naming your variable :
>     - start with lowercase
>     - no spaces
>     - camelCase if using multiple words


```
var uniqueName = value

let uniqueName = value

const uniqueName = value
```


## var
Unless your coding from the year 1995 to 2015 then var is not really needed in JavaScript. Var can create scope issues that caused it to be difficult to diagnose bugs in your code. Many resources have advised against using var as there is no good reason to use it in your code.

<u>> **Lesson** : No use for _var_ when declaring variable
</u>
## const
This option should be our go-to when declaring variables. Const cannot be redeclared or reassigned.

Let's declare a variable with const :

```
const myAge = 25
```
Let's try to reassigned the value :

```
const myAge = 25

myAge = 2 
//=> Uncaught TypeError: Assignment to constant variable.
```

<u>> **Lesson :** We can assume that the variable will remain the same every time we reference it.</u>
                                

## let 
We can't redeclare let but we can reassign it's value. 

Let's declare a variable with let :

```
let myAge = 25
```
Let's try to reassign the value:

```
let myAge = 25

myAge = 2

myAge; 
=> 2 
```

<u>> Lesson : Use let whenever you know the the value of the variable will change.</u>




---
**Resources**

- https://www.w3schools.com/js/js_variables.asp

- https://learning.flatironschool.com/courses/5241/pages/javascript-variables?module_item_id=484416
I built a platform for collecting feedbacks
Tags: webdev, news, showdev, startup
Published: 2022-11-16 13:49:13

Hi everyone, my name is Gionatha and today i would like to present and show you a new app that i built called [**Featbacks**](https://featbacks.com)👂

**Featbacks** is an open platform that permits to **collect, share and talk** about different aspects of a product that you own, **directly with your audience**.

{% youtube 2ZNDmcSLDnw %}

---


So if you have any kind of product like an online application, a website, a school project, YouTube channel or whatever it might be, with Featbacks **you can create a shared space called project**, where you and your audience are able to talk about **_ideas, features, questions, give announcements reporting problems_** or just share thoughts about your product.

---



I created **Featbacks** mainly because i was looking for an online platform that will permit me to collect feedbacks about some of my personal projects **without incurring into expensive cost**… but many of the platforms i found were not 100% free.


So i decided to build one on my own, **free to use**
Be sure to check out the app at [featbacks.com](https://featbacks.com)

---



Thanks for your time, i hope you will find the application useful.
Day39 of #100DaysOfCode
Tags: webdev, 100daysofcode, nextjs, beginners
Published: 2022-11-16 13:34:49

I spent an hour or so watching Youtube tutorial on how to Prismic works.

I think I should be able to get a hang of it in a day or two.

It was quite daunting at first but after spending some time with it, it seems manageable. 🫠
Things learned from K&R C
Tags: c
Published: 2022-11-16 13:12:31

## Pointers

Pointer arithmetic on `void *` is not allowed since the size of pointed-to data is unknown.

"dangling pointer" == points to a deleted object
"wild pointer" == ~~points to uninitialized~~ uninitialized pointer

Converting from an array to a pointer loses size information

```c
char str[256];
printf ("%zu\n", sizeof str); // 256
char *pstr = str;
printf  ("%zu\n", sizeof pstr); // 4 or 8 (size of pointer). 
```

## Memory management
"static" == allocated at compile time
"automatic" == allocated on the stack
"dynamic" == allocated on the heap

## Types of behavior
"implementation-defined" == implementation must document. E.g. propagation of sign bit on `>>` operation.
"undefined behavior" == no requirements. E.g. signed overflow.
"unspecified behavior" == two or more possible behaviors E.g. order of argument evaluation.
"locale-specific behavior" == depends on local conventions. E.g. whether tolower returns true for characters other than 26 lowercase Latin letters.

The number of bits in a byte is implementation defined.

An assignment is an expression evaluating to the left-hand side. E.g. `(c = getchar())` evaluates to `c`.

`extern` can be used inside a function definition. E.g.
```c
int x;
void foo() {
    extern int x;
}
```

External and static variables are initialized to 0.

String literals cannot be modified. E.g.
```c
char *s = "abc";
s[0] = `d`; // not allowed
```

C89 int division with negative numbers is implementation defined. `7 / -2` can be `-3` or `-4` (round up or down). C99 defines as `-3` (toss the decimal after division).

If `fn` is called but not declared, the compiler assumes it is defined as `int fn()`.

Arithmetic and comparison of pointers that do not point to the same array is undefined behavior (exception is one past the last element in the array).

You may omit the first dimension of a multi-dimensional array in parameters. E.g. `void f(int arr[][13])`

`argv[argc]` is `NULL`.

`sizeof` does not require parenthesis for objects. `sizeof object` vs. `sizeof (type name)`.

C supports bit fields. The order of bits is implementation defined. E.g.
```c
struct {
    unsigned int is_keyword : 1;
    unsigned int is_extern : 1;
    unsigned int is_static : 1;
}
```

printf format is `%[-][<width>][.][<precision>][h|l][<conversion>]`. `<width>` or `<precision>` may be `*`.

`FILE*` is OS independent. File descriptors are Unix specific.
AWS IAM - Access Analyzer
Tags: aws, cloud, devops, security
Published: 2022-11-15 19:09:08

**Anotações sobre o AWS IAM Access Analyzer para ajudar na preparação das certificações AWS.**

Até o momento as anotações são para as certificações abaixo:

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


- [Link oficial](https://aws.amazon.com/pt/iam/features/analyze-access/)
- [FAQ ](https://aws.amazon.com/pt/iam/faqs/?nc=sn&loc=5)


---

##**Definição do fornecedor**
_Obter o privilégio mínimo é um ciclo contínuo para conceder as permissões detalhadas corretas à medida que seus requisitos evoluem. O AWS IAM Access Analyzer ajuda a simplificar o gerenciamento de permissões em cada etapa do ciclo._


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



---

##**Anotações gerais**

- Pode escolher contas para fazer a análise
- Pode integrar com Event Bridge

---
##**IAM Access Analyzer + CloudTrail**

- Analisa os logs do CloudTrail (Roles e Policy) e sugeri novas IAM Policies 
- Analisa entre 1 até 90 dias
- Gera dentro do IAM Users, selecionando o usuário, na aba Permissions
- Pode especificar a região, mas não é obrigatório
- Pega todas as chamadas de API 
- Pode personalizar a Policy sugerida

**Referências**

- [IAM Access Analyzer makes it easier to implement least privilege permissions by generating IAM policies based on access activity](https://aws.amazon.com/pt/blogs/security/iam-access-analyzer-makes-it-easier-to-implement-least-privilege-permissions-by-generating-iam-policies-based-on-access-activity/)
- [Registrar em log chamadas de API do IAM Access Analyzer com o AWS CloudTrail](https://docs.aws.amazon.com/pt_br/IAM/latest/UserGuide/logging-using-cloudtrail.html)
- [IAM Access Analyzer já analisa o histórico do AWS CloudTrail para identificar ações usadas em 140 serviços da AWS e gerar políticas detalhadas](https://aws.amazon.com/pt/about-aws/whats-new/2022/10/iam-access-analyzer-cloudtrail-history-identify-actions-140-aws-services-fine-grained-policies/)

---
##**IAM Access Analyzer + Policy Validation**

- Alertas de Security, Errors, Warning e Suggestions

**Referências**

- [IAM Access Analyzer policy validation](https://docs.aws.amazon.com/IAM/latest/UserGuide/access-analyzer-policy-validation.html)
- [IAM Access Analyzer Update – Policy Validation](https://aws.amazon.com/pt/blogs/aws/iam-access-analyzer-update-policy-validation/)

---
##**Utiliza cálculos matemáticos com Zelkova**

**Referências**

- [How AWS uses automated reasoning to help you achieve security at scale](https://aws.amazon.com/pt/blogs/security/protect-sensitive-data-in-the-cloud-with-automated-reasoning-zelkova/)
- [Access Analyzer policy check reference](https://docs.aws.amazon.com/IAM/latest/UserGuide/access-analyzer-reference-policy-checks.html#access-analyzer-reference-policy-checks-error-missing-arn-field)
Want to implement Snowflake and migrate legacy data warehouse to the cloud?
Tags: snowflakeconsulting, snowflakewarehousesolutions, snowflakeimplementation
Published: 2022-11-16 12:56:00

As a Snowflake consulting partner, Anblicks migrates data from legacy systems to the Snowflake data cloud on time and within budget, enabling instant scalability and availability of your data and analytics assets. **More information.** [Snowflake Consulting Services & Implementation Partner USA](https://www.anblicks.com/partnerships/snowflake/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66qfebpuvhtw5jjitkpg.png))
Talking TO your Phone
Tags: ai, machinelearning, speaking, ux
Published: 2022-11-16 12:55:29

Do you send text messages? Of course you do, anybody reading this was either born into a world where texting is the norm or has adapted to it. I've adapted to it.

Do you type or do you let the AI in your phone type the words you speak? For a lot of reasons, I regularly lean on the _**speech-to-text**_ feature of my phone. The messages make me seem drunk too many times. Words I did not say get sent.

Either I mumble ( probably do ) or/and the AI is just not that good yet. The AI should get better, because I'm not getting clearer.

Also spell check does not help.

People will ask me if they can reschedule a meeting or they will apologize for some small thing, and because I am a man of the moment ( or of a few moments ago ) I send them back **np** ( which cool people taught me stands for "no problem".)

`Of course the spell-check on my phone converts that to NO as a reply making it seem like I am very upset.` 

I'm so lazy sometimes I don't even fix it. Lazy is how I started using speech-to-text so this was predictable.

What has your experience with this technology been like?
Wednesday Links - Edition 2022-11-16
Tags: java, jvm, spring, gradle
Published: 2022-11-16 12:28:05

Spring Framework 6.0 goes GA (1 min)🎉
https://spring.io/blog/2022/11/16/spring-framework-6-0-goes-ga

Seeing through hardware counters: a journey to threefold performance increase (10 min)🔢
https://netflixtechblog.com/seeing-through-hardware-counters-a-journey-to-threefold-performance-increase-2721924a2822

What happens when you only limit the maximum heap size? (11 min)✋
https://mikemybytes.com/2022/11/15/what-happens-when-you-only-limit-the-maximum-heap-size/

Java Thread Primitive Deprecation (5 min)🌇
https://docs.oracle.com/en/java/javase/19/docs/api/java.base/java/lang/doc-files/threadPrimitiveDeprecation.html

JVM Logging - Sip of Java (2 min)🪵
https://inside.java/2022/11/07/sip071/

Spring Modulith: have we reached modularity maturity? (5 min)👴
https://blog.frankel.ch/spring-modulith-modularity-maturity/

Introducing Gradle Test Suites (8 min)🧪
https://blog.gradle.org/introducing-test-suites
Typescript: What is the output?
Tags: typescript, javascript, webdev, programming
Published: 2022-11-16 12:16:03

Enum with expressions resulting in `NaN` and `Infinity`.

What is the output and also mention your typescript version?

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

Thanks.

You can follow me here: [twitter](https://twitter.com/urstrulyvishwak)
R Tutorial
Tags: datascience
Published: 2022-11-16 12:09:36

R is a system that can be used to conduct analyses, create visual representations, and generate reports. Click [this link](https://www.foxinfotech.in/tutorials/r-tutorial) to learn R language.

## Audience

Software developers, statisticians, and data miners who are interested in creating statistical software with R will find this tutorial useful. If you're a beginner trying to learn R, this tutorial will give you a solid grounding in the language's fundamentals from which you can advance to more advanced material.

## Prerequisites

You should know the fundamentals of computer programming before continuing with this tutorial. If you know how to program in any other language, you'll be well on your way to learning R in no time.
TGA Weekly Newsletter [11/16/22]
Tags: technology, hacking, mastodon
Published: 2022-11-18 04:23:23

---
title: TGA Weekly Newsletter [11/16/22]
published: true
date: 2022-11-16 12:02:39 UTC
tags: technology,twitter,hacking,mastodon
canonical_url: https://medium.com/the-gray-area/tga-weekly-newsletter-11-16-22-8bf0a7b55e74
---

Hey! Welcome to The Gray Area’s newsletter for 11/16/22, with the top posts of the week!

![](https://cdn-images-1.medium.com/max/1024/0*MnLD4hioQgJfhqZ9)
_Photo by Tianyi Ma on Unsplash_

### Top Articles:

This past week (11/9/22 → 11/16/22), we saw a ton of super popular articles as new writers started contributing more and more. Plus, some great posts on OWASP level vulnerabilities:

#### [P1 Bounties: Cross-Site Scripting (XSS) Tips and Tricks](https://dev.to/grahamzemel/p1-bounties-cross-site-scripting-xss-tips-and-tricks-34oi-temp-slug-9607702)

#### [Which Security Hill Will You Die On?](https://medium.com/the-gray-area/which-security-hill-will-you-die-on-dfecb9c9b736)

#### [Creating Undetectable Reverse Shells for Windows 10](https://medium.com/the-gray-area/creating-undetectable-reverse-shells-for-windows-10-8d29f7bec74c)

### Niche Articles:

A couple of more specific articles:

#### [C0lddbox : Walkthrough 📝](https://medium.com/the-gray-area/c0lddbox-walkthrough-1a48df5b7a5c)

#### [10 Minute Bug Bounties: OSINT With Google Dorking, Censys, and Shodan](https://medium.com/the-gray-area/10-minute-bug-bounties-osint-with-google-dorking-censys-and-shodan-8d567d31dfed)

If you find these posts worth your time, feel free to give a few claps to show you liked the content, support the writer, and help out the publication.

#### Neat thing O’ the week:

Mastodon’s users are vulnerable to password-stealing attacks!

![](https://cdn-images-1.medium.com/max/1024/1*5Mcy9fx0pbXBpL6mjCW5zw.jpeg)

In light of Elon Musk now essentially ruling Twitter — having swept the board away and purchasing the company himself (a $44 billion purchase at that) — a large amount of users have been migrating to Mastodon. Mastodon is a similar platform to Twitter, and it provides the same kind of social media type feel.

It’s also open source which is great, especially when you find out that there’s an exploit in the code. Using Google Chrome’s autofill feature, it was possible to spoof a clicked toolbar element and post HTML, which is a big no-no for websites with any kind of authentication.

Check out The Gray Area’s Twitter [here](https://twitter.com/tgaonmedium) to get post updates as they come in, or subscribe to get them immediately delivered to your inbox!

![](https://cdn-images-1.medium.com/max/1024/0*4xsO8PorZ5T9E4qi)
_Photo by Souvik Banerjee on Unsplash_

That’s all for this newsletter. Thanks for reading, and we’ll see you next week!

* * *
C++ dagi 6-dars
Tags: beginners, programming, tutorial, cpp
Published: 2022-11-16 12:01:56

# C++ Matematik Funksiyalar

Assalomu Alaykum bugun siz bilan bir qancha imkoniyatlarga ega funksiyalar haqida ma'lumotga ega bo'lamiz. Bugun siz bilan matematik funksiyalar haqida gaplashamiz. **C++** dasturlash tilida raqamlarda matematik vazifalarni bajarish imkoniyatini beradigan ko'pgina funksiyalar mavjud.

## MIN va MAX

Funktsiya eng yuqori qiymatini topish uchun foydalanish mumkin X va y :`max(x,y)`

```cpp
cout << max(13, 15);
```

Va funktsiya x va y ning eng past qiymatini topish uchun ishlatilishi mumkin :`min(x,y)`

```cpp
cout << min(5, 10);
```

## C ++ `<cmath>` Kutubxonasi.

`sqrt`(Kvadrat ildiz), `round`(sonni aylantiradi) va `log` (natural logarifm) kabi boshqa funktsiyalarni  `<cmath>` kutubxonasida topish mumkin :

```cpp
#include <iostream>
#include <cmath>
using namespace std;
​
int main() {
  cout << sqrt(64) << "\n";
  cout << round(2.6) << "\n";
  cout << log(2) << "\n";
  return 0;
}
8
3
0.693147
```

## Boshqa matematik vazifalar.

Boshqa Math funktsiyalari ( `<cmath>`kutubxonasida) ro'yxatini quyidagi jadvalda topish mumkin:



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



**Bugungi mazular shulardan iborat edi hozircha shu mavzular haqida gaplashgan bo'ldik lekin kuzatishda to'xtatmang ko'rushguncha hurmatli Bo'lajak Dasturchilar.**  🖐️🖐️
🤷‍♂️FindDOMNode is deprecated in StrictMode🤷‍♂️
Published: 2022-11-16 11:58:32

Hi everyone! I have some issue while running react app.
If I choose menu in navbar (react projects) I face to such as below warning.

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

I only thought this issue caused by bad way of router manage.
please check below url then explain about this issue more detail.

https://github.com/elitesuper/my_issue/blob/main/App.jsx