teleren/devto huggingface dataset:
Pyroclastic Flow
Tags: adventofcode, algorithms, javascript, programming
Published: 2022-12-22 21:14:17

## [Advent of Code 2022 Day 17](https://adventofcode.com/2022/day/17)

## Part 1
1. It's Tetris, broh!
2. The work it will take
3. Representing the tetrominoes
4. It's just too much to manage

### It's Tetris, broh!
> This is gonna be so much fun!

He thought.

> I'm pumped to solve this and build a simulator for it!

He said to himself.

> It all seems doable.

He reassured himself.

### The work it will take
I had two days to ruminate on this puzzle before starting this article or writing any code.

Each of the strands of thought led me to one conclusion:
- This is gonna be a *lot* of work, and that work is building this game

Work like:
- Lots of conditions
- Lots of nested arrays
- Lots of array accessing to check for collisions
- Lots of array manipulation to cycle through rocks and update the game board
- Perhaps some `modulo` to cycle through the puzzle input

I am prepared to attempt the work.
I'm skeptical of getting it to work as desired.
I foresee writing lots of code.
Most of it will be deleted.
But all of it is worth getting practice, making mistakes, and learning.

### Representing the tetrominoes
- I feel like I need a table-like structure
- Nested arrays feels like the way to go

Here's my first draft:
```js
let rocks = [
  [
    ['#','#','#','#']
  ],
  [
    ['.','#','.'],
    ['#','#','#'],
    ['.','#','.']
  ],
  [
    ['.','.','#'],
    ['.','.','#'],
    ['#','#','#']
  ],
  [
    ['#'],
    ['#'],
    ['#'],
    ['#']
  ],
  [
    ['#','#'],
    ['#','#']
  ]
]
```

- An array with five nested arrays
- One for each tetromino
- And each tetromino uses sibling arrays of strings
- Where each array is a row and each item is a column

I sense that I'll have to adjust this as I start writing the logic for the game.

### It's just too much to manage
I started writing an algorithm.

I got as far as:
- Representing the chamber as a nested 9-element array
- Adding rows at the start of the chamber
- Placing the next rock three cells from the left edge of the top of the chamber
- Making a copy of the chamber for use during movement
- Writing the initial steps that happen if the jet move the rock to the right: is the rock gonna hit the wall?

This already feels like a lot of state to manage.

And an avalanche of conditions to check.

And it's just not fun. At all.

So, I hereby throw in the towel way earlier than I had hoped for this challenge.

Maybe I'll come back to it one day and work up the patience, grit and spirit to attempt it fully.

But for now, I'm more excited to skip it in hopes that Day 18 will present a different but less gauntlet-like puzzle.
What is chatGPT ?
Tags: chatgpt, openai, bot, machinelearning
Published: 2022-12-22 21:08:07

ChatGPT is a chatbot based on the GPT-3 language model developed by OpenAI. It is a machine learning model that has been trained on a large dataset of human conversations and is capable of generating natural language responses to text input.

The GPT-3 model is a transformer-based language model that uses self-attention mechanisms to process and generate text. It has been trained on a wide variety of tasks and has achieved state-of-the-art performance on several benchmarks.

ChatGPT can be used to create chatbots for customer service, information retrieval, and other applications where it is necessary to generate human-like responses to text input. It can also be used for language translation, language generation, and other language processing tasks.

There are several ways to use ChatGPT, including through the OpenAI API, which allows developers to access the model and build chatbots or other applications using it. There are also pre-trained versions of ChatGPT available, which can be fine-tuned on specific tasks or datasets.

Overall, ChatGPT is a powerful tool for natural language processing and can be used to build chatbots and other applications that can generate human-like responses to text input.
Kodumaro is going Mastodon!
Tags: socialmedia, mastodon
Published: 2022-12-22 21:00:09

Read the origin at [Kodumaro](https://kodumaro.cacilhas.info/2022/12/mastodon.html).


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

Kodumaro [Twitter account](https://twitter.com/kodumaro) has been deactivated, and we’re going [Mastodon](https://social.sndevs.com/@kodumaro) now!

[Mastodon](https://joinmastodon.org/) is a microblog kinda like [Twitter](https://twitter.com/). Its head difference from Twitter though is that Mastodon is **federated**, it means, there’s no central service. There are lots of servers talking to each other, each one following its own rules, so nobody can own the network.

We’d like to invite you to get in. You can do it by signing up one of the servers listed [here](https://joinmastodon.org/servers).

I created my personal account at [Mas.to](https://mas.to/), but I believe [FOSStodon](https://fosstodon.org/) could be a good choise as well.

You can find us searching for [`@kodumaro@social.sndevs.com`](https://social.sndevs.com/@kodumaro).
Why you should learn react
Tags: react, javascript, framework, webdev
Published: 2022-12-22 20:58:51

React is a popular JavaScript library for building user interfaces and has gained a lot of popularity in recent years. If you're considering learning React, here are a few reasons why it might be worth your time:

1. Widely used in industry: React is used by many well-known companies, such as Facebook, Netflix, and Airbnb, so learning it can make you a valuable asset in the job market.

2. Provides a stable codebase: React uses a virtual DOM (Document Object Model) to optimize updates to the actual DOM, which means that your code will be more stable and less prone to bugs.

3. Easy to learn: React has a gentle learning curve and uses a declarative syntax, which makes it easy for beginners to understand. Plus, there are plenty of resources available to help you learn, including official documentation, online tutorials, and video courses.

4. Reusable components: One of the key features of React is the ability to create reusable components, which can save a lot of time and make your code more organized. This is especially useful when building large, complex applications.

5. Strong community support: React has a large and active community of developers, which means that you can find help and support whenever you need it. There are also many resources available, such as open-source libraries and tools, that can help you get up and running with React quickly.

In summary, learning React can be a great investment of your time because it's widely used in industry, provides a stable codebase, is easy to learn, allows for the creation of reusable components, and has strong community support. So if you're interested in front-end web development, give React a try!
What is the difference between .textContent, .innerText, and .innerHTML?
Tags: beginners, javascript
Published: 2022-12-22 20:53:45

Hi! My name is Nadia and I'm currently a student enrolled in the Software Engineering program at Flatiron School. 

I just started a few weeks ago and it's been a whirlwind! So much information to digest! 

One thing I've noticed is that there are so many different ways to accomplish one goal. 

For example, to "set" or "retrieve" the text content of an element, you can use either `.textContent`, `.innerText`, or `.innerHTML`.

Builtin.com has a great article that breaks down the differences:

- "`.innerHTML` allows you to see exactly what is in the HTML markup contained within a string."

What this means is that when you call `.innerHTML` it will return the string and any HTML markup contained within the string. 

- "`.innerText` approximates the 'rendered' text content of a node and is aware of styling and CSS."

- "`.textContent` retrieves and sets the content of the tag as plain text."

At first glance, it seems like `.innerText` and `.textContent` are exactly the same. The author of this article goes on to explain that the difference is that `.innerText` is aware of the rendered appearance while `.textContent` is not. 

What you'll want to use depends on what you want to be able to see! 

Referenced Article: https://builtin.com/software-engineering-perspectives/innerhtml-vs-innertext
Add Snow to Your Website with Snowify: 2 lines of JavaScript
Tags: javascript, christmas, snow
Published: 2022-12-22 20:48:43

It's the holiday season and what better way to get into the festive spirit than by adding some snow to your website? With **Snowify**, a small JavaScript library, you can easily add a snow effect to any website by simply inserting two lines of code in the head of your HTML file.

To use **Snowify**, first, you need to include the library in your HTML file. You can do this by adding the following script tag in the head of your HTML page:

```
<script src="https://gauravkrp.com/snowify.min.js"></script>

```
Next, you need to **initialize** the snow effect by calling the `initSnowify()` function. You can do this by adding the following script tag in the head of your HTML file:

```
<script>
  initSnowify();
</script>
```
This will use the default values for the snow effect, which include a **white color** and a count of **200 snowflakes**. You can **customize** the snow effect by passing an options object to the initSnowify() function. Make sure that this function get called only after DOM is loaded, so you might need to move this piece of code to the footer or before body closing tag.

For example, you can specify the color of the snowflakes by using the `snowColor` property:

```
<script>
  initSnowify({
    snowColor: 'offWhite',
    snowCount: 100
  });
</script>
```
The snowColor property can be set to one of the following values: `white, offWhite, veryLightBlue, lightBlue, and blue`. The default value is `white`.

You can also customize the number of snowflakes to display on the screen by using the snowCount property. The `snowCount` property can be set to any positive integer. The default value is `200`.

`Snowify` is a simple and easy-to-use JavaScript library that lets you add a snow effect to any website. It's a fun and festive way to celebrate the holiday season and bring some cheer to your website. **Snowify** your website today and spread the holiday cheer!

PS - This entire article was written by [chatGPT](https://chat.openai.com/chat) and the cover image was generated by [DALL.E 2](https://openai.com/dall-e-2/) :-) 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsetjilyecju1v565t42.png)
Happy Holidays!!
Higher Order Functions in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-12-22 20:43:04


## Introduction

Higher order functions are functions that take other functions as arguments or return them as output. They are an important concept in functional programming and can be used to greatly simplify and improve the readability of your code.

## Using Higher Order Functions
One of the most common ways to use higher order functions is to pass in a function as an argument to another function. For example, the <code>Array.prototype.map</code> method is a higher order function that takes a function as an argument and applies it to each element in an array, returning a new array with the transformed elements.

Here's an example of using map to double the values of an array:

```javascript
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(number => number * 2);

console.log(doubled); // [2, 4, 6, 8, 10]
```

Another common higher order function is <code>Array.prototype.filter</code>, which takes a function as an argument and returns a new array with only the elements that pass the test implemented by the function.

Here's an example of using <b>filter</b> to return only even numbers from an array:

```javascript
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter(number => number % 2 === 0);

console.log(evens); // [2, 4, 6, 8, 10]
```

## Creating Higher Order Functions
In addition to using higher order functions that are built into JavaScript, you can also create your own higher order functions.

Here's an example of a higher order function that takes a function as an argument and returns a new function that will always return the opposite boolean value:

```javascript
function negate(func) {
  return function(...args) {
    return !func(...args);
  }
}

const isPositive = number => number > 0;
const isNotPositive = negate(isPositive);

console.log(isPositive(1)); // true
console.log(isNotPositive(1)); // false
```

Higher order functions can also return functions as output. Here's an example of a higher order function that takes a string and returns a function that will always return that string:

```javascript
function always(str) {
  return function() {
    return str;
  }
}

const sayHello = always('Hello');

console.log(sayHello()); // 'Hello'
```

## Conclusion
Higher order functions are a powerful tool in JavaScript that can be used to greatly improve the readability and maintainability of your code. Whether you're using built-in higher order functions or creating your own, they are an important concept to understand in functional programming.
What field to switch to after a couple of years of full stack web development?
Tags: help, webdev, javascript, ai
Published: 2022-12-22 20:02:37

I'm currently working for a US streaming company as a full stack developer. Node on the backend, react on the frontend. I feel like i'm fairly successful in my career but after 7 years i'm getting bored of web development and javascript in general.

I'm trying to change my field now, I just want to start a discussion here about what could be the next steps for someone with a web development background like me. I've been thinking to do something AI related but to be honest i have no idea currently how that works.

Do you guys have recommendations for career paths for me? If yes could you please elaborate what steps i could take to be successful in that career?
Pagination Concept using JavaScript
Tags: javascript, programming, tutorial, webdev
Published: 2022-12-22 20:01:32

**Pagination** is basically dividing the entire data into parts of some specific size and showing one part or set of data on one page. To view other set of data we simply change the page.

For Example: 
Let say we have a website which shows information of the users.
So, when we make an API request we get data of all the users, if we display all the users data on single page then it is not a good practice thus we use pagination in which we display fixed numbers of users on one page and if we want to see other users the we change the page.

**Types of Paginations**
There are two ways to do pagination 
1). _At Client Side_ -> The example above is client side pagination. In client side pagination we fetch all the data from the server and put pagination logic on client side. But if the dataset is very large then we require large space to store it.

2). _At Server Side_ -> 
In server side pagination we put the logic of pagination on the server side and get fixed amount of data from the server itself for every page, but the main issue with server side pagination is calling an API for every page change.

**_In this blog we look the concept of pagination using Javascript._**

Let say we have an array of 20 items 
data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].
consider this **data** array the data which we are getting form the Api [Client Side] or the data which is stored in the database[Server Side].

we will try to understand the logic of pagination using this data array.
For pagination we need to have some variables
a). **total_no_of_items** -> It refers to total number of items, which in this case is **20** [data.length = 20].
b). **items_per_page** -> Items which we want to be displayed on one page, let say we want 5 items per page.
c). **no_of_pages** -> It refers in how many pages we can divide our entire data.

In this case
> no_of_pages = total_no_of_items / items_per_page
[20 / 5 = 4]
no_of_pages = 4


d). **page_number** -> The page number which we are currently on.

These are the items which a particular page number will have for the above case
> Page 1 -> [1 - 5]
> Page 2 -> [6 - 10]
> Page 3 -> [11 - 15]
> Page 4 -> [16 - 20]

If we are on page_number 3, so we have [11 - 15] displayed.
Let's look at the logic
**items_to_skip** =  (page_number - 1) * items_per_page 
[(3 - 1)*5 = 10] 
Thus we need to skip 10 items, and we have to show 5 items per page. 
So we can do,
items = data.slice(items_to_skip, items_to_skip + items_per_page)
items array will have the items numbered from [11 - 15].

**Code**

```
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const total_no_of_items = data.length;
const items_per_page = 5;
let no_of_pages = total_no_of_items / items_per_page;
let page_number = 3;

const items_to_skip = (page_number - 1) * items_per_page;
const items = data.slice(items_to_skip, items_per_page + items_to_skip);
console.log(items)
```

Output

> [11, 12, 13, 14, 15]
Exvcr usage recommendations - http testing
Tags: elixir, testing
Published: 2022-12-22 20:00:53

Exvcr records your http requests into a text file that you can commit and replays when running tests later. It also offers an inline stub functionality to avoid having to manage cassette files.

Here is how I recommend using it:

1. Manually capture requests and responses using console and use inline stubs only 
2. Implement a test support module which uses environment variables for secrets and includes helper functions for invoking each endpoint and outputting request and response to stdout
3. Match on request body and url params to ensure your code is generating the right parameters
4. Let your code under test accept a  recv timeout argument. Use artificially short timeouts in console and capture the example responses for online stubs.
Python-Training
Tags: python, beginners, programming, codenewbie
Published: 2022-12-22 19:23:45

Dear, everyone. 
This is second step of "HackInScience Python Exercises" series.
I've finished all the trianing exercises and share them on my [Github](https://github.com/levintech/HackInScience).

1. Distance
2. Check if a number is prime
3. Sum of every prime number below n
4. Print every prime numbers in a range
5. Next prime
6. The Fibonacci sequence
7. Exceptions
8. Display the date and time
9. Print the content of a file
10. Pernicious numbers
11. Product of iterable
12. Count the lower 'e' in the 'words' file
13. Is divisible by ?
14. Frequency of letters in a file
15. Doing HTTP requests
16. Largest product in a series
17. Lambda expressions
18. Longest Collatz sequence
19. Largest product in a grid
20. CSV and Python
21. Pascal's triangle

Hope my work would be little bit helpful for python beginners.
To encourage me to continue, please follow me on [Github](https://github.com/levintech)

Best Regards.
React · Prop drilling es una mala práctica?
Tags: react, frontend, webdev, bestpractices
Published: 2022-12-22 19:59:55

El "tunelamiento" de props en React es una técnica para pasar props a través de componentes que no necesariamente necesitan esas props o incluso son conscientes de ellas. Esto es útil cuando quieres reutilizar un componente en diferentes contextos y necesitas modificar su comportamiento o aspecto sin tener que crear componentes completamente nuevos.

Para hacer el "tunelamiento" de props, puedes usar un componente intermediario que recibe las props que quieres "tunelar" y luego las pasa a su componente hijo. Por ejemplo:

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

En este ejemplo, `MyButton` y `MyLink` son componentes que no necesitan conocer la propiedad color o las propiedades relacionadas con enlaces (href, target, etc.). Sin embargo, al "tunelar" las props a través de ellos, se pueden usar de la misma manera que si fueran componentes que sí conocieran esas propiedades.

### Hay varias formas de evitar el "tunelamiento" de props en React:

1.- Usa un componente especializado: en lugar de crear un componente genérico que se reutilice en diferentes contextos, crea componentes especializados que estén diseñados para manejar las props específicas que necesitan. Por ejemplo, en lugar de usar un componente genérico para crear botones y enlaces, crea componentes especializados como RedButton y ExternalLink que manejen sus propias propiedades.

2.- Usa la destructuración de props: en lugar de pasar todas las props a un componente hijo, puedes destructurar las props que necesitas y pasarlas individualmente. Esto hace que sea más fácil ver qué props están siendo utilizadas y por qué.


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

3.- Usa la composición en lugar del "tunelamiento" de props: en lugar de pasar props a través de componentes intermediarios, puedes usar la composición para combinar componentes de manera más controlada. Por ejemplo, en lugar de crear un componente genérico que se reutilice en diferentes contextos, puedes crear componentes especializados y combinarlos mediante la composición


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

> Es importante tener en cuenta que no hay una solución única para evitar el "tunelamiento" de props y que la mejor opción dependerá de las necesidades de tu aplicación. Por lo tanto, deberías evaluar cuál de estas opciones es la más adecuada para ti en cada caso.

[☕ Invitarme un café](https://www.buymeacoffee.com/manuelmorales)
From Novice to Top Performer: How I Rose to the Top 0.76% of 73 Million Developers
Published: 2022-12-22 19:54:14

Bimasha is extremely proud to announce that she has recently achieved a ranking in the top 0.76% of 73 million developers worldwide. This accomplishment has been a long time coming and required a lot of hard work and dedication on her part.

To give some context, Bimasha began her journey as a developer several years ago. She was drawn to the field because of her love for problem-solving and her desire to create things that could make a positive impact on the world. She knew that becoming a successful developer would be no easy feat, but she was determined to put in the time and effort necessary to achieve her goals.

As Bimasha progressed in her studies and began working on real-world projects, she quickly learned that the world of development is extremely competitive. There are so many talented individuals out there, all striving to make a name for themselves in this ever-evolving field.

Despite the challenges, Bimasha remained focused and committed to improving her skills. She spent countless hours learning new technologies, studying best practices, and participating in online communities to stay up-to-date on the latest trends and techniques. She also sought out opportunities to gain practical experience through internships and side projects, which helped to round out her knowledge and skillset.

And all of that hard work paid off when Bimasha recently learned that she had achieved a ranking in the top 0.76% of 73 million developers worldwide. This is an incredible accomplishment for her, and one that she is extremely proud of.

Bimasha knows that she still has a long way to go in her journey as a developer, but this ranking serves as a reminder that hard work and dedication can lead to great things. She hopes that her story will inspire others to pursue their dreams and never give up, no matter how difficult the road may seem. She is grateful for all of the support and guidance she has received along the way, and is excited to see what the future holds as she continues to grow and develop as a developer.