teleren/devto huggingface dataset:
Day 843 : Invincible
Tags: hiphop, code, coding, lifelongdev
Published: 2023-11-29 22:12:17

_liner notes_:
- Professional : Felt much better today. Had a couple of meetings. Responded to some community questions. Continued refactoring a demo to use a new SDK. I started a while back, but it looks like some things changed with the new SDK since then so I was working some stuff out and asking questions of the team.

- Personal : Went through some tracks for the radio show. Played around with some code for the front end of my side project. I need some more assets to have everything I need for the site, but those will normally be generated by the back end. I'll most likely create some placeholder images till I can get them generated properly. Did some refining of the AI image generation. It's coming together...slowly. haha Ended the night catching up on "Spy x Family".


![Aerial view of Brocton, England with different colored patches of land extending into the distance under a hazy blue sky.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1b2qcim8zowe0601fdc9.jpg)

I think I'm going to spend like another hour finishing up some stuff for work after dinner so that I can take off early on Friday. I'm kind of on a roll and want to keep that momentum going and finish up some documentation. After that go through some tracks for the radio show. Maybe work on my side project. Definitely want to try and catch up on "Invincible" as well. That show is wild! I think I only have a couple of episodes left.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -7hwrEDjikA %}
Code Challenges pt. 1
Tags: webdev, javascript, programming, codenewbie
Published: 2023-11-29 21:52:45

Going from beginner on up, this will become a long series of posts covering coding challenge questions and answers.

The real goal here is to give myself some extra practice as well as build a reference to many different challenge questions.

Primary languages = JavaScript/TypeScript, may include some Java as well.

**First up, Reverse a String**

Prompt:
Given a string, return a _new_ string with the characters in reversed order.

Example outcomes:
reverseString('orange') === 'egnaro'
reverseString('hello world') === 'dlrow olleh'
reverseString('How About That?') === '?tahT tuobA woH'

Code:

#####Version 1 (using built-in string methods)
```
function reverseString(string) {
    return string.split('').reverse.join('')
}
```

_Why does this work?_

First, our function takes in a string and uses the `split()` method on it.

The first argument you give `split()` is the separator - the character in the string that you want the string to be split on.

By giving it an empty string (note: '' does not have a space between it), you're telling it to split the string at each and every character.

But `split()` returns an array of strings, so if we split "Hello" for example, it would return `["H", "e", "l", "l", "o"]`.

And that's how we get to our next step - the .reverse() method.

.reverse() is not a string method, but an array method, which is why we can only work with it after .split() returns our array.

Suffice it to say, that does most of the work on this problem.

The last step is another array method - .join() - which we essentially can think of as doing the opposite of .split() here.

The .join('') method concatenates the strings in the array when given an empty string, and returns a string from the array method as well.


#####Version 2 (for-loop version)
```
function reverseString(string) {
    let revString = ''
    for (let i = 0; i < string.length; i++){
        revString = string[i] + revString
    }
    return revString
}
```

_Why does this work?_

In the for-loop version, first we declare a new, empty string.

The idea here is that we have this empty string, and then as we loop through each character of our given string, we add the current character to the left of reversed string (revString).

Now let's pretend our string is "Hello".

The first time through the loop, revString is empty.

We enter our for loop, and we're telling it to loop through the string from left to right.

Since revString is empty, so we set it equal to the first character of the string (`string[i]` - because i starts at index 0), _plus_ the current revString value (which is empty).

This sets revString to 'H' as we begin our second iteration through the loop.

Next time through, revString = 'H', string[i] = 'e', so revString = 'e' + 'H', which becomes 'eH'.

To illustrate one last loop now revString = 'eH', string[i] 'l', so revString = 'l' + 'eH', which becomes 'leH'.

And you get the rest :)

Next up, Palindromes...
How does reduce method works?
Tags: javascript
Published: 2020-10-31 14:32:16

In this series i will try to explain how does an **underrated** javascript method, reduce, works and how we can use this method.

First let's take a look at how we would write this function if it wouldn't exist natively.

Reduce function follows *accumulator* pattern meaning that it tries to reduce the value, which we put into our function, to a single value.

It takes two parameters first one is callback function, second one is the initial value. If we define initial value, *accumulator* starts equal to the initial value. If not it starts as first element of the array.

```js
function fakeReduce() {
  function reduce(callback, initialValue) {
    let accumulator;
    let start = 0;

    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

  }
```
After we need to define our callback function which takes 4 parameters: accumulator, current value, index number and array. At each *for* iteration callback function runs again until loop is over and our return value is accumulator.

```js

  function fakeReduce(callback, initialValue) {
    let accumulator;
    let start = 0;
   //**this** keyword in this function scope points to array which reduce method is used on 
    if(initialValue) {
      accumulator = initialValue;
   } else {
     accumulator = this[0];
     start = 1;
   }

   for (let i = start; i < this.length; i++) {
     accumulator = callback(accumulator, this[i], i, this);
   }

   return accumulator;
  }
```
Right now missing part of our function is error handling but we will not get into that. Our main goal here is to understand how does reduce method works. 

In next post of this series i will show some examples how we can use reduce for more complex tasks rather than just summing up numbers of an array.

See you in next post...
Zero-to-beginner front-end roadmap
Tags: webdev, javascript, beginners, tutorial
Published: 2023-11-29 21:18:51

I recently updated my zero-to-beginner front-end developer roadmap. Check it out here: https://bit.ly/47Tloxo.

There are so many posts and videos on front-end roadmaps, but sometimes they are too overwhelming. You don't need to know every semantic tags in HTML or every array methods in JS before diving into React.

Each step in my roadmap teaches you just enough to proceed to the next. The rest, you will pick up as you build your capstone projects. I think this way is much more fun than cramming an extra hour of video on features of JS you will never use.

All the materials from my roadmap are from Youtube. Kudos to all the Youtubers out there that are lowering the entry bar to programming with their high-quality free tutorials.
Blend background images and colours with CSS 🧚🏽‍♀️.
Tags: webdev, css, frontend, tutorial
Published: 2023-11-29 21:18:44

**The `background-blend-mode` CSS property is used to specify how the background images of an element should blend with each other and with the element's background colour. 
It allows you to create interesting visual effects by controlling the blending mode of the background layers.**

The `background-blend-mode` property takes a blending mode value, which determines how the colours of the background layers are combined. The blending modes available include standard modes such as `normal`, `multiply`, `screen`, `overlay`, and more. These modes affect how the colours of the background layers interact, creating different visual effects.

Here's an example of how the `background-blend-mode` property can be used in CSS:

```css
.element {
  background-image: url('background-image.jpg'), linear-gradient(to right, red, yellow);
  background-color: #fff; /* Fallback background color */
  background-blend-mode: multiply;
}
```

In this example, the element has a background composed of an image (`background-image.jpg`) and a linear gradient. The `background-blend-mode: multiply;` is applied, which means the colours from the image and gradient will be multiplied together, creating a blended effect.
<br>
Here's another example 
{% codepen https://codepen.io/Ishrat_Pinky/pen/OJdoajB %}
<br>
{% youtube SSWrvKw8-BY %}

Remember that browser support may vary for this property, so it's a good practice to check compatibility if you plan to use it in production.
Open source development - Release 0.1
Tags: opensource
Published: 2022-09-17 02:31:13

## General review
 
I found the partner very quickly, I enjoyed collaborating with him.

It turns out that writing SSG in python is not that complicated. 
(https://github.com/sfrunza13/SiteGenerationTool)
The code that I was reading is very clear and concise, even if you are not very good at this language.

The thing I noticed is that some things may be obvious for the author, but not enough straightforward for the user. So, during testing I ran on the issue that I'm not sure how exactly I should run the tool. I would love to see some examples to make things clear.

## Regarding bugs in my tool:

I was really surprised by the amount of bugs that were revealed on other side. Sometimes things just work perfectly locally on your computer, but once somebody else starts playing with your tool, you might be surprised that it will crush.

I have an issue with the location of the script. When person clones the project, and then runs it, the tool gives weird error, saying that he can't find the location of the specified txt file.
( https://github.com/mnosov622/simple-ssg1/issues/2 )

For now, I'm still working on fixing this issue. 


## Issue that I found:

1) The issue that I found is that I'm unable to convert file from txt to html that is not in the dist folder. So in order for tool to work I need to create dist folder.(https://github.com/sfrunza13/SiteGenerationTool/issues/1)

## Final thoughts
 
Personally, I enjoyed the process of testing and reviewing, communicating with other people and trying to make the software to work as perfect as possible. 

Also, it's very important to deliver your issues as detailed as possible, provide certain steps that lead to error. This would really help the author to understand what you mean and resolve the issue quickly! 

For SSG tool, unfortunately, I didn't make it work perfect at all,  but for the next open source projects I will work harder to achieve the best results!

Overall, it's a great experience to get ! We need to connect to with the people from the same field more and exchange the knowledge :)
Remove Unwanted Spaces from Angular Form Submission
Tags: angular, tutorial
Published: 2023-11-29 21:12:28

When a user types a value into a form field, it’s a very common mistake to add spaces at the beginning and/or end of the value. We can clean those unwanted spaces up very easily using an Angular directive!

## Trim Values Manually

When an Angular form is submitted, you can get all the values of the form and then use the Javascript trim method to remove unwanted spaces from each property.

```javascript
const data = this.form.value;
 
data.firstName = data.firstName.trim();
```

Doesn’t look too difficult, but imagine if there are more fields. Instead of adding more code to the form submission logic, we can use a directive to make things easier!

## Trim Directive

Let’s start by importing what we need to create the directive.

```javascript
import { Directive, ElementRef, HostListener } from '@angular/core';
```

Within the directive’s constructor, create a parameter called **element** with the type **ElementRef**. This will be a reference to the host element, which is the form field the directive is added to.

```javascript
constructor(private element: ElementRef) { }
```

We don’t want to remove spaces while the user is typing. Instead, let’s remove spaces once the form field loses focus. We can listen for the blur event using a [HostListener](https://angular.io/api/core/HostListener).

```javascript
@HostListener('blur') onBlur() {
 
}
```

Get the current value of the form field from its native element, trim any beginning and ending spaces, and then apply the cleaned up value to the form field.

```javascript
const value = this.element.nativeElement.value;
this.element.nativeElement.value = value.trim();
```

Here’s the final code:

```javascript
import { Directive, ElementRef, HostListener } from '@angular/core';
 
@Directive({
  selector: '[appTrim]'
})
export class TrimDirective {
 
  constructor(private element: ElementRef) { }
 
  @HostListener('blur') onBlur() {
    const value = this.element.nativeElement.value;
    this.element.nativeElement.value = value.trim();
  }
 
}
```

To make this directive usable across any module, let’s create it as its own module so it can be imported into any module where it’s needed.

```javascript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
import { TrimDirective } from './trim.directive';
 
@NgModule({
  declarations: [TrimDirective],
  exports: [TrimDirective],
  imports: [CommonModule]
})
export class TrimModule { }
```

To use the directive, first import it into the module where you want to use it.

```javascript
import { TrimModule } from 'path/to/trim.module';
 
@NgModule({
  ...
  imports: [
    ...
    TrimModule,
    ...
  ]
})
export class ContactFormModule { }
```

You can now add the directive attribute, which is called **appTrim**, to the form fields!

```html
<input appTrim type="text" id="firstName" name="firstName" formControlName="firstName" />
```

---
**Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Twitter](https://twitter.com/nightwolfdev)!**
Protocolos base da internet: TCP
Tags: webdev, backend, beginners
Published: 2023-11-29 21:00:25

**TCP - _Transmission Control Protocol_**

O TCP é um dos principais protocolos de transporte que existe na internet, e também é visto popularmente com o IP, formando o TCP/IP. Ou seja, o TCP é responsável por gerenciar o processo de comunicação entre duas partes (client-server).


![Uma requisição dividida em segmentos 1, 2 e 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/626p6aar6v0ahuqushrh.png)
Ao fazermos uma requisição, ela é dividida em fragmentos menores onde contém dados importantes como o próprio conteúdo em si, o IP de origem, o IP de destino. E no cabeçalho do protocolo de transporte, está contido o número de sequência.

Antes de receber esses pacotes e fazer a troca de informações, o server TCP precisa estabelecer a conexão com o outro dispositivo. Esse processo é chamado de _three handshake._


![Processo de three handshake: Syn, Syn-Ack, Ack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc9cn921bvlgv3dunybu.png)
**SYN:** Faz a solicitação para estabelecer uma conexão - Essa solicitação pede para o servidor sincronizar com o número da sequência.

**SYN ACK:** Aceita a conexão e sincroniza com o dispositivo - O servidor confirma a sincronização e solicita que o cliente sincronize o seu número de sequência.

**ACK:** Confirma que recebeu a resposta e que houve a sincronização.

Exemplo:
![Fluxo de SYN/ACK entre cliente e servidor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8aqiq5pmt5ad4dzhspmv.png)

- O cliente envia um SYN para o servidor e seu número de sequência é 483. 
Do outro lado, o servidor tem o número 222 como sequência, e ao receber a solicitação, o confirma (ACK) com +1.      


- O cliente ao receber o SYN-ACK do servidor, recebe a sequência do servidor (222) e o novo número de sequência (484).      

- O cliente envia um ACK para o servidor com o ACK = 223, e o servidor passa a ter o número 223 como sequência.    


Ao receber os segmentos, o servidor TCP dá a garantia de receber/organizar em ordem, porém se um segmento se perdeu, o TCP não prossegue com os outros segmentos. Ele faz a retransmissão.

![Fragmento 1 perdido](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8h9hge980gmcq3ugoky.png)


Vamos supor que deu tudo certo no recebimento e organização do TCP: Após a conexão estabelecida, a gente tem que a sequência do cliente é 484 e a do servidor é 223.

Se o cliente tiver, por exemplo, um payload de 30 bytes, ao enviar para o servidor, o servidor irá acrescentar +30 ao 484. Então o ACK será de 514.

![Fluxo de envio do cliente com payload para o servidor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8e7dtfphur7ksusxqfw.png)



Exemplo de abertura de conexão em C# 11 + .NET 7


![Criação do servidor e aceite do cliente](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpou5d3dt0ubk29qwlan.png)


![Criação do cliente e conexão no servidor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3gfp52n7guctv65965p.png)

👍
"Exploring the Path from Medicine to a Tech Career": CodeNewbie Podcast S26E5
Tags: codenewbie, podcast, beginners, career
Published: 2023-11-29 20:41:59

Our 5th episode of the season is out now with [Shona Chan](https://twitter.com/dr_scjy)! ✨ 

In this episode, our host, @saronyitbarek , speaks with Shona, Software Engineer at Eolas Medical, about her experience navigating the world of software following a successful career as a doctor and Anesthesiologist. 

{% embed https://www.codenewbie.org/podcast/exploring-the-path-from-medicine-to-a-tech-career %}

Shona Chan is a doctor and software engineer, focused on enhancing healthcare through technology. Before Shona discovered coding, she worked in the field of Anaesthesia in the UK. She started learning to code so that she could build an app for her workplace. She couldn't ignore this newfound interest and so enrolled herself in Le Wagon's Web Dev Bootcamp to develop her skills.

- [Listen on Apple Podcasts](https://podcasts.apple.com/us/podcast/codenewbie/id919219256?i=1000636890954)

- [Listen on Spotify](https://open.spotify.com/episode/02mMnjrL3mcnb1xHnjlVNJ?si=fe735ba87b064da0)

Or, listen wherever you normally get your podcasts!

***

### We will see you next week, happy coding

PS: Make sure to subscribe to the CodeNewbie podcast if you haven't yet + review us on your chosen platform!
What is Java? OOP (4 pillars): Primitive and Non-Primitive Types in java.
Published: 2023-11-29 20:39:14

 Java is a versatile programming language with widespread applications in crafting Android apps, web applications, and various software development tools. At its core, Java embraces the principles of Object-Oriented Programming (OOP), characterized by four foundational pillars: Abstraction, Polymorphism, Encapsulation, and Inheritance.
**Abstraction**-involves simplifying complex systems by modeling classes based on the essential properties, shortly said it shows required information and ignores unnecessary details.
**Polymorphism**-means "many forms", it allows objects of different classes to be treated as objects of a common-based class. 
**Encapsulation**-restricts access to some of an object’s components and prevents accidental data modification.
**Inheritance**-is a mechanism that allows a new class to inherit the properties and behaviors of an existing class. 
In data types, Java encompasses two tracks: **Primitive and Non-primitive**. Primitive types, including int, byte, short, long, float, double, boolean, and char, represent the fundamental building blocks of the language. On the other hand, Non-primitive data types, often termed reference types, point to objects and are crafted by the programmer. These non-primitive types encompass Array, Class, String, and "Interface," contributing to the language's adaptability and extensibility.
OK: it appears I'll be blogging
Tags: webdev, newbie, community, introduction
Published: 2023-11-29 20:38:21

Why? Because blogs have had a huge impact on where I've ended up as a developer, and I don't see them becoming any less important. I've gotten a lot out of articles by [Flavio Copes](https://flaviocopes.com/) and [David Walsh](https://davidwalsh.name/), alongside countless random developers on [Medium](https://medium.com) and [Dev](https://dev.to) and [HackerNoon](https://hackernoon.com).

Maybe I, too, can be someone else's random developer? Maybe I'm at a point now where what I know and what I've experienced can help someone else? Maybe writing about what I'm doing will help *me* to better organize my thoughts and my work?

Also, I pretty much already blog on my commute home from work each day, out loud or in my head, so it's not like I don't have anything to blog about. I've actually got kind of a daunting list of topics.


## Who am I?

I'm a Software Engineer at [Precision Planting](https://www.precisionplanting.com/), based in Illinois. I work mostly with the frontend, designing and developing the Radicle Agronomics hybrid app that deploys to the web, iOS, and Android. Maybe I'll blog about it sometime?


![Jake and wife, Mary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxrxefun3m5qodu2h3av.jpg)

I've got a hard-working wife, Mary; and two pretty amazing kids: Isaac (4) and Elinor (2). Isaac is our maybe future engineer, and he loves Legos and magnets and anything with a motor; Ellie is the party's healer, providing imaginary band-aids for everyone's imaginary wounds. She also likes pretending to be a dinosaur.


![My kids, Elinor and Isaac](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hutorfh4npg2undjb3bm.jpg)

When I'm not playing with or picking up after the kiddos, I'm probably working on some project or another. By day, I use Svelte and Ionic/Capacitor; by night, I experiment. Right now, I'm enjoying fighting Rust's borrow checker and trying to compile functional WebAssembly from as many languages as possible. I wish I had an excuse to learn Zig, I think TypeScript is a necessary evil, and I think React is an unnecessary evil.

And that's me!

## So that's a blog post, huh?

Well... it's a start, isn't it? Words on "paper." I'll be more structured when we get hands-on with some code later on. Maybe.

Later!