teleren/devto huggingface dataset:
My first Vue app
Tags: beginners, vue, codenewbie
Published: 2022-09-28 12:27:20

## Introduction
I am a "codenewbie", currently I am learning Vue, because of my job as a junior developer.

## My thoughts about Vue
I like Vue, it feels pretty straightforward and easily understandable until now. I have started learn React a little and Vue feels simpler, more beginner friendly. 

## Learning Process
I have started to watch some tutorials on youtube. I have learned the basic concepts and I really wanted to try to create something by myself and not following the tutorial always.

I have an older Number Guessing Game, where I used pure JS. So it was perfect to re-write that in Vue and implement everything I have learned until now.

## Result
I managed to re-write the game in Vue. I used 3 different components (start, guess,scene). The different component appears depend on the process in the game. I used the most popular v-directives (like v-if, v-for), some click events and props. 
In the end I managed to make the game and it is working nice.

See more here
https://github.com/ViktoriaBors/frameworks/tree/main/Vue/number-guessing-game

## What next?
Going forward with the tutorials and dig into routing and fetching data.
Exclude lombok generated code from test coverage (JaCoCo/SonarQube)
Tags: java, testing, productivity
Published: 2022-09-28 12:08:40

[Lombok](https://projectlombok.org) is an amazing library that reduces boilerplate code in Java thanks to annotations processed at compile time. I use it heavily in my personal and professional projects.

I recently discovered a downside though: lombok generated methods are considered "regular" code by the coverage libraries. If you have lots of them, the coverage reported by JaCoCo or SonarQube can thus be wa(aaaa)y lower than expected.

## Example problem

Take the following class:
```java
@Data
@Builder(toBuilder = true)
@NoArgsConstructor
@AllArgsConstructor
public class Example {
  @Builder.Default
  private String foo = "";
  @Builder.Default
  private String bar = "";

  public String foobar() {
    var sep = foo.isBlank() || bar.isBlank() ? "" : "_";
    return foo + sep + bar;
  }
}
```

We write the following test, which is not very elegant but **covers all the lines**:
```java
class ExampleTest {

  @Test
  void fooBar() {
    Map.of(
        Example.builder().build(), "",
        Example.builder().foo("foo").build(), "foo",
        Example.builder().bar("bar").build(), "bar",
        Example.builder().foo("foo").bar("bar").build(), "foo_bar"
    ).forEach((example, expected) ->
        assertThat(example.foobar()).isEqualTo(expected));
  }
}
```

Using JaCoCo, the reported coverage is however **as low as 33%** ! 

![Total Coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okco7qgy636ilmgq2pb6.png)

![Low Coverage of Example class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etqg9ft82f7lgntrkigo.png)

## Solution

To fix this, we need a way to tell JaCoCo to ignore lombok generated code. This is possible by instructing lombok to annotate all the generated methods with `@lombok.generated`, which JaCoCo will ignore automatically.

Create a `lombok.config` file with the following:
```properties
# This tells lombok this directory is the root,
# no need to look somewhere else for java code.
config.stopBubbling = true
# This will add the @lombok.Generated annotation
# to all the code generated by Lombok,
# so it can be excluded from coverage by jacoco.
lombok.addLombokGeneratedAnnotation = true
```

And put it either at the root of your repo, or in the `src/` folder. The only requirement is that all code with lombok annotations is found below or alongside this file. 

And there you have it !
![Real coverage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69z55vfob49w4vfwqe55.png)
16 Youtube channels for devs
Tags: webdev, android, ios, programming
Published: 2022-09-28 12:07:36

Here’s a short list of 16 Youtube channels for developers. Whether you are a junior developer or a tech lead, you’ll be able to learn something new from these channels.

## **For Android developers**
Android Developers
CodingWithMitch


## **For iOS developers**
CodeWithChris
Lets Built That App
Paul Hudson


## **For Web developers**
Clever Programmer
CSS-Tricks
The Net Ninja
Traversy Media
Wes Bos


## **For all developers**
Academind 
Amigoscode
ArjanCodes
ForrestKnight
freeCodeCamp.org
Programming with Mosh


Did you find this useful? There's a lot more tips like this in our **[Codacy Community](https://community.codacy.com/)** - with over 500+ developers worldwide. Check it out, it's free to join!
Intersection of Array
Tags: javascript, leetcode
Published: 2022-09-28 12:06:53

Input: nums1 = [4,9,5], nums2 = [9,4,9,8,4]
Output: [9,4]
Explanation: [4,9] is also accepted.
```js
/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number[]}
 */
var intersection = function (nums1, nums2) {
  let map = new Map();
  let intersectionArray = [];

  for (let i = 0; i < nums1.length; i++) {
    if (!map.has(nums1[i])) {
      map.set(nums1[i], 1);
    }
  }

  for (let i = 0; i < nums2.length; i++) {
    if (map.has(nums2[i]) && intersectionArray.indexOf(nums2[i]) === -1) {
      intersectionArray.push(nums2[i]);
    }
  }

  return intersectionArray;
};


```
Causal Profiling and Why
Published: 2022-09-28 12:05:57




Notes for interesting lecture on Performance and Profiling.
{% embed https://www.youtube.com/watch?v=r-TLSBdHe1A&ab_channel=StrangeLoopConference %}

- Performance used to be easy (Moore's law) - just wait for hardware to improve and boom, there is a Performance boost

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


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


- Performance may be changed accidentally by input parameters, environment (stack/heap size), link order, function address, cache sizes etc - this is called "Layout change"
- Stabilizer is repeatedly changing all of this things while running and measuring Performance
- Explains something really interesting about "Null Hypothesis Significance" testing.

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

Creating one random Layout and testing is not enough. It's required to do it many times with different Layouts to make sure the improvement is not by chance. 
If the speedup occures in low chance like <0.05 we reject the speedup. 


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

- Profiler - measures end to end runtime of components
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zd7yoen7q3on6192ox9.png)

Profilers are not good at finding out important bottlenecks. Very general.

- Causal Profiler

This is like an oracle saying where to focus Engineering efforts to get whole Performance improvement for the App. 

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

- Virtual speedup - slow other components, this simulates one component being relatively faster.

- you need to mark where to measure ("Progress Point").
Mindbox: Redesigning an automated marketing platform
Tags: design, react, webdev, programming
Published: 2022-09-28 11:47:28

Mindbox is a cloud-based marketing automation platform for client companies. It helps them control email campaigns, set up personalization, and manage loyalty. Mindbox also removes the load from internal IT systems and allows you to transfer the collection, storage, and management of client data to a cloud-based CRM system with convenient management.

Evrone provided three React specialists to help with the website redesign for Mindbox, and for the duration of the project, they became full-fledged members of the team with equal access to repositories and regular one-on-one meetings. [Read the full case study here.](https://evrone.com/mindbox)
Weekly web development resources #117
Tags: webdev, weekly
Published: 2022-09-28 11:29:07



______

##[Pika](https://pika.style/)
[![Pika](https://wweb.dev/weekly/content/117/pika.jpg)](https://pika.style/)
A web app to help you design beautiful screenshots and website mockups.

______

##[Dub](https://dub.sh/)
[![Dub](https://wweb.dev/weekly/content/117/dub.jpg)](https://dub.sh/)
An open-source link shortener with built-in analytics and free custom domains.

______

##[Enhance](https://enhance.dev)
[![Enhance](https://wweb.dev/weekly/content/117/enhance.jpg)](https://enhance.dev)
A web standards-based HTML framework to build lightweight and flexible web applications.

______

##[58 bytes of CSS](https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41)
[![58 bytes of CSS](https://wweb.dev/weekly/content/117/bytes-css.jpg)](https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41)
A simple CSS snippet to make websites it look good on most displays.

______

##[Micro SaaS Ideas](https://microsaasideas.cc/)
[![Micro SaaS Ideas](https://wweb.dev/weekly/content/117/microsaas.jpg)](https://microsaasideas.cc/)
A list of 476 curated ideas across 58 fields to find inspiration for your next project.

______

##[Landing Love](https://www.landing.love/)
[![Landing Love](https://wweb.dev/weekly/content/117/landinglove.jpg)](https://www.landing.love/)
A showcase of the best animation websites.

______

##[No-Signup Tools](https://www.nosignup.tools/)
[![No-Signup Tools](https://wweb.dev/weekly/content/117/nosignup_tools.jpg)](https://www.nosignup.tools/)
A curated collection of web-based products that don't require an account or registration. 

______

##[Practical Deep Learning](https://course.fast.ai/)
[![Practical Deep Learning](https://wweb.dev/weekly/content/117/deeplearning.jpg)](https://course.fast.ai/)
A free course designed for people with coding experience, who want to learn about deep- and machine learning.

______

##[Scraft](https://www.scraft.ai/)
[![Scraft](https://wweb.dev/weekly/content/117/scraft.jpg)](https://www.scraft.ai/)
AI-powered writing tool that helps you craft better arguments by asking questions like Socrates.

______

##[Fockups](https://fockups.com/)
[![Fockups](https://wweb.dev/weekly/content/117/fockups.jpg)](https://fockups.com/)
Mockups to display your design into bad conditions. 

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Formation python compléte & gratuit en version écrite
Tags: python, formation, learn, french
Published: 2022-09-28 11:12:08

Salut les lecteurs aujourdh'ui je vous présente une formation en python compléte et en version écrite sur notre canal Telegram

Cliquer sur un chapitre pour avoir le cours

📣 Programme 
  ├ [Installation python](https://t.me/metacodelearn/185)
  ├ [Présentation de python](https://t.me/metacodelearn/195)
  ├ [Syntaxes de bases](https://t.me/metacodelearn/198)
  ├ [Les variables](https://t.me/metacodelearn/199)
  ├ [les opérateurs de bases](https://t.me/metacodelearn/205)
  ├ [Les listes](https://t.me/metacodelearn/206)
  ├ [Les STRING](https://t.me/metacodelearn/207)
  ├ [Les dates et heures](https://t.me/metacodelearn/208)
  ├ [If & else](https://t.me/metacodelearn/220)
  ├ [Les STRING (2) ](https://t.me/metacodelearn/234)
  ├ [Les paramètres  ](https://t.me/metacodelearn/254)
  ├ [Classes & objets](https://t.me/metacodelearn/265)
  ├ [Les boucles](https://t.me/metacodelearn/265)
  ├ [L'héritage](https://t.me/metacodelearn/297)
  ├ [Les tuples](https://t.me/metacodelearn/305)
  ├ [Les dictionnaires ](https://t.me/metacodelearn/330)
  ├ [JSON ](https://t.me/metacodelearn/364)
  └ [les ensembles & Turtle & thinker](https://t.me/metacodelearn/380)
Ruby require argument keyword
Tags: programming, ruby, beginners, codenewbie
Published: 2022-09-28 10:37:07

Working with Ruby there are times you want a method to have required arguments without chaining multiple `if else` statements

###### A simpler and easy way to handle required arguments is,

```ruby

# define a method with named arguments like this results in an 
# error when name is not provided

def greetGuest(name:)
  puts "Welcome #{name}!"
end

# invoking method without name will throw ArgumentError
greetGuest # ArgumentError: missing keyword: name


greetGuest(name: "Salley" ) # Welcome Salley!

```

###### And even better you can have default arguments like: 
```ruby

def greetGuest(name: "Anonymous Guest")
  puts "Welcome #{name}!"
end

# invoking method without name will use the default argument
greetGuest # Welcome Anonymous Guest!
```


</br>
##### _Enjoy!_
</br>
##### _[Twitter](https://twitter.com/codesalley)_
How to solve Mexican wave algorithm in JavaScript
Tags: javascript, algorithms, programming, tutorial
Published: 2022-09-28 10:28:53

**The Mexican Wave**
The wave (known as the Mexican wave in the English-speaking world outside North America) is an example of metachronal rhythm achieved in a packed stadium when successive groups of spectators briefly stand, yell, and raise their arms. Immediately upon stretching to full height, the spectator returns to the usual seated position.

The result is a wave of standing spectators that travels through the crowd, even though individual spectators never move away from their seats. In many large arenas the crowd is seated in a contiguous circuit all the way around the sport field, and so the wave is able to travel continuously around the arena; in discontinuous seating arrangements, the wave can instead reflect back and forth through the crowd. When the gap in seating is narrow, the wave can sometimes pass through it. Usually only one wave crest will be present at any given time in an arena, although simultaneous, counter-rotating waves have been produced. (Source Wikipedia)

**Task**
Your task is to create a function that turns a string into a Mexican Wave. You will be passed a string and you must return that string in an array where an uppercase letter is a person standing up. 

**Solution**
Before diving into coding make sure to understand the problem and visualize the solution in form of pseudo code, break it down into steps.

**Steps**
1. Create an array to store the results
2. return empty array if the string is empty
3. Loop through the letters in the string
4. Make a copy of the string to an array
5. if there is a space in the string skip that space,
6. Covert each letter of the copied string array to uppercase then join them together as one string
7. then push them to our result array and finally return the result array.

```
const wave=(str)=>{
   let result = [];
   if([...str].length === 0) return [];
   for(let i = 0; i < str.length; i++){
       let copy = str.split('');
       if(copy[i] === ' ') continue;
       copy[i] = copy[i].toUpperCase('');
       result.push(copy.join(''))
   }
   return result
}
console.log(wave('two words'))
/* ["Two words", "tWo words", "twO words", "two Words", "two wOrds", "two woRds", "two worDs", "two wordS"]; */
```
React Js Add Credit Card
Tags: javascript, webdev, programming, react
Published: 2022-09-28 10:23:50

Hi Guys I just recently Finished frotend add credit card information using react js.

It was fun working on this web app. The challenge was actually using html css and javascript on frontend mentor .

incase you don't know what frontend mentor is you can checkout their website https://frontendmentor.io.

So guys please your review on this web app is highly needed.

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

link to project
https://wano-credit-card.netlify.app
Set Up Your Day For Maximum Results!
Tags: productivity
Published: 2022-09-28 10:19:23

This tip can be broken down into 2 parts:
1. What Am I Going To Do Today?!
2. Pyramid Approach!

---

### What Am I Going To Do Today?!
Your day( according to me) is split into three parts( which can be broken down further).
1. Morning( 1:30 hours after bed)
2. Mid-Day( everything in between)
3. Night( 1:30 hours before bed)

**Why Is This Important?**

Well, according to my experiments, you are most productive when you have a clear vision of what you need to do that day.

Take time, during your mornings( you can even implement this in your morning routine), to write down what you need to do that day.
Take your time, maybe everything isn't coming to mind immediately, and look at your tasks twice.

Make a planner( I recommend either using, Google Calendar, Trello, or your notebook), where you write everything down.

And this doesn't have to be only in the mornings. If something comes up, for another day, write it down so you don't forget.

You could also write your tasks before bed( during the Night-Time), but for me, that doesn't have the same effect as writing everything down during the day( but it could do wonders for you, we're all different!)

---

### Pyramid Approach!
After you've written down everything, now it's time to work!

The Pyramid Approach is a name I completely made up, but the idea here is that you start off with the most important/difficult tasks first. Then slowly( one task at a time) move on to the easier ones.

Let's say your tasks are:
1. Make Scripts For YouTube Videos
2. Edit This Week's YouTube Videos
3. Go For A Run( Couldn't think of a task, the idea is that this is a less-important task)

Following the Pyramid Approach, you would finish the tasks in the following order:
1. Edit This Week's YouTube Videos
2. Go For A Run
3. Make Scripts For YouTube Videos

**Hope these tips help!**
Back to Back #16 - Back-end news by SFEIR
Tags: newsletter, french, backend, sfeir
Published: 2022-09-28 09:46:02

_Comme chaque fin de mois, les experts de SFEIR publient la newsletter back-end. Retrouvez la sélection de contenu, les outils coup de cœur et les astuces._

---

## 📰 Articles

### [Java 19 : le point sur les nouveautés](https://k49.fr.nf/java-19-le-point-sur-les-nouveautes/)

La version 19 du kit de développement Java est sortie le 20 septembre 2022, comme prévue. Le Sfeirien Anthony nous fait les tour des nouveautés. Entre autres, le support de l'architecture RISC-V et l'amélioration du pattern matching.

### [How to handle poison pills in Spring Kafka?](https://stephantromer.dev/blog/how-to-handle-poison-pills-in-kafka)

Tout se passe bien dans vos flux de données. Sauf qu'un jour, un message au format inattendu arrive dans Kafka. Cet article explique ce que sont les _poison pills_, comment continuer à consommer des topics malgré ces erreurs et comment récupérer ces messages défectueux dans des _dead letter topics_.

### Detecting Breaking API Changes: Better API Management Through Automation

Pour améliorer l'API sans perturber les consommateurs existants, il est important de savoir si une modification peut causer un breaking change. Dans cette vidéo, on nous parle de différents outils de comparaison pour les spécifications OpenAPI et de la manière dont ils peuvent s'intégrer dans le management des APIs. 

{% embed https://www.youtube.com/watch?v=nhiaJQCyXdw %}

## 🛠️ Outils

### [DevToys](https://devtoys.app/)

DevToys se présente comme le couteau suisse du développeur. Disponible uniquement sous Windows, le logiciel n'a pas besoin d'une connexion Internet pour fonctionner et possède une trentaine d'outils dont un testeur de regex, une convertisseur d'images ou un parseur de crons. DevToys peut détecter automatiquement quel outil est le plus pertinent grâce à la _Smart Detection_.

### simdjson

Les serveurs du monde entier passent beaucoup de temps à parser du JSON. La bibliothèque simdjson utilise des [instructions SIMD](https://fr.wikipedia.org/wiki/Single_instruction_multiple_data) et des algorithmes microparallèles pour battre des records de vitesse. Une douzaine de ports et de bindings ont été publiés en Python, R, Ruby, PHP, C#, Rust, Swift, Go, etc.

{% embed https://github.com/simdjson/simdjson %}

## 💡 Trucs et astuces

Terminons avec ce guide [_Your Makefiles are wrong_](https://tech.davis-hansson.com/p/make/) qui contient différents conseils afin d'améliorer vos Makefile.
Online Clothing Store using the MERN stack
Tags: javascript, node, react, mongodb
Published: 2022-09-28 09:38:46

Online Clothing Store using the MERN stack

![screenshot](https://i.ibb.co/kDtJPNy/clothshop.png)

## Features:

- Product reviews and ratings
- Product pagination
- Product search feature
- User profile with orders
- Full featured shopping cart
- Admin product management
- Admin user management
- Admin Order details page
- Mark orders as delivered option
- Checkout process (shipping, payment method, etc)
- PayPal / credit card integration
- Database seeder (products & users)

## Technology Stack:

- Node js
- Express Js
- MongoDB
- JWT
- React
- React Bootstrap
- Redux
- React Paypal Button V2

Demo: https://clothshopapp.herokuapp.com/
Github Repo: https://github.com/saidMounaim/cloth-shop
Hackathon: Build a space-themed application (and win a MacBook)
Tags: watercooler, challenge, sql
Published: 2022-09-28 09:27:39

Calling all explorers of new worlds to join the first ever Tinybird Hackathon. Your mission is simple: Build a space-themed application using Tinybird (and win some awesome prizes).

**Mission briefing**
Location: Online
Submission time: Due by 11:59 GMT on October 12th, 2022
Supplies Required: [Free Tinybird account](https://auth.tinybird.co/u/signup/identifier?state=hKFo2SBtWFNnTmoyNGNRR2RvMklfVl9QbEJSYUN1TGlmelotWqFur3VuaXZlcnNhbC1sb2dpbqN0aWTZIGJmTTkzRHVtNFkwRzUyNG92RGYybEtydkZnTzBaR2lUo2NpZNkgVDZleGNNbzhJS2d1dlV3NHZGTllmcWx0OXBlNm1zQ1U&utm_source=dev.to&utm_medium=dev.to&utm_campaign=Q3-2022-space-hackathon) & GitHub or GitLab account

**Briefing notes**
Team Size: This is an individual challenge. You’re on your own, Space Ranger.

Streaming Data: You can use your own data, or pull from [this list we’ve compiled](https://www.tinybird.co/events/tinybird-hackathon-resources?utm_source=dev.to&utm_medium=dev.to&utm_campaign=Q3-2022-space-hackathon). Data must not include any PII.

No Limits: You may create anything as long as it uses Tinybird and is space-themed.

Fresh Code: You must create something from scratch. Submissions may be subject to a code-review to be eligible to win.. This is to ensure that all code used is in fact fresh.

Submissions: Log your submissions to Star Command on [this page](https://www.tinybird.co/events/tinybird-hackathon?utm_source=dev.to&utm_medium=dev.to&utm_campaign=Q3-2022-space-hackathon). Each submission should include a well-documented GitHub repo, a working demo app, and a 2-min video demonstration of the app.

IP & Ownership: You own your IP and anything you create using Tinybird.

**Judging criteria**
Submissions will be judged subjectively by a panel of independent developers and data engineers. All of the following factors will be considered when judging whether you’ve completed your mission:

- Functionality: Does it work?
- Documentation: Is it easy to understand what you did?
- Performance: Are queries optimized?
- Aesthetics: Does it look nice?
- Gravity: Does it pull us in with wonder and amazement?

**Prizes**
x1 Grad Prize: MacBook Air
x2 Runner Ups: Keychron K2

**Mission complete?** 
Submit your work on [this page](https://www.tinybird.co/events/tinybird-hackathon?utm_source=dev.to&utm_medium=dev.to&utm_campaign=Q3-2022-space-hackathon).

**What is Tinybird?**
[Tinybird](https://www.tinybird.co/?utm_source=dev.to&utm_medium=dev.to&utm_campaign=Q3-2022-space-hackathon) is a platform that lets you ingest data, shape it with SQL, and publish the results as REST APIs. There aren’t any SDKs or libraries to learn, just use whatever you’re comfortable with to interact with APIs over HTTP.