teleren/devto huggingface dataset:
Compiling Java 17 using Maven in an Azure DevOps Pipeline
Tags: java, maven
Published: 2021-12-29 15:27:51

Using ubuntu-latest machines in an Azure DevOps pipeline, there is currently no support for versions beyond 11.  So using a Maven@3 task to compile using a newer version fails.  The workaround is to use a container version of Maven.

```
jobs:
  # build uberjar
  - job: ${{ parameters.jobName }}
    pool:
      vmImage: ubuntu-latest
    container: maven:3.8.1-openjdk-17-slim
    variables:
      - name: JAVA_HOME_11_X64
        value: /usr/local/openjdk-17
    steps:
      - template: steps-prepare-maven.yml
      - task: Maven@3
        displayName: build ${{ parameters.moduleName }} uberJar 
        inputs:
          mavenPomFile: pom.xml
          mavenOptions: -Xmx3072m $(MavenOpts)
          javaHomeSelection: 'path'
          jdkDirectory: '/usr/local/openjdk-17'
          publishJUnitResults: true
          testResultsFiles: "**/surefire-reports/TEST-*.xml"
          effectivePomSkip: true
          goals: -P production -pl ${{ parameters.moduleName }} -am $(MavenOpts) -Dmaven.test.skip=${{ parameters.skipTests }} $(BuildGoal)
```

We are using `openjdk-17` *and* explicitly using `javaHomeSelection` and `jdkDirectory` to set our `JAVA_HOME` to match where the container puts the JDK.

So why are we also defining the environment variable `JAVA_HOME_11_X64`, you ask? Well, I have reusable templates that are used outside the container setting.  For example, the `steps-prepare-maven.yml` file is a template that creates a settings.xml file using the project secrets and updates the revision based on my build parameters - I also use it on Windows jobs. Such steps use the default version, Java 11.  When running inside the container, the JAVA_HOME_11_X64 takes precedence and the Maven steps in the reusable templates work correctly.

This is extracted from a template file, replace the parameters with what you need.

Credit: sfragata's [answer](https://github.com/microsoft/azure-pipelines-tasks/issues/14915#issuecomment-868473328) to a github issue got me started.  Then I stumbled around until I could fix my included templates using the environment variable.
Three.js dancing Tree (for Xmas)
Tags: codepen
Published: 2021-12-29 15:24:19

<p>A three.js experiment. That's how I learned some more about instanced geometry (instanced mesh should do the job as well - I just had no time to try it). Anyway, that took me some time to make things work but I kind of like the final result. Merry Xmas </p>

{% codepen https://codepen.io/harunpehlivan/pen/jOGZyMO %}
I have trouble with my own logic and expectation in javascript
Tags: javascript, beginners
Published: 2021-12-29 15:24:10


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxcbvh9xjhuf8u26a436.png)
please help me fix this code guys, i want to ,like, put that "product" thing in the "something" ( which is something.product ) that product is the input from your keyboard and idk how to do that in a right way, please help, thanks!
for in 
Published: 2021-12-29 15:22:03

```js
for (variable in object) {
  statement
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjvsxbv62td563vhav04.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqbe9vifvlq7mo9vjsu2.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx3bktugih6rpesydjrf.png)
5 Articles every WebDev should read about performance (#1)
Tags: javascript, webdev, tutorial, performance
Published: 2021-12-29 15:21:49


A curated list of the top five web development must-reads about front end and web development performance. Don't miss out on the latest web development stories and insights. Read all about the cutting edge in web development, working in tech and the new tools and frameworks while learning a few new tricks.

---

## Web Performance Metrics Cheatsheet
> A summary an explanation of the web performance metrics

https://bitsofco.de/web-performance-metrics-cheatsheet/

---

## CLS at BuzzFeed — Part 1: Raising The Floor
> This article is part of a three-part series documenting how BuzzFeed tackled their issues with Cumulative Layout Shift as part of a broader Web Vitals initiative. 

https://tech.buzzfeed.com/improving-cumulative-layout-shift-at-buzzfeed-part-1-8b7ead2381dd

---

## Optimizing resource loading with Priority Hints
> Priority hints indicate the relative importance of resources to the browser. They can enable optimal loading and improve Core Web Vitals.

https://web.dev/priority-hints/

---

## Towards an animation smoothness metric
> Learn about measuring animations, how to think about animation frames, and overall page smoothness.

https://web.dev/smoothness/

---

## Top Challenges of Automated End-to-End Testing
> See which challenges affect most end-to-end testing efforts and learn how to overcome them to help build and maintain high-quality applications.

https://dev-tester.com/top-challenges-of-automated-end-to-end-testing/

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)

---
 
[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
Listen to the Season 7 Finale of DevDiscuss!
Tags: discuss, podcast
Published: 2021-12-29 15:17:32

---
title: Listen to the Season 7 Finale of DevDiscuss!
published: true
description: Listen to S7E8 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 7
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qka0a5owtrfzbcp5siz.png
---

## The season finale of DevDiscuss is here already! In S7E8, we're talking about the ever-important topic of cybersecurity, what needs to happen to advance the field, and how you can dive in.


{% podcast https://dev.to/devdiscuss/s7-e8-how-cybersecurity-needs-to-evolve-and-how-to-get-into-it %}

_Quick refresher — DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

### Host:
- **@ben** — Creator of DEV & Co-Founder of Forem
  
### Guest: 
- **[Alyssa Miller](http://twitter.com/@AlyssaM_InfoSec)** — Business Information Security Officer @ S&P Global Ratings


Let us know your thoughts on this show in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s7-e8-how-cybersecurity-needs-to-evolve-and-how-to-get-into-it/id1513053883?i=1000546403855)
- [Spotify](https://open.spotify.com/episode/6kGkqWaUVF4sMRJoMMiVKc)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzU3?sa=X&ved=0CAQQkfYCahcKEwi4zaTepYn1AhUAAAAAHQAAAAAQCg)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s7e8-how-cybersecurity-needs-3rEFg5sv4eC/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=168717622)
- [RSS Feed](http://feeds.codenewbie.org/devdiscuss_podcast.xml)
- [DEV Pods Site](https://devpods.dev/podcasts/devdiscuss/episodes/241)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season seven sponsors: [Microsoft](https://www.microsoft.com/en-us/dev-community/Event/Register?eventId=DevDiscussPodcast_o7nllI4cp4Vg&ocid=aid3038582), [New Relic](https://developer.newrelic.com/), & [Vultr](ource=devdiscuss&utm_medium=syndication&utm_campaign=october21)!_

## Thanks for tuning in for season 7 of DevDiscuss. We can't wait to bring you all new episodes in the new year!

![Speakers](https://media.giphy.com/media/l4Ep8xAM0H5aSDixi/giphy-downsized-large.gif)
Fix the Error:"You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).
Published: 2021-12-29 15:16:26

I ran into the error below a few days ago while trying to create a new react application;
> You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App.

From my research, this error can be fixed in these **3** steps;
- First, remove any global installation with this command
```
npm uninstall -g create-react-app
```
- Then, clear your npx cache by executing
```
npx clear-npx-cache
```
- Finally, run the **create-react-app(cra)** command
```
npx create-react-app my-app 
```
In addition, to install with typescript, follow the first two steps and then execute the cra command with typescript template flag
```
npx create-react-app client --template typescript
```
With all these in place, you should be able to create a new react application successfully.
Lohnen sich E-Mail-Marketing und Newsletter-Marketing?
Tags: onlinemarketing, leadgenerierung, newsletter
Published: 2021-12-29 19:09:13

---
title: Lohnen sich E-Mail-Marketing und Newsletter-Marketing?
published: true
date: 2021-12-29 15:12:29 UTC
tags: OnlineMarketing,leadgenerierung,newsletter
canonical_url: https://bloggerpilot.com/email-marketing/
---

![E-Mail-Marketing - Lohnt es sich noch?](https://bloggerpilot.com/wp-content/uploads/2021/12/e-mail-marketing-desktop.png)

Wenn du dich auf Websites wie Facebook und Twitter für E-Mail-Abonnements angemeldet hast, hast du wahrscheinlich schon einmal E-Mail-Marketing betrieben. Wenn dir der Gedanke, es selbst zu machen, Bauchschmerzen bereitet, mach dir keine Sorgen - es ist viel einfacher, als du denkst. Wenn du die Grundlagen erst einmal gelernt hast, ist es wirklich nicht so kompliziert.

Marketing im Sinne der Standarddefinition des Wortes, also alles, was ein Produkt oder eine Dienstleistung bewirbt, ist eine gängige Praxis in der Geschäftswelt, insbesondere in der Welt des E-Commerce. Was die meisten Menschen nicht wissen, ist, dass Marketing viel mehr mit dem E-Mail-Marketing zu tun hat, als sie denken. Wenn du an Marketing denkst, stellst du dir wahrscheinlich eine Werbetafel oder ein Schaufenster vor, richtig? Falsch! Die Wahrheit ist, dass E-Mail-Marketing wirkungsvoller ist als jede andere Form des Marketings, weil es diejenigen erreicht, die von dir hören wollen.

Der Original-Artikel erschien auf [Lohnen sich E-Mail-Marketing und Newsletter-Marketing?](https://bloggerpilot.com/email-marketing/).

Mit dem Aufkommen von Smartphones checken die meisten Menschen ihre E-Mails und sozialen Netzwerke nach Neuigkeiten und Benachrichtigungen, noch bevor sie sich in ihren Computer einloggen.

Es gibt also keinen Grund, warum die aktuellen E-Mail-Marketing-Tools nicht wiederverwendet werden können. Obwohl E-Mail-Marketing ein Instrument ist, das die meisten Vermarkter und Redakteure schon seit Jahren nutzen, sind die Werkzeuge und Taktiken, die am besten funktionieren, immer noch unbekannt. Drei Fragen, die sich jeder Marketer stellen sollte, sind: Wie erreiche ich hohe Öffnungsraten für E-Mails, wie erreiche ich hohe Öffnungsraten für E-Mails und welche E-Mail-Marketing-Tools funktionieren am besten?

Bloggen und E-Mail-Marketing scheinen Hand in Hand zu gehen, aber das ist nicht immer der Fall. In der vernetzten Welt von heute sind E-Mails der effektivste Weg, um deine Zielgruppe zu erreichen, aber es ist schwierig, sie richtig einzusetzen. Und genau hier kommen Tools wie ein E-Mail-Autoresponder ins Spiel.

Wenn du ein kleines Unternehmen betreibst, brauchst du ein gutes E-Mail-Marketing-Tool, um deine Newsletter zu verwalten und zu versenden, mit deinen Mitarbeitern zusammenzuarbeiten und neue Produkte anzukündigen. Und es muss so einfach zu bedienen sein wie möglich. Alles in allem brauchst du ein Tool, mit dem du jeden Monat Hunderte von E-Mails erstellen und versenden kannst und das dir Zeit und Geld spart.
Welcome Thread - v157
Tags: welcome
Published: 2021-12-29 15:06:10

---
title: Welcome Thread - v157
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Fluffy white dog saying hi](https://media.giphy.com/media/l0FF56cexcW2JAXCJj/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
NodeJs CURD Operation
Tags: beginners, javascript, node, react
Published: 2021-12-29 15:01:06

**_CRUD Operations_** 
CRUD is an acronym for Create, Read, Update, and Delete. These are the four basic functions that can be performed with most traditional database systems and they are the backbone for interacting with any database.
The method is the type of request you send to the server.
GET
POST
PUT
PATCH
DELETE
**_Post Method_**
Use the post method to create any new data. When creating a new resource, POST the parent and the service takes care of adding new resources to the parent, assigning an ID (new resource URI), etc.
If created successfully, return HTTP status 201, 201 Return a location header with a link to the newly created resource with HTTP status.
`// Create a new Note
    app.post('/notes', notes.create);`
**_Get Method_**
 Use the get method to get all data or a single data by its id. The HTTP GET method is used to "read" or retrieve an asset presentation. In the "happy" or non-error path, GET provides a presentation in XML or JSON and an HTTP response code of 200 (OK). In case of an error, it often returns a 404 (not found) or 400 (bad request).
`// Retrieve a single Note with noteId
app.get('/notes/:noteId', notes.findOne);`
 
`// Update a Note with noteId
app.put('/notes/:noteId', notes.update);`
**_Put Method_**
Use the put method to update or edit data.if a PUT call on an asset increases one counter of the asset, the call is no longer invincible. Sometimes this happens and it may be enough to document that the call is not indomitable. However, it is advisable to keep PUT requests in abeyance. It is strongly recommended to use POST for non-refractory requests.
// Update a Note with noteId
app.put('/notes/:noteId', notes.update);

`// Update a Note with noteId
app.put('/notes/:noteId', notes.update);`
**_Delete Method_**
Use the DELETE method to get all data or a single data by its id.If successfully deleted, return HTTP status 200 (OK) with a response body, perhaps a presentation of the deleted item (often demanding too much bandwidth), or a wrapping response (see return value below). Either that or return HTTP status 204 (no content) without a response body. In other words, a 204 status without any body, or JSEND-style response and HTTP status 200 is the recommended response.
`// Delete a Note with noteId
app.delete('/notes/:noteId', notes.delete);`
Sending messages using Slack Webhooks
Published: 2021-12-29 14:55:27

[Slack documentation](https://api.slack.com/messaging/webhooks) has part about sending messages with webhooks.

It works great, but there is missing information about details. We can send custom message with emoji, username and selected channel.

```json
{
  "text": "My message.",
  "channel": "notifications_channel",
  "username": "My custom robot name",
  "icon_emoji": "rocket"
}
```

When you send it from script or CI server you can use `curl` in format:

```bash
curl -X POST \
  -H 'Content-type: application/json' \
  --data "{'text':'My message.', 'channel':'notifications_channel', 'username':'My custom robot name', 'icon_emoji':'rocket'}" \
  $SLACK_WEBHOOK_URL
```

How message in Slack looks? First message is ours, second is from Trello application for comparation.

![Custom Slack message send with webhook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojw7d3isthhklm5lj0yt.png)
How To Link JavaScript To Your Project
Tags: javascript, beginners, webdev, programming
Published: 2021-12-29 14:55:27

JavaScript is the world's most popular programming language according to [stackoverflow survey 2021](https://insights.stackoverflow.com/survey/2021#most-popular-technologies-language). As far as I know, its also the only programming language for front-end development for this reason its in very high demand and if you are looking to get into web development a must have skill as at the time of this post. 

In this post, I will be showing you different ways you can link javascript to your projects. I'm assuming you are already familiar with HTM & CSS.  Lets get started!
What We will Cover

- Overview
- Inline javascript
- Internal javascript
- External javascript
- Summary

#### Overview

In order to ensure your programme works as expected, it needs to be linked with the root of your project i.e the root HTML. There are a few ways to accomplish this. In this post we will be focusing mainly on 3 ways (inline, internal & external).

#### Inline Javascript

This is simply javascript code written in between the opening  bracket of a html element. See sample syntax below:

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

#### Internal Javascript

This is javascript written in between a script tag within the html file. This is can be added to the html head but we will stick with the tag being placed just above the body closing tag. Sample syntax blow:


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

This snippet shows a simple programme that tells the buttons to alert ' This is internal script' to the browser once clicked. Notice that the button elements are above the script tag and they are all (button and script) within the html body tag. 

#### External Javascript

Before we dive into external  javascript let me inform you that all javascript files must have .js extension just like .html & .css, the file can be named anything you like it just must have the extension .js, see example below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmq9ihzkwzmq572uxp26.png)
          
The next question is how does external javascript work and I can tell you that it is what it says on the tin. This is a way to connect javascript to your project with an external js file. This is particularly practical when you are building a project with multiple pages. 

In order to achieve this you will need to use the script tag  but this time you will need to add the source attribute, within the source (src) you will need add the path to the js file just like below:


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

#### Summary
At the end of the day, its upto you how you want to link javascript to your project. However, you will need to consider how scalable the method you choose will be for your project.
antd-mobile 5.0 is coming
Tags: react, javascript, mobile
Published: 2021-12-29 14:43:50

After two years, we are finnally going to release **antd-mobile 5.0**.

antd-mobile (which full name is Ant Design Mobile) is a React component library for mobile web apps. And the new 5.0 version is totally rewritten from scratch. We have been working on this for over ten months.

The main features are:

- **Fast**: It is carefully optimized for harsh scenes, without configuration, you can have the best package size and ultimate performance.
- **Customizable**: Based on CSS variables, you can reliably and efficiently adjust the appearance of components or create your own themes.
- **Atomic**: The function of each component, neither more nor less, is exactly what you need.
- **Fluent**: With smooth gestures and delicate animation, it helps the product create the ultimate experience.

Doc: https://mobile.ant.design
GitHub: https://github.com/ant-design/ant-design-mobile
VS Code debugging for web developer
Tags: javascript, vscode, beginners, web
Published: 2021-12-29 14:43:24

---
title: VS Code debugging for web developer
published: true
description: A comprehensive guide into debugging web applications inside VS Code
tags: javascript, vscode, beginners , web 
//cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1629271703569/IR3E3VsAj.png
---

## Debugging in VS Code for web developers.


![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271703569/IR3E3VsAj.png)

[image-source: VS-Code website](https://code.visualstudio.com/docs/editor/debugging)

## What is VS Code.

Visual Studio Code is a light weight IDE for developing and debugging web applications or projects that run on javascript.Although by installing extensions you can extend the functionality to support different languages within the IDE. Vs Code is built on electronJs which is a JavaScript framework for building native desktop applications,Which means it comes with full support of running JavaScript applications for web developers.

Electron JS has main process and render process.Main process runs nodeJs in back-end whereas renderer process runs any web application using any web framework in JavaScript.

## Intelligence and presets for web development

- Suggests all the node commands to run directly from package.json file


![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271722014/H4xIWYTLo.png)

- The Debug tab on the left toolbar helps you to switch to debug mode instantly


![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271732225/ew0L9RTcZt.png)

- Full support for GIT out of the box


![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271741646/vpunRuk-2.png)

- Extensions to give more features for the existing IDE which is fully Customisable


![5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271752398/jrY1SapLc.png)

- Integrated terminal with multiple instances


![6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271768981/LI1vyNLKM.png)

- Debug console to enable browser level js execution during debugging


![7.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271781997/cL6L2cecE.png)

- Simple browser like view so you don’t have to learn again
- put a debugger inline in the Editor.


![8.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271792174/pzdnmePWJ.png)

- simple controls to navigate through the debugging process


![9.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271802719/T0iaO3f8e.png)

- create your own environment by creating `.vscode/launch.json` file and maintaining the suggestion


![10.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271966490/90xrqy43P.png)

- Below is a sample nodejs configuration


![11.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629271975051/oeH42VjeS.png)

## Conclusion

Thanks, hope this helps you get basic idea for debugging web applications in VS Code . Read more [here](https://code.visualstudio.com/docs/editor/debugging)