teleren/devto huggingface dataset:
Advent of Code 2021: Day 01 with Python and numpy's convolution function
Tags: adventofcode, python
Published: 2021-12-01 13:10:36

[Link to challenge on Advent of Code 2021 website](https://adventofcode.com/2021/day/1)

## Loading the data
Loading the data is straightforward with numpy, which by default can load new-line separated numbers into a numpy array and do the string-to-number conversion in one go:

```py
import numpy as np

lines = np.loadtxt("day_1.txt")
```

## Part 1
Part 1 involves finding how many numbers in a list are greater than the previous number. With Numpy, this is actually quite simple, because it'll do element-wise calculations on whole lists for you.

So writing `lines[1:] > lines[:-1]` means "do the greater-than comparison for each element on a list that is a shifted version of the data and itself (minus the last element, to match up the lengths)". The result is an array of True or False depending on whether that position had an increase or not. We can sum those (effectively counting the True values) to find the result:

```py
increases = (lines[1:] > lines[:-1]).sum()
```

## Part 2
In part 2, the question introduces a sliding window sum to smooth out the values. The task is to check if the sliding window sum goes up or down. An easy way to implement this is to recognize that a sliding window is a convolution operation with the kernel `[1, 1, 1]`. The `"valid"` argument ensures there's no extra padding either side the result, so it's the same size as the input data.

```py
convolved = np.convolve(lines, [1, 1, 1], "valid")
```

The result is an array containing the moving window sums, which we can compute the number of increased values like before:

```py
increases = (convolved[1:] > convolved[:-1]).sum()
```

## Part 2 alternative solution
Another way to approach Part 2 is to realize that comparing two sliding windows is the same as comparing the unique values in them. If I were to write out the calculation going on, it would look like:

```py
a[i+1] + a[i+2] + a[i+3] > a[i] + a[i+1] + a[i+2]
```

It can be seen that a[i+1] and a[i+2] appear on both sides, and therefore cancel out, leaving just `a[i+3] > [ai]`. Therefore Part 2 can be achieved using the same element-wise calculation as Part 1, by shifting the lists by 3 rather than 1, skipping needing to do any convolution:

```py
increases = (lines[3:] > lines[:-3]).sum()
```

## Full code:
```py
import numpy as np
lines = np.loadtxt("day_1.txt")

increases = (lines[1:] > lines[:-1]).sum()
print("Part 1 result:", increases)

increases = (lines[3:] > lines[:-3]).sum()
print("Part 2 result:", increases)
```
REact routing not work
Tags: reactroute
Published: 2021-12-01 13:08:25

Hello,

i am new for React.js. I need your help...
i have created login, registration, forgot and Dashboard pages.
and route worked perfectly 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si04wx9sbhkm46faji06.png)

In dashboard i have created three components Like Navarea wrapper(content display area) and Sidebarmenu

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpbk729p5amfmlxzzihy.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hib0fez9uy5i0zlczosc.png)
now i want to route Navarea links and component display in wrapper(content display area) like About page 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncptyxvmqazd1ctgo1fw.png)
 
I am trying but Navarea links not working i have share below screen 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5qa9aky6gvrytm5rqda.png)
could you help me where i am doing wrong
Flutter App for AWS whitepapers and Guides
Tags: showdev, flutter, android, aws
Published: 2021-12-01 13:03:58

After around 2K lifetime downloads and 600 daily active users, the flutter app to browse, read, save and download AWS whitepapers and guide is now open-sourced.

This is a reference mobile app of AWS whitepapers and guides website. 

[View Code at Github](https://github.com/99darshan/aws_whitepapers_guides)

[Download App on Play Store](https://play.google.com/store/apps/details?id=np.com.a99darshan.aws_whitepapers_guides&hl=en)
help with react and spring boot
Published: 2021-12-01 13:02:57

Hi, 
I'm having trouble solving mapping issues in one of my components, the error is: TypeError: tasks.map is not a function.

   9 | {tasks.map((task) => (             
  10 |        <Task
  11 |            key={task.id} 
> 12 |            task={task} 
  13 |            handleTaskClick={handleTaskClick} 
  14 |            handleTaskDelition={handleTaskDelition} 
  15 | 


where do I start looking for the solution?
error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined
Tags: reactnative, javascript, node
Published: 2021-12-01 12:40:31

I got this error when trying to build my react native app after doing installs of node and npm. My machine was running nodejs v17(currently latest) and this was the issue. 
The solution is to uninstall nodejs, then download and install a lower version and for my case i installed nodejs v16.13.0 which solved the error.
Hope this helps you,
Happy coding
How should one approach learning Kafka and implement side projects on it?
Published: 2021-12-01 12:23:06

I'm trying to learn distributed systems and build some knowledge base on it and first thing I thought based on reading and googling was Kafka and Zookeeper.
I'm following Stephen Marek course on Kafka but not sure as to how should I implement side projects or use cases ?How does one approach learning Kafka and implementing it in side projects or any open source projects?

Any references for learning Kafka zookeeper or distributed systems are Highly appreciated
Terraform Integrated with GitHub Actions to setup Argo CD on Civo
Tags: actionshackathon21
Published: 2021-12-01 12:22:46

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)


### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

**_Terraform Integrated with GitHub Actions to setup Argo CD on Civo._** 
Wohho! Wait! What is this? So let me explain a bit about this tools. 

1. **Argo CD** : ArgoCD is a GitOps tool that helps with your GitOps workflows. ArgoCD can be used as a standalone tool or as a part of your CI/CD workflow. ArgoCD works with Git as a source off truth, with current Kubernetes manifests, or with Helm charts.

2. **Terraform** : Terraform is an infrastructure as code (IaC) tool that allows you to build, change, and version infrastructure safely and efficiently.

3. **Civo** : Civo is the first cloud native service provider powered only by Kubernetes. Blazing fast cluster launch times in under 90 seconds and simplified developer experience.

So now you have some overview of what does these tools do! 

### Architecture

![Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqtfxy3pgjtglm49axl0.gif)

Here in my project I have tried to integrate these tools. So, the workflow is created using terraform with github actions which is used to launch the kubernetes cluster on CIVO with Argo CD preconfigured. And after configuration we as developers only need to write Kubernetes manifests file rest work will be done by Argo CD! Seems cool!!

### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)

Wacky Wildcards

### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)

GitHub Repository : 
{% github https://github.com/Vrukshali-26/ArgoCD-setup-on-Civo-using-Terraform-GitHub-Actions %}
Wednesday Links - Edition 2021-12-01
Tags: java, kafka, architecture, hibernate
Published: 2021-12-01 12:11:33

GC progress from JDK 8 to JDK 17 (7 min)📈
https://kstefanj.github.io/2021/11/24/gc-progress-8-17.html

A tale of Java Hash Tables (35 min)#️
https://www.andreinc.net/2021/11/08/a-tale-of-java-hash-tables

How compilers work: from source to execution (4 min)📜
https://nurkiewicz.com/59

Welcome to Fleet! (1 min)🛰️
https://blog.jetbrains.com/blog/2021/11/29/welcome-to-fleet/

You Can't Buy Integration (6 min)🔌
https://martinfowler.com/articles/cant-buy-integration.html

IntelliJ IDEA 2021.3 is here (30 sec) ✨
https://twitter.com/intellijidea/status/1465726428184399879

O Kafka, Where Art Thou? (7 min)💫
https://www.morling.dev/blog/kafka-where-art-thou/

Kafka Streams with Quarkus (11 min)🏞️
https://piotrminkowski.com/2021/11/24/kafka-streams-with-quarkus

Hibernate goes Reactive - What Does That Mean? (4 min)⚛️
https://www.i-programmer.info/news/80-java/15025-hibernate-goes-reactive-but-what-does-that-mean.html
DEV_LOG_1: React scripts something is already running on port 3000 
Published: 2021-12-01 12:01:32

## Introduction
Hi guys! I'm a full stack developer and recently I decided to start logging errors, bugs and cool stuff I come across. Today I noticed an error I usually come across from time to time when working with React-scripts or NodeJS.
`Something is already running on Port 3000`
This is how I usually fix it 🧘🏾‍♂️

### Step 1: Identify the culprit
Whenever you see this error, it simply means that there's an active process using this port. Usually for me, it's a previous node project that didn't close properly. To identify what it is just use this command.

**For windows**
`netstat -ano | findstr :3000`

**For Linux (and Mac)**
`sudo lsof -i tcp:3000`

This bring up the running process along with its PID (the number at the end or with PID above it)

### Step 2: Kill the culprit
Next we have to end the running process.
**For windows**
`tskill @yourPID@`
_If you're using git bash then replace `tskill` with `taskkill`_

**For Linux (and Mac...)**
`sudo kill -9 @yourPID@ `

@yourPID@ is the PID number you got from the previous command. Also, you should write it all yourself instead of copying and pasting because that usually leads to more errors

### You're done! 🎉
And that's it folks! See you next time and have a Merry Christmas 💃🏾💃🏾💃🏾
Pepper - open source Chatroulette app
Tags: go, flutter, android, ios
Published: 2021-12-01 11:56:44

[Edit]: I finished it!
Download: https://play.google.com/store/apps/details?id=pepper_client.pepper_client.pepper_client
Source code: https://github.com/lorenzotinfena/pepper-client

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


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


This app us built in go (server) and flutter (app ios and android), it used grpc for apis, and remote container extension for development of the server (using docker)

The app is not yet puclished, and i think im not going to add ads inside, only donations, so it will be free, i think i will publish it only on play store due app store restrictions for chatroulette apps

https://github.com/LorenzoTinfena/pepper-client
https://github.com/LorenzoTinfena/pepper-server
Build a Native App from Angular Projects with Capacitor
Tags: angular, capacitor, android, ios
Published: 2021-12-01 11:32:24

**Follow below step to create mobile app using your angular project**

1. npm install @capacitor/core
2. npm install @capacitor/cli --save-dev
3. npx cap init
4. ng build --prod
5. npm install @capacitor/android
6. npm install @capacitor/ios
7. npx cap add android
8. npx cap add ios
9. npx cap sync
10. npx cap run android
Whats your opinion on NestJS over Express?
Tags: node, javascript, devops, webdev
Published: 2021-12-01 11:14:59

Hi, for the past few years I have been using in my commercial and side projects Express.js as the main framework for the backend. However, I found NestJS to be more complete and ready to work on a project out-of-the-box without picking up orms, template engines and so on. With express it's not that much work but requires to keep maintainance on each dependency individually rather than a single NestJS version.

What's your opinion on NestJS? Did you try this and return to Express? What's your thoughts?
Day 52 of 100 Days of Code & Scrum: Back From Break, Now Stuck on next/image Static Page Issues
Tags: 100daysofcode, beginners, javascript, productivity
Published: 2021-12-01 11:07:55

Hello there, everyone!

It's been 2 days since I last posted on my blog. I was preoccupied with personal life issues, so I was unable to code and interact on social media platforms. It does feel great to get back to coding and blogging again!

Anyway, let's move on to my daily report!

## The Past 2 Days

Unavailable because of personal issues.

## Today

Here are the things I learned and worked on today:

### Company Website

- add blurDataURL image placeholders while the actual image is still loading for a better user experience.
- add horizontal rules for section headings.
- fix text overflow on the hero banner.
- updated text color for contact form success message and async button loader for contact form submit.
- setup Netlify deployment (WIP).

I got stuck on this bug:

`Error: Image Optimization using Next.js' default loader is not compatible with next export`

I still don't fully understand why this is the case, but if I am not mistaken, it has to do with `next/image` not working with static pages. I hope I figure it out tomorrow. I might just use `next-optimized-images` library.

### Scrum

- I did some practice flashcards for Scrum.
- reviewed some of the things I've learned before.

Thank you for reading! I hope everyone's doing well.

![Rammina Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

### Resources/Recommended Readings

- [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images)
- [Scrum Master learning pathway | Scrum.org](https://www.scrum.org/pathway/scrum-master)
- [The 2020 Scrum Guide](https://scrumguides.org/scrum-guide.html)
- [Mikhail Lapshin's Scrum Quizzes](https://mlapshin.com/index.php/scrum-quizzes/)

### DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

### Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com/"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
Music Visualiser with Three.JS
Tags: javascript, webdev, tutorial, programming
Published: 2021-12-01 11:02:12

  In an attempt to learn THREE.js — the 3D rendering WebGL framework and WebAudio API, I made something that visualises the music in a very simple way. This article documents the whole process.
Final thing first:

{%youtube n3rkF0el0AQ%}


(Just use a .mp3 / .mp4 / .wav file to see it work. If you are out, you can use this)
A Primer on WebAudio API
The HTML5’s <audio> tag when combined with the WebAudio API, becomes quite powerful. It’s a dynamic tool that lets you process and adds audio effects dynamically to any kind of audio.


The Web Audio API involves handling audio operations inside an audio context and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

The audio pipeline starts by creating an audio context. It should have at least a single audio source — which can be thought of as an entry point for external files, mic input, oscillators, etc. Once we have a source in place, the signal is processed and moved ahead in the pipeline using audio nodes. After processing, the signal(s) are routed to the audio destination, which can only be a single one in the whole context.

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


Modular Routing

The simplest illustration has a single source and a destination, without any effects or processing, inside the context. Why would anyone use this? Maybe they just want to play the sound without any changes.

On the left is an example of a much more complex setup, which can also be made using this API.

{%youtube n3rkF0el0AQ%}

Refer the complete article here:- https://www.epicprogrammer.com/2021/11/music-visualiser-with-threejs-web-audio.html
Content Inspired by [Epic Programmer](youtube.com/c/epicprogrammer?sub_confirmation=1)
No code ML with Amazon SageMaker Canvas
Tags: machinelearning, aws
Published: 2021-12-01 10:50:06

**No code ML** is an approach to build an ml based models without doing any heavy data work or ml coding .

**No code ML  platforms** designed for business users or analysts with the domain knowledge of the overall workflow  but thus business users have less or no  coding experience.

**AWS SageMaker Canvas**  is  No code ML platform.

before you go to AWS SageMaker Canvas .. you must make sure you know at high level how  the ML workflow looks likes

there is 4 main phases :
**phase-1 :** gathering , ingestion , extraction of data 

**phase-2 :** data exploring , understanding , cleaning , transforming and pre-processing ( why i put thus in one phase its coz the more you understand the data the better you can pre-process it and feature engineer it )

**phase-3 :** modeling ( training and validation )

**phase-4 :** serving and monitoring

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

**according to above let see simple ML project story**

a simple ML project story you team (jason is data eng , ali is data scientist , jack is ml researcher , mamon is ml engineer ) 
jason setup data pipeline that start by collecting and storing and organizing cataloging  the data and make it ready for consuming by others, ali gathered some data from data from sources that jason already maintain , and now ali explored data and you clean it and make some  preprocessing and feature engineering on the data and delivered it to jack.

jack started to split data and do modeling and training and benchmarking now jack deliver  a trained model  with it artifact to mamon.

mamon validate the model build the serving service and push the model to production.

now imagine that with  AWS SageMaker Canvas  you can do (ali , jack ) work with simple clicks and no deep coding knowledge.
 
**let see how**

{% youtube m6VBT0-m0SY %}
Free courses for December
Tags: hacking, linux, python
Published: 2021-12-01 10:49:27

**Ethical Hacking**[
Ethical Hacking: Hacking with Python](https://www.udemy.com/course/ethical-hacking-hacking-with-python/?couponCode=REDAPPLE)[
Ethical Hacking: Network Attacks](https://www.udemy.com/course/ethical-hacking-network-attacks/?couponCode=REDAPPLE)
[Ethical Hacking: John the Ripper
](https://www.udemy.com/course/ethical-hacking-john-the-ripper/?couponCode=REDAPPLE)

**Python**[
Excel Files with Python](https://www.udemy.com/course/excel-files-with-python/?couponCode=REDAPPLE)
[Python Performance Optimization](https://www.udemy.com/course/python-performance-optimization/?couponCode=REDAPPLE)[
Create Snake with Python PyGame](https://www.udemy.com/course/create-snake-with-python-pygame/?couponCode=REDAPPLE)

**Linux**[
Linux Desktop Automation](https://www.udemy.com/course/linux-desktop-automation/?couponCode=REDAPPLE)
[Linux awk tutorial](https://www.udemy.com/course/awk-tutorial/)
[Redis database tutorial
](https://www.udemy.com/course/redis-database-tutorial/)
Short note of Python
Published: 2021-12-01 10:46:56

Python is a widely-used, interpreted, object-oriented, high-level programming language used for general-purpose programming. It was created by Guido van Rossum and first released on February 20, 1991.

Python is an easy and intuitive language. It is open-source code.
Python became popular because it is easy to learn, easy to use, easy to understand. It is a good choice for web and internet development, software development, creating games and websites.
Python Programming Language is well suited for beginners and experienced programmers with other programming languages like C++ and Java.
Python is a general-purpose language, meaning it can be used to create various programs and is not specialized for any specific problems.
Python is used globally to design and build 2D imaging software like GIMP, Paint Shop Pro. Also, Python is used in several 3D animation packages such as Blender, Houdini, 3ds Max.
Información sobre Alicante en internet
Tags: tourism, information, holidays
Published: 2021-12-01 10:44:45

Llevo muchos años yendo a Alicante de vacaciones porque es una provincia que tiene muchísimo que ofrecer. No hace falta irse al otro lado del mundo para encontrar un lugar con un sinfín de ofertas de ocio, cultura, gastronomía y mucho más. Si buscas la información sobre Alicante adecuada, puedo garantizarte que puedes disfrutar de unas grandes vacaciones por aquí. 

Mira, por ejemplo, en la web de [https://www.alicantexiste.es](https://www.alicantexiste.es), yo es donde encontré toda la **información sobre Alicante** que me ha permitido, todos estos años, disfrutar de esta provincia como si fuera un local más.

En esta web encontrarás el más amplio directorio de números de teléfono y direcciones postales de todo tipo de negocios, ¿sabes? Es decir, si estás buscando el número de un restaurante, un electricista, un fontanero, un abogado, un hotel o lo que sea, lo encontrarás. ¿Ves lo que quiero decir con esto? Que la información sobre Alicante que ofrecen es útil tanto para locales como para turistas.