teleren/devto huggingface dataset:
Beach Wave Timelapse | Pure CSS
Tags: codepen, css, beginners, tutorial
Published: 2022-05-19 23:51:25

Who likes the beach?! Today we create Beach Wave Timelapse art with CSS that continuously runs animations with the water moving & also giving the illusion of sand getting wet.

We used yet again pseudo elements & keyframes to create animations within CSS.

{% codepen https://codepen.io/rembertdesigns/pen/vYWqvBv %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Beach Timelapse | Pure CSS
Tags: codepen, css, tutorial, beginners
Published: 2022-05-19 23:27:52

Who likes the beach?! Today we create Beach Timelapse art with CSS that continuously runs animations with the water moving & also the sun & background changing.

We used yet again pseudo elements & keyframes to create animations within CSS.

{% codepen https://codepen.io/rembertdesigns/pen/bGYPQOX %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Cloud Resume Challenge - Part 2
Tags: aws
Published: 2022-05-19 23:19:47

I solved the issue with the visitor counter not updating, it was an error with the CORS configuration. I had initially believed that my configuration of website calling to the CloudFront distribution would pass the correct headers; however I discovered that the API Gateway was not configured to correctly pass the header mappings through the Integration Response. Once that was corrected, the data was passed from the DynamoDB table without issue. Unfortunately, while I was receiving the data correctly, my JavaScript function would not result in any response other than null. After pouring through documentation and searching Stack Overflow without a solution that I could get working, I decided to abandon the use of fetch/response and instead implement XMLHttpRequest. I will need to learn more about JavaScript before I reiterate the function in the future.

I implemented the frontend code into GitHub, and began learning how to configure Actions to automate the CI/CD of any future changes. This led to learning how to set up secrets, and automate CloudFront invalidations through the GitHub Actions YAML configuration.

More work continues to write the scope of backend infrastructure into Terraform code.
smooth scrolling
Tags: javascript, beginners
Published: 2022-05-04 13:55:27




The HTML code,
```
<nav class="nav">
      <ul class="nav__links">
        <li class="nav__item">
          <a class="nav__link" href="#section-1">Home</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#section-2">Operations</a>
        </li>{% embed  %}
        <li class="nav__item">
          <a class="nav__link" href="#section-3">Funds</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#section-4">Open account</a>
        </li>
        <li class="nav__item">
          <a class="nav__link" href="#section-5">close account</a>
        </li>
      </ul>
    </nav>
    <div class="main">
      <div class="section" id="section-1">
        <h1>section-1</h1>
      </div>
      <div class="section" id="section-2"><h1>section-2</h1></div>
      <div class="section" id="section-3"><h1>section-3</h1></div>
      <div class="section" id="section-4"><h1>section-4</h1></div>
      <div class="section" id="section-5"><h1>section-5</h1></div>
    </div>```

## css styles
```* {
        margin: 0;
      }
      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 5rem;
        width: 100%;
        padding: 0;
        background-color: bisque;
      }

      .nav__links {
        display: flex;
        align-items: center;
        list-style: none;
      }

      .nav__item {
        margin-left: 4rem;
      }

      .nav__link{
        font-size: 1.7rem;
        font-weight: 400;
        color: inherit;
        text-decoration: none;
        display: block;
        transition: all 0.3s;
      }
      .main {
        width: 100%;
        height: auto;
      }

      .section {
        width: 100%;
        position: relative;
        height: 50rem;
        background-color: #ff585f;
        text-align: center;
        border-bottom: 2px solid #000;
        text-transform: capitalize;
      }```
## The JavaScript,
```const allLinks=document.querySelectorAll(".nav__link")
 const navLink=document.querySelector(".nav__links");

      navLink.addEventListener("click",function(e){
       e.preventDefault();
        if(e.target.classList.contains("nav__link")){
          const clicked=e.target.getAttribute("href");
      document.querySelector(clicked).scrollIntoView({behavior:"smooth"});
      //red color on clicked link
          e.target.style.color="red";

        }
        // clearing the red color after 2sec
        setTimeout(()=>{allLinks.forEach((s,i)=>{
        if(e.target.color="red"){

             s.style.color="black";
            }
        })},5000)
      })```
{% codepen https://codepen.io/vasanthcf/pen/rNJVyzw %}
Sun Reflection | Pure CSS
Tags: codepen, css, tutorial, beginners
Published: 2022-05-19 23:13:31

Today we create a Sun Reflection art with CSS that continuously reflects the fun on a background. 

We used yet again pseudo elements & keyframes to create animations within CSS.

{% codepen https://codepen.io/rembertdesigns/pen/vYWqQRr %}

If you liked this post, make sure to follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)
Convert your texts into "Bionic Reading" mode online
Tags: webdev, productivity, javascript, tutorial
Published: 2022-05-19 22:59:21

Hello everyone,

**Bionic Reading** is a new method to speed up your reading by highlighting first letters of each word in a sentence to focus your eye on them and other letters will be completed by your brain without reading the whole.

This method is developed by Renato Casutt and I made a basic converter to help you to test whether it works for you or not.

👉 [Bionic Reading Converter](https://10015.io/tools/bionic-reading-converter)

Feel free to comment about your experiences about this new method.

![Fast Reading with Bionic Reading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9jizo3d00dk8vpi44at.gif)
Breaking down an advanced Typescript type!
Tags: typescript, javascript, programming, codequality
Published: 2022-05-19 22:17:57

###Introduction
Hello and welcome to my post about breaking down some advanced types in typescript!

On this example we have a Type which receives a string of a number "12" and provides 12.

```ts
type Twelve = StringToNumber<"12"> // 12
```


###Code

```ts
type StringToNumber<
  Len extends string,
  Arr extends unknown[] = []
> = `${Len}` extends `${Arr["length"]}`
  ? Arr["length"]
  : StringToNumber<Len, [...Arr, unknown]>;

type One = StringToNumber<"1"> // 1
```
So, wtf did we just read? Well, it is a type that takes a string and its output is that string parsed to a number.

So let's suppose we have:

```ts
type One = StringToNumber<"1"> // 1
```
```ts
// 1st time this type is used by `type One = StringToNumber<"1">`
type StringToNumber<
  Len extends string, // The string we are passing "1". It is a generic that we restrict to 'string' using the 'extends' keyword.
  Arr extends unknown[] = [] // Another generic, in this case an array of unknown which by default is an empty array.
> = `${Len}` extends `${Arr["length"]}` // Is the template literal `1` == `[].length` ? At the start, the Arr is an empty array, so the length is 0. So 1 extends 0 is false. Think about extends in this case as '==' .
  ? Arr["length"] // If so, we return the length of the array.
  : StringToNumber<Len, [...Arr, unknown]>; // Else, we call again (recursive) the StringToNumber type and we pass the 2 generic types: Len="1" and the Arr which at the moment is [unknown], since [...Arr, unknown] becomes [unknown] due to spreading Arr which is an empty array.

// The 2nd iteration, called by the recursivity from the previous statement.
type StringToNumber<
  Len extends string, // The string we are passing "1" (again)
  Arr extends unknown[] = [] // Now we are actually passing an array, which at the moment is [unknown] of length 1.
> = `${Len}` extends `${Arr["length"]}` // `1` == [unknown].length ? Now this is true, because Arr.length is 1
  ? Arr["length"] // Now, we return the length of the array, which is 1
  : StringToNumber<Len, [...Arr, unknown]>; 

```

###Conclusion
Typescript complex types can be sometimes hard to read, no doubt on that, although if they are broken down step by step can become somewhat clear.

You can follow me on:

- [Github ](https://github.com/aspnxdd)
React design patterns
Tags: react
Published: 2022-05-19 22:05:12

I am about to take a LinkedIn learning course on React design patterns.

This blog entry will serve as a public note for others. A lot of people can't access the course since it is tied to a premium subscription. I hope my notes at least help you understand the nitty gritty of writing design patterns in your react applications.

What are design patterns?
Shaun defines design patterns as _effective_ solutions to common application development challenges.

Common Challenges in creating react apps which we would be applying design patterns to include:

1. Creating reusable layouts
2. Reusing complex logic between multiple components
3. Working with forms -- specifically why I have a gist on it
4. Incorporating functional concepts into our code -- I think this would include not mutating state and stuff.

First, we are gonna look at Layout Components.
Layout components are react components that have a primary function of arranging other components on the page.

Normally, when we create a component, we include the container div and the styles along with it.
an example of that is:

```javascript
<div styles={...}>
   <h1>Component Code...</h1>
</div>
```

We could instead use a layout component that would have the structure and the styles of our app or a specific part of the app and then render children inside of it

```javascript
<div styles={...}>
  {children}
</div>
```

-- split the layout styles into their own component
-- display the component itself inside the layout component

why do we do this?

It's in a bid to separate the component itself from where it's being displayed on the page.

In Summary:
The idea of layout components is that our components shouldn't know where they are being displayed.

Here's a sandbox illustrating it better:

{% embed https://codesandbox.io/embed/quizzical-easley-iw4s4n? fontsize=14&hidenavigation=1&theme=dark %}

Layout components should be written in such a way as to enhance developer experience. Remember, the goal of any software design pattern is not only to solve the problem but to also reduce complexity while doing it.
Day 565 : Back To Work
Tags: hiphop, code, coding, lifelongdev
Published: 2022-05-19 21:38:31

_liner notes_:
- Professional : Another day of meetings. Afterwards, I worked on getting setup on my new personal Chromebook to work on some upcoming workshops and talks.

- Personal : Last night, I created a quick POC for how I want the front page for my next side project to look and behave. Got a couple of things to smooth out, but I'm pretty happy with the results. Really looking forward to starting back up again. I've learned about some new things that I think will help.

![Trunks of trees in a dense forest, some with moss in Puzzlewood, England ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z367gapdhwlpxutbkj4c.jpg)

Going to see if I can get some stuff done tonight for work so I don't have to do it tomorrow. Plus I want to get the radio show put together. Oh and new episode of "Atlanta" tonight. Going to eat dinner and get back to work.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -6-olhfhxuU %}
Why Engineers Make the Best Entrepreneurs w/ Drata's Co-founder & CTO Daniel Marashlian
Tags: devops, management, podcast, techtalks
Published: 2022-05-19 21:37:16

*We want to make the Dev Interrupted podcast a vital, enjoyable part of your week.* ***Please take 2 minutes and answer our new [Listener Survey](https://www.surveymonkey.com/r/PRYRNC5).*** *It lets us know a bit about you, what you want from Dev Interrupted and what you want from podcasts in general!*

There are so many books, videos and workshops on starting your own company. The problem for anyone listening to this podcast is that none of them come from the perspective of a developer.

That’s why we were so excited that the founder & CTO of [Drata](https://drata.com/), Daniel Marashlian – who has previously founded eight companies before hitting a billion-dollar valuation with Drata – was open to talking about what it’s like to build a company from a coder’s perspective.

From the signs you’re an entrepreneur at heart, to filling out your skills gap to leaning in to the edge you have with your background, this episode of [Dev Interrupted](https://devinterrupted.com/podcasts/) is essential listening for anyone who can code - or anyone who has dreamed of founding their own company.

{% spotify spotify:episode:3J6jLn3b8sjTK4QZbLrfl3 %}

## Episode Highlights Include:
* (3:41) Serial entrepreneurship and previously failed companies
* (10:56) Signs you should start your own company
* (14:57) You can start a company with experience, you don't need an idea
* (17:32) Why engineers make good entrepreneurs
* (26:20) Always look right to left
* (31:00) Finding good co-founders
* (40:56) Relentless execution
* (49:56) The moment Daniel knew Drata was a success

***Starved for top-level software engineering content? Need some good tips on how to manage your team? This article is inspired by [Dev Interrupted](https://devinterrupted.com/podcasts/) - the go-to podcast for engineering leaders.***

*Dev Interrupted features expert guests from around the world to explore strategy and day-to-day topics ranging from dev team metrics to accelerating delivery. With new guests every week from Google to small startups, the Dev Interrupted Podcast is a fresh look at the world of software engineering and engineering management.*

[***Listen and subscribe on your streaming service of choice today.***](https://devinterrupted.com/podcasts/)

![https://devinterrupted.com/podcasts/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl8yy3hpnevlyboet97b.png)
May 19th, 2022: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2022-05-19 21:34:00

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

![Michael Scott from The Office dancing and saying "Almost the weekend!"](https://media.giphy.com/media/LXfpI3nNbfCm91llsA/giphy.gif)

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}
React Hooks: useRef
Published: 2022-05-19 21:30:26

## Introdução

Com o advento dos **Hooks** a partir da versão 16.8 do React, é possível escrever componentes funcionais e gerenciar o ciclo de vida do próprio componente. 

A própria biblioteca do react disponibiliza diversos hooks que irão facilitar a sua vida na hora de programar. Nesse artigo vamos estudar um desses hooks, o _useRef_.

## Pra que serve o useRef?

_useRef_ é um Hook que pode ser usado basicamente de três maneiras:

- permitir o acesso ao elemento DOM;
- rastrear mudanças de estado;
- evitar re-renderizações de componentes;

Segue abaixo alguns exemplos simples para o uso desse hook na prática:

## Exemplo 01: Acesso ao elemento DOM

Normalmente nós deixamos o próprio React manipular os elementos DOM, mas em alguns casos, podemos utilizar o _useRef_ para acessá-los, sem causar nenhum problema de desempenho.

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

> Ao clicar nos botões, temos acesso às propriedades do elemento input.

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

## Exemplo 02: Mudanças de estado

O hook _useRef_ também pode ser utilizado para rastrear mudanças de estado. Isso ocorre porque o _useRef_ persiste o valor do estado entre as renderizações.

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

> Ao clicar nos botões, podemos monitorar as mudanças de estado da variável count.

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

## Exemplo 03: Re-renderizações de componentes

Em alguns cenários, precisamos rastrear um estado utilizando o useEffect e, dependendo de como o fizermos, poderá causar um looping infinito ou renderizações desnecessárias.

Utilizando o _useRef_, podemos evitar esse problema.

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

> Ao digitar nos inputs, podemos ver a diferênça no número de renderizações do código.

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

## Conclusão

Neste artigo abordamos a utilização do hook _useRef_ em alguns exemplos práticos. O _useRef_ retorna um objeto mutável que possui a propriedade .current, assumindo qualquer valor, seja um elemento DOM ou do React.

Quer praticar? Segue o [**link do código fonte**](https://github.com/dnokaneda/react-hooks) utilizado nesse projeto.

### Fontes:

[w3schools](https://www.w3schools.com/react/react_useref.asp)
[reactjs.org](https://pt-br.reactjs.org/docs/refs-and-the-dom.html)
[medium.com/@guigaoliveira_](https://medium.com/@guigaoliveira_/conhecendo-o-useref-do-react-9d67e66)
How to debug a problem you can not reproduce
Tags: tutorial, java, debugging
Published: 2022-05-19 21:17:50

Sometimes, I get a bug that I just can't reproduce in the local environment. Still, this bug is very much present in the testing environment (dev or staging). 
If I can't reproduce - I can't write a good test to cover this case. 
And from this point on, a bug fixing is just one commit after another with a message "bug fix #". 
Each time you need to wait for CI/CD pipeline, and after a few tries your workday is pretty much over :(

Everybody who was in this situation knows just how frustrating it might be.
I remember how I spent 2-3 hours comparing environments only to realize that there's a bug that represents only on docker-container-specific JVM.
But what if you could debug code not on your local machine, but remotely? 
It appears that you actually can!

### Let's take a look at how to do it with Java. 
It's not that difficult. 
In the script where you launch your Java app, you need to pass special parameters.

`-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:5005`

So now your launch command will look something like this:

```bash
java -jar -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:5005 app.jar
```
You might want to change `:5005` to the port of your choice. This is a port on which debug socket will be exposed.

> WARNING! This parameter must not be used in production. Remote debug allows remote code execution. 

Now you can use your IDE to attach a debugger to your remote running application. You just need to do the last step - add debug configuration. 

You can do that in the `Run/Debug Configurations` menu. Choose `Remote JVM Debug` and set host that your application is running on & debug socket port.

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


That's it. Now you can debug code on the staging environment as it was running locally. 

### Conclusion

I highly encourage you to research this topic for a language of your choice, as this ability might save you a lot of time. You can use this to debug not only the app that is running on a different machine but also that is running in Docker locally.

Here are some resources I found for you:

More on Java remote debugging:
[JetBrains tutorial](https://www.jetbrains.com/help/idea/tutorial-remote-debug.html#8381fa50)
[DZone article](https://dzone.com/articles/remote-debugging-java-applications-with-jdwp)

Python: [JetBrains tutorial](https://www.jetbrains.com/help/pycharm/remote-debugging-with-product.html)
C#: [MS Docs](https://docs.microsoft.com/en-us/visualstudio/debugger/remote-debugging?view=vs-2022)
JavaScript: [JetBrains tutorial](https://www.jetbrains.com/help/idea/run-debug-configuration-node-js-remote-debug.html)
👋 Good bye Spring Boot 2.5.x, hello 2.7.0
Tags: java, springboot, programming, podman
Published: 2022-05-19 21:03:41

## 📢 Announce

Yesterday Spring team announced the `2.5.14` release... and also...

> 2.5.x has now reached the end of its OSS support 

{% twitter 1527217911730929664 %}

... and as promised, the long awaited `2.7` release announce !

{% twitter 1527284897240428545 %}

Below the full releaseNote : 

{% embed https://spring.io/blog/2022/05/19/spring-boot-2-7-0-available-now %}

## 📝 Details

Two of the most remarkable news are : 

- New `@DataCoubaseTest` and `@DataElasticsearchTest` support
- Podman can now be used when building images using Cloud Native Buildpacks

as we started to use Podman ro tun containers and always pushing further on testing.

Also in the [detailed releaseNote](https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.7-Release-Notes#dependency-upgrades ), we can notice among others : 

- [Numerous dependency upgrades](https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.7-Release-Notes#dependency-upgrades), including `Kafka 3.1`
- `Elasticsearch 7.17` (still no Elastic 8.x native support, awaited for Spring 3.x)

Also taking a glance at [miscellanous](https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-2.7-Release-Notes#miscellaneous) details is worth reading for Kafka users, JDBC and ElasticSearch 

## 🏁 Upgrade time

If you are using Dependabot like we do, just wait for [PullRequests comme to your repo](https://github.com/opt-nc/opt-temps-attente-agences-api/pull/78) to discover how to upgrade : 

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