teleren/devto huggingface dataset:
Cloudflare as a Dynamic DNS🌩
Tags: cloudflare, ddns, raspberrypi
Published: 2021-03-07 19:22:39

If you need to have a DNS record that point to a Dynamic IP ([DDNS](https://it.wikipedia.org/wiki/Dynamic_DNS)), for example, you home IP address, this tool allow you to accomplish this job!

For do this this we need [cloudflare-dynamic-ip](https://github.com/andp97/cloudflare-dynamic-ip) tool allow you to simply have a specific DNS record such as `home.example.com` that point to your dynamic IP.

### Requirements

-   Domain Name
-   [Cloudflare Account](https://www.cloudflare.com/)
-   Raspberry Pi4 or any other Linux Based OS
-   `composer`
-   `php-7.3`

### Installation

Clone the Github [repo](https://github.com/andp97/cloudflare-dynamic-ip#installation), install dependencies, set API Token and set a cron job every 15min that run this script and you’re done!🚀

```
git clone https://github.com/andp97/cloudflare-dynamic-ip.git
cd cloudflare-dynamic-ip
INSTALL_PATH=$(pwd)
composer install --no-dev
nano .env
echo -e "*/15 * * * * $INSTALL_PATH/cf-ip 2>&1 > /dev/null\n"
crontab -e
```

You can also execute this script via bash

```
#Get dns record name from env and target ip from remote host (https://ip.andreapavone.com) 
        
./cf-ip
        
#Passing parameters to the script
        
./cf-ip <dns_record_name> <target_ip>
        
```

On `.env` file you can set:

-   `CLOUDFLARE_TOKEN` (see how can you generate token here:
    [https://support.cloudflare.com/hc/en-us/articles/200167836-Managing-API-Tokens-and-Keys](https://support.cloudflare.com/hc/en-us/articles/200167836-Managing-API-Tokens-and-Keys))
-   `CLOUDFLARE_ZONE_NAME` or `CLOUDFLARE_ZONE_ID`
-   `DNS_RECORD_NAME` is the subdomain that you prefer to use (for
    example: **home**.example.com). If you prefer to be safer use a
    randomized token for the `DNS_RECORD_NAME`

### Update

```
git pull
composer update
```
How to Setup and Run C on macOS
Tags: programming, tutorial, codenewbie, computerscience
Published: 2021-03-07 19:11:48

# This article is part of my YouTube video series : [Link](https://www.youtube.com/watch?v=wKhuVuzb2B0&t=1s)

# Understanding what is needed to write C

* You will need a **compiler** to convert your source code into executable code. (for windows I recommend using [WinGW](http://mingw-w64.org/doku.php), if you are using macOS you have a default compiler installed)

* You will also need a **text editor** or an **IDE** these are used for writing and saving your C code. If you are on Windows the Notepad can be used as a text editor (which I don't personally recommend because you can get an IDE free and simply). An IDE is an Integrated Development Enviroment that helps you write code. There are many features and plugins that make an IDE the best way to code. 

*Popular IDE's: Atom, Sublime Text, Gedit and Visual Studio Code.

# How to set up Visual Studio Code

First head over to [Visual Studio Code](https://code.visualstudio.com/download), find and download the version and operating system you need. 

After that open up Visual Studio Code and head over to the Extensions on the left panel. There you will need to install two extensions. The first one is for the intellisence and called C/C++ made by Microsoft. The second one is a code runner and I use the one made by Jun Huan.

# You are ready to go with C
If you still have problems check out my [video](https://www.youtube.com/watch?v=wKhuVuzb2B0) explaining the step by step here.

Thanks for reading,
Take care
Jovan
Learning React: Props
Tags: react, webdev
Published: 2021-03-07 18:56:37

React is an open source popular web frame work from Facebook that I've been itching to learn - and I want to drag you along for the ride. One of the key parts of react to learn are [Props](https://reactjs.org/docs/components-and-props.html). 

Props is a special keyword that is short for property. It is an object, and like all JavaScript objects all the attributes can be grabbed by the dot `.` notation. Props are things you pass to a function or what you want to initialize your component with.

Props can be used for that data can be dynamically passed to children components, and  must never be changed/mutated directly.  With props we are expecting that for every input we should be able to expect the same output. Every React components should act like pure functions with respect to their props.

First things first, can define our own attributes to assign values to HTML elements with interpolation `{ }` like  `<div station={stationName} />`.

Below is an example of props being used to dynamically pass data from the parent component to the child component using interpolation on the html element in the parent component that represents the child component. Props is the object that the component receives as an argument. In this case we are passing the argument song down to the child component.

```
///PARENT
const song = "Stairway to Heaven";

ReactDOM.render(
  <Radio song={song} />,
);

// Child Function Component
function Radio(props) {
  return <h3>I'm listening to {props.song}</h3>;
}
```
The Child component is then able to use the JavaScript object that was defined in it's parent component to display to the user what song they are listening to. 

The props argument doesn't need to be actually named props, you could call it which ever variable makes sense for keeping track of the content in the props. 

If you do want to update something set in a prop - but you don't want to go against the rule that they are not supposed to be mutable - you can use state!

W3 has more information on [props](https://www.w3schools.com/react/react_props.asp).
Nevertheless, Jacque Coded, Even When She Wanted to Quit
Tags: wecoded
Published: 2021-03-07 18:32:53

---
title: Nevertheless, Jacque Coded, Even When She Wanted to Quit
published: true
tags: shecoded
---

Like many other people, my 2020 did not turn out the way I had thought it would. In January, I spoke at a conference and had more speaking & writing gigs lined up. I was anticipating a new role at work. I was excited, and ready to keep growing!

By the time August hit, I was one breakdown away from quitting my job and permanently becoming a part of my couch.

I was depressed, miserable, stressed, burnt out...and embarrassed that I felt that way. Even with the perfectly valid reason of *gestures at everything*, I was ashamed of how I felt and frustrated by my inability to push through it so I could get back to doing the projects I enjoyed.

I didn’t publish a single new blog post in 2020, nor did I work on a single side project. But I did start seeing a therapist, and being more open with friends & colleagues about how I was feeling. The support & encouragement I’ve received has been amazing, and for now, that’s more than enough for me.

I still have days where I’d rather be a potato than a programmer. But I’m grateful for the creativity, joy, & delight that exist in this field, and want to continue to be a part of it even if I only have the energy to be a spectator.

In 2021, I will continue to code, but not at the expense of my well-being. And if that means less talks, blog posts, and side projects, then that’s okay with me.
Taking the perspective of a female dev
Tags: wecoded, choosetochallenge, iwd2021
Published: 2021-03-07 18:01:47

 
I believe in diverse teams. I always did. For me diversity has many dimensions, but gender balance and inclusion sticks out to me here. We have too few women in the tech sector. The ratio was bad during my studies 20 years ago (around 5%). And allthough I watched it slightly increasing throughout my professional life it's still far from being balanced. 

Since the problem is clear, the solution to attract more women into tech seems a lot harder to find. Honestly when I started to think about it I didn't have a clue where to start. About what I could do to help change the situation. So to get started I sat down with a colleague of our organisation and basically asked her: **What can this company do to be more attractive to female devs?** And as she seems a little surprised that I wanted to talk to her about this in the first place, some interesting points came to the table:

* from here experience not everyone understands why diverse teams just do better.

* more networking and alignment with other female devs within the organisation is desired to learn  and to get inspired from each other.

* she does not want to be treated any special, positively or negatively, even if she is the only female in an otherwise male team, and only be judged by her competence. 
	
* she would love to have the chance to work side by side with another female dev

We also talked about **what could be improved to hire more women devs**. Here are some of here ideas:

* in jobs posts explicitly elaborate about professional development and option to attend conferences

* also provide a clear profile description
	
* specifically utilise female devs and their networks to spread job posts to their (female) buddies

* sponsor more female bootcamps and show some presence there

So for me that was a very inspiring talk and helped me a lot to get into this topic and to change my perspective. I learned that we should encourage, connect and strengthen our tech women at SinnerSchrader and to clearly articulate to all teams why diversity matters. And we should include the female dev perspective even stronger in our hiring process - not only women will benefit from this.

On a personal note there is another woman that I want to encourage to at least have a deeper look into the tech world, and that is my 7-year old daughter. We started last year with some [code.org](https://code.org/)-lessons and allthough she could not read at the time it caught her interest. I will certainly continue to spend time with her on this and similar programs.
Nevertheless, Tereza coded in 2021!
Tags: wecoded
Published: 2021-03-07 18:00:20


## My most recent achievement

was organising a IWD meet the PyLadies international event. The orga crew is Georgi Ker, Lorena Mesa and I, and we are in Bangkok, Chicago and Hamburg. The whole event was organised in 1 month and we have attracted over 30 women speakers. 

[The website needed some coding.](https://iwd.pyladies.com) thus we coded!

## Why nevertheless.. 

as a person both attending and organising events in tech I often had to hear how there were no women speakers available, or no women in this or that tech.. And we found 30 in a month. All we can do is #ChooseToChallenge and make things happen, things that some think impossible.

## My advice for allies 
to support underrepresented folks who code is to not make assumptions about their intents and desires. If you hear about a CFP that might be relevant advertise and encourage your underrepresented folks who code to apply! Do not assume they won't be interested, maybe they say no the first time.. but if you ask often..
How to scroll to the top while using react-router-dom
Tags: react, router, dom, javascript
Published: 2021-03-07 17:49:11

Hey ✌✌

__PROBLEM TO BE SOLVED__ 🤷‍♀️🤷‍♀️🤷‍♀️🤷‍♀️🤷‍♀️: 

When we use **react-router-dom** *library* for routing pages and links in the react project, the problem with it is that when clicked on an *Link* the next component rendered does not get started from the **top** of the page, instead it renders the page from the scroll height of the parent component i.e the component which holds the *Link* tag.

So, what we are going to do is to render the new component/page/route from **top** of the scroll height, not from in-between.

__SOLUTION__ 😎😎😎😎 : 

_Make a new File just like other component file_ - Let us name it **ScrollToTop.js**

``` 
import React, { Component } from "react";
import { withRouter } from "react-router-dom";
class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }
  render() {
    return <React.Fragment />;
  }
}
export default withRouter(ScrollToTop); 
```

Now add this file as a normal component to just below the **<Router><Router/>** tag like this :

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qldludztapdrejy47xvy.png)
Deleted my live production database - Lesson learned
Tags: webdev, database, sideprojects, postgres
Published: 2021-03-07 17:40:24

You can read more on how I accidentally deleted my live production database for my website [https://www.logname.dev](https://www.logname.dev) [here](https://dev.to/tehaisperlis/i-delete-my-live-prod-database-and-have-no-backup-2kp4).

The TLDR version is
- I wanted to know how many user registered.
- I don't have admin page so I want to access the database directly
- Instead of connecting to the database I run the delete command.

Anyway, I decided to compile a list of things that I learn from every comment that I receive. Hopefully you won't repeat the same mistake that I did.

## 1. You should never connect to a live production database.
I guess this one is pretty obvious and yet this is the main mistake I did. I only want to know how many people registered and I didn't have an admin page back then. 

Instead of creating a simple admin page which only took less than 20 minutes, I instead tried to connect to the live production database and run a query there.

## 2. Backup backup backup.
Too be fair to myself, the website had only run for just a day so even if I add an automated backup it might not yet run at that time. 

Still, I only need to click 1 button in the Heroku website to manually back it up and I didn't.

## 3. Adding a space before your command will not save it in history.

As far as I know it works in Linux system. If you run a dangerous command, you can start with a space first. This will make sure your command will not be saved in history and you might not accidentally run it again like I did!


## 4. Avoid using confirm flag for dangerous command.

When I deleted my database on purpose the first time, Heroku actually trigger a prompt for confirmation. I can either reply `yes` or I need to stop the script and run it again with `--confirm` flag. I did the latter. If I deleted it with the first option, when I accidentally run the command again, Heroku will prompt the confirmation flow again, this will give me time to stop the script. Alas, I choose the 2nd flow and the rest is history(literally).

When I look back, I realize that it wasn't just 1 big mistake but a couple of small mistake that adds up. I may have made some of this mistake in the past but never all of it in the same time. 

Example, I knew it's a mistake connecting to live production database but I did it on my previous project and it was fine back then.

I also knew you should never perform deletion of database on a command line but I did it before and I was still fine.

But combining these 2 mistake result in 1 of the biggest mistake I have made so far as a developer. One that I wish I won't repeat in the future.
API documentation - Swagger UI in .NET Core
Tags: dotnet, dotnetcore, swagger, api
Published: 2021-03-07 17:26:58

# Swagger UI
*What is Swagger UI?* 
**Swagger UI** is an **API documentation tool** that helps us to visualize our API resources and with visual documentation, it is easier for consuming and implementing APIs. 

*Why Swagger?*
As our backend app grows managing APIs become difficult. So it is highly advisable to create API documentation. But generating and maintaining our own API documentation is a painful task this is where Swagger UI comes into the play. The swagger UI does the hard work of generating and maintaining our API docs, making sure our documentation stays up-to-date as our API evolves.

Let's create a .Net Core app. For this tutorial, we are going to have a simple app with two basic APIs. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nz4d540hje9itj2sp1et.png)


## Install Swashbuckle.AspNetCore

This is a NuGet package for Swagger in dotnet. We can install it from the Nuget package manager.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g02dsq8jtu3hjqdtfhyn.png)

## Register Swagger UI in Startup.cs
As we know that we have to register all our services in Startup.cs file. 

We will register Swagger in Startup.cs file's *ConfigureServices* method as shown below.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6csnrcg62hu40wc50un.png)

```using Microsoft.OpenApi.Models;``` 
**Note**: This using namespace has to be added to use *OpenApiInfo* class.

Now, we will add swagger in the Configure method as well.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brzdhnb0rmceiqj3s95y.png)

That's it. Now we are ready to use Swagger UI for our APIs.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f01nrbl1mmmkiwzahlys.png)

Now, we don't have to configure anything else. As we keep adding more APIs it will start to appear in this Documentation automatically.

### That's the end.
Thanks for reading.
Please share and ❤️ if this was helpful.
Vite.js + Vue 3 + router + vuex + tailwindcss template
Tags: vite, vue, vuex, tailwindcss
Published: 2021-03-07 17:23:01

### Github CLI usage

If you don't use github CLI to manage yours repositories I recommend that you do it. [Install here](https://cli.github.com)

```shell
gh auth login
```

Then you can create a repo using this code as a template, the command will create your repo directory.

```shell
gh repo create <ownRepoName> --private --template jarraga/vite-vue3-template
```

```shell
? This will create the "<ownRepoName>" repository on Github, Continue? (Y/n) -> YES
```

```shell
? Create a local project directory for "<ownRepoName>"? (Y/n) -> YES
```

Ok, you have new repository created on Github and local files to start coding.
Let's install dependencies and run dev server.

```shell
cd <ownRepoName>
npm i
npm run dev
```

And that's it, open folder with your code editor and start make changes.

### Recomended plugins if you're using visual studio code:

[vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)

[tailwind](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

### Thing to keep in mind for tailwindcss

If you want to make components using dynamic tailwind classes, you have to literal write the entire classes in an object and acces to it, instead of use something like  ``bg-${color}-300``
Simon explain this in detail in this video:

https://youtu.be/HZn2LtBT59w?t=509

I hope you find it useful! 👋🏽
Yummyplan - An app to plan meals for an entire week🍞📅
Tags: showdev, webdev, vue, javascript
Published: 2021-03-07 16:57:59

A little while ago I wrote a post on cooking for developers. You can find it here:

{% post thormeier/cooking-for-devs-a-creative-counterweight-5dki %}

In this post, I suggested building a web app with an integrated recipe API. I didn't integrate an API, but built a meal planning app, nevertheless.

# Introducing Yummyplan

Yummyplan is an app to plan meals for an entire week. You can select your favorite meals, place them on a day and time and get a grocery list for everything. Since all the content is stored in localStorage, you can access the plan anytime you want!

![Yummyplan logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zw9bsgyak826nxcuecg.png)

You can find Yummyplan here: [yummyplan.github.io](https://yummyplan.github.io)

## Features of Yummyplan

 * **Create menus with ingredient lists and tags**: Add your favorite meals and their ingredients and give them tags like "vegan" or "quick".
 * **Link to the recipe or cook book page**: When actually cooking, click on the meal in the plan to see all ingredients and a link to the recipe.
 * **Saving everything to local storage**: Access the plan anytime you want without having to rebuild it every time. Your tags, meals and ingredients are stored as well.
 * **Automatically created grocery lists**: After you've finished planning the week, a grocery list containing everything you need to buy will be created
 * **Download the week plan as PDF or PNG**: So you can print it or send it to someone else.
 * **Tag and title based search**: All your meals are searchable by tags or title to further save your time.
 * **Randomize your week plan**: Out of ideas? A button called "Randomize" will fill all empty slots on the plan with random meals, respecting which tags are allowed at which day and time. The allowed tags can be adjusted in the settings.
 * **Multilingual**: Yummyplan is available in both English and German
 * **Available as a PWA**: You can install it on your tablet and access it via your homescreen
 * **It's free**: Free and licensed under MIT.

## Github repository

If you've found a bug or want to suggest a new feature, here's the GitHub repo:

{% github yummyplan/yummyplan.github.io %}

## Technologies used

I built this thing with Nuxt with Vuex in Typescript and Tailwind, as well as some extra libs for canvas and PDF handling. 

Testing is done with Jest, the standard ESLint setup ensures high code quality.

## What it looks like

Here's some screenshots!

![Yummyplan overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pczoo2u82k6i4bw0uwq3.png)

![Yummyplan meal overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ul55rdlmjiaxh31dk6tz.png)

![Edit a meal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kqymxhczyooj136pjqf.png)

![The grocery list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfe83g2inpzoej4qi9yk.png)
Intermediate JavaScript Practice Course - Codecademy PRO version
Tags: javascript, tutorial, webdev, beginners
Published: 2021-03-07 16:56:03

**TL;DR:** I completed the **Intermediate JavaScript Practice** course in **JavaScript: Arrays, Loops, and Objects** module on Codecademy. This is a part of the 🔗 [**Codecademy Web Development Career Path**](https://youtube.com/playlist?list=PL7K3igiHYVk1_ulFuHesiv7BP_ALn82o8) series.

You can find the video on YouTube below ⬇️
{% youtube ntWyQFwbaqY %}

*If you like the video, don't forget to smash that like icon* 👍 *and subscribe* ❤️*. It will help a lot! Thanks!* 🙏

⏱️ Chapters:
🔗 [0:00](https://www.youtube.com/watch?v=ntWyQFwbaqY) Intro
🔗 [0:37](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=37s) Introduction
🔗 [1:11](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=71s) reverseArray()
🔗 [4:18](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=258s) greetAliens()
🔗 [7:12](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=432s) convertToBaby()
🔗 [10:03](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=603s) Fix The Broken Code!
🔗 [15:53](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=953s) declineEverything() and acceptEverything()
🔗 [20:22](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=1222s) squareNums()
🔗 [21:44](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=1304s) shoutGreetings()
🔗 [24:20](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=1460s) sortYears()
🔗 [26:32](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=1592s) justCoolStuff()
🔗 [28:44](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=1724s) isTheDinnerVegan()
🔗 [32:14](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=1934s) sortSpeciesByTeeth()
🔗 [34:47](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=2087s) findMyKeys()
🔗 [37:14](https://www.youtube.com/watch?v=ntWyQFwbaqY&t=2234s) dogFactory()

📚 Materials/References:
🔗 [MDNs JavaScript reference page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference)

Thanks for reading! I hope you find it useful.