teleren/devto huggingface dataset:
Hey bug 🐞 I can spot you 🔎
Tags: python, beginners, todayilearned, career
Published: 2020-07-12 11:07:41

![Hello](https://media.giphy.com/media/4ag7akAmeAfeKTwqxf/giphy.gif)

Hello, welcome back to the 7th edition of the series `can python do that`.

Today we will look through python libraries what will help in monitoring your code 💻

Libraries we 🛹 over today are
- Sentry
- Datadog
- Rollbar

## [Sentry](https://sentry.io/welcome/)
![Logo](https://sentry-brand.storage.googleapis.com/sentry-logo-white.png)
Sentry provides self-hosted and cloud-based error monitoring that helps all software
teams discover, triage, and prioritize errors in real-time.

- Source code, error filters, stack locals — Sentry enhances application performance monitoring with stack traces.
- See all Issues across your entire organization or select a handful of projects to surface correlated trouble spots.
- Dashboards add a visual element to our application monitoring.

[Docs 📄](https://sentry.io/for/python/)

## [DataDog](https://www.datadoghq.com/)
![Logo](https://datadog-docs.imgix.net/images/dd_logo_n_70x75.png?ch=Width%2cDPR&fit=max&auto=format&w=70&h=75&auto=format&w=807&dpr=2)
The Data Dog Python integration allows you to collect and monitor your Python application logs, traces, and custom metrics. With turn-key integrations, Datadog seamlessly aggregates metrics and events across the full DevOps stack.

- SaaS and Cloud providers
- Automation tools
- Monitoring and instrumentation
- Source control and bug tracking
- Databases and common server components

[Docs 📄](https://docs.datadoghq.com/integrations/python/)

## [RollBar](https://rollbar.com/)
![Logo](https://rollbar.com/assets/media/rollbar-logo-color-horiz.png)
Rollbar automates error monitoring and triaging, so developers can fix errors that matter within minutes, and build software quickly and painlessly.

- Reduce the back and forth between dev and QA
- Dedupe bug reports and prioritize bugs affecting many test cases
- Get real-time results and stack traces with local variables

[Docs 📄](https://docs.rollbar.com/docs/python)

![Thanks](https://media.giphy.com/media/Tw4z4MD34y11K/giphy.gif)

Peace ✌🏻,
Rohith Gilla

_Stay Safe, Stay Calm, Stay Informed_
How to migrate AWS Cognito User Pool and DynamoDB Table (script)
Tags: aws, dynamodb, cognito, devops
Published: 2020-07-12 10:59:27

Yesterday I had to migrate my AWS app to a new setup on CloudFormation. Code is easy but Cognito User Pool and DynamoDB table(s) took some time to investigate. Here is my experience and a solution (for small to medium apps).

## Migrating Cognito User Pool
Note that there are several ways to migrate Cognito User pool, two main ones are described here: https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-import-users.html

### Option 1) Using "seamless" Lambda migration
Basically you keep both pools active; app is normally linked to the new pool but on every failed login Lambda will check user against the old pool and migrate it to a new pool seamlessly (if exists and credentials are ok).

### Option 2) Import your users from CSV file
Simple but not seamless. Using Cognito console you can import users from CSV file, but they'll be put into RESET_REQUIRED status. Then, your app needs to be changed a bit to forward users with this status to "forgot password" workflow. There they will re-confirm their email and it's done. Getting a CSV file to import is another story as Cognito console does not export users (yet).

### Why I chose option 2 and import CSV?
- because it is much simpler for small to medium apps
- because I didn't want to keep both user pools active for that long (my users migrate very slowly)
- because my database links some data with username (which is a login alias for email) so in "seamless" method there was a chance that a completely new user would "steal" old username (although with new email) exposing that data to him.

Exporting users from Cognito user pool is still not available in console, but a [cognito-backup-restore](https://github.com/rahulpsd18/cognito-backup-restore) does the job very well. However, it does not (yet) create proper CSV for import through console. Some simple Node scripting and it's done (link to code at the end).
Note that cognito-backup-restore does have a restore feature too, but it sends out emails to users which was not what I wanted. I wanted this migration silent.

## Migrating DynamoDB table(s)
Again, there are several options to migrate DynamoDB. Amazon suggests [AWS Data Pipeline](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/DynamoDBPipeline.html) but for small to medium tables that's an overkill. Many other variations and methods to do this exist online, free or commercial. Also many different JSON formats are used in diffrente tools which require some parsing. At the end I decided to use AWS CLI commands wrapped in a Node script to automate the process.

step 1: `aws dynamodb scan` downloads DynamoDB JSON
step 2: `aws dynamodb put-item` in a loop sends all records to a new table, one by one

`batch-write` was something to think about (it can do 25 records in a batch) but my table was small enough to do it this way.

Complete code is on GitHub: [cognito-dynamodb-migrate](https://github.com/psiho/cognito-dynamodb-migrate)
The Power of Null
Tags: database, null, opinion, state
Published: 2020-07-12 02:37:13

Every programmer that has some sort of social media presence has seen this image:

![Null](https://i.imgur.com/r5j2dpP.png)

This is the perfect analogy of Null.  With this in mind, you can actually utilize the use of Null.  Null is actually a value to represent the absent of a value in a data type.  The complete absence of a value is called a [bottom type](https://en.wikipedia.org/wiki/Bottom_type#:~:text=In%20type%20theory%2C%20a%20theory,up%20tack%20(%E2%8A%A5)%20symbol.) but that 

##"To Null or not to Null":

In most of my SQL tables, I always have a [DELETE_DATE] field.  This is because I do not like to actually DELETE a record from a table.  Instead, I will fill in a date (CURRENT_TIMESTAMP for MSSql).

This is where Null becomes important to my SQL environment.  All of my stored procedures will always check to see if a date has been put into the [DELETE_DATE] field.

Another example in my SQL environment is using this to activate certain processes.  I have a service that runs through different events based on statuses and dates.  I will use a [PROCESS_DATE] to confirm that the record has been processed.  You can utilize this field in order to "re-trigger" and event by putting a Null value on [PROCESS_DATE] for the record.  The service will see this record and run the process again.

In JavaScript, the use of Null is also valuable (yes that was a pun).  It's the best way to check for elements of an object to see if they exist.  Especially when getting responses from APIs/Document DBs/and callbacks.

if(object.element) is the same as if(object.element === null).  Any time code can be shortened and compressed is a plus in any programmers book.  


I hope this sheds some light on the power of Null and its use as a value even though it represents the absence of a value... if that made any sense.
Easy peasy reverse words
Tags: todayilearned, javascript, beginners
Published: 2020-07-12 10:48:48

Return string with **`n` or more lettered** words reversed, given that string consists of letters and spaces only. (i.e. n is the word length) 

A single line clever solution would be by using `regex`.
If `n` is predetermined, like `n = 5`, 
```js
const revWords = (str) => {
  return str.replace(/\w{5,}/g, function(w) { 
    return w.split('').reverse().join(''); });
}
```

But not all clever solutions are good to go on production. It does fit this problem but difficult to mutate or reuse the technique if problem changes. The next one's better.

```js
const revWords = (str, n) => {
  return str.split(' ').map(function (word) {
    return (word.length >= n) ? 
    word.split('').reverse().join('') : word;
  }).join(' ');
}
```
Understanding Components and Props
Tags: react, components, properties
Published: 2020-07-12 10:32:03

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ww5hov2axj8vcw5jb7q.JPG)
First lets talk about both in brief -
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 
Props are like function arguments, and we send them into the component as attributes.
Technically,Components are like javascript functions.They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
The simplest way to define a component is to write a JS function :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k74fglkh1zy4q8ansbzg.JPG)

We can also use an ES6 Class to define a component:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j6l47emiema8vdkqk1ew.JPG)

_The above two components are equivalent from react's point of view._



**Key difference between a functional component and a class component is the lack of state and life-cycle methods in the former.**
That's Why functional components are also commonly referred to as _stateless components_.


**BUT** with newer versions of React, now we can add state even in functional components by using _"React Hooks"_.
#### a functional component by default, doesn't contain state.


Elements can also represent **user-defined components**.When React sees an element representing a user defined component,it passes JSX attributes and children to this component as single object called _Props_.

##### _for example, this code renders "Hello Aditya" on the page :_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4omxkhx3wb724be94xc9.JPG)


To conclude there are two things to remember which are :
+ **Always** start component names with a capital letter so that React can differentiate between a _DOM tag_ ( like _<div>_) and a component.

+ **Props are read only :**Whether you declare a component as a function or a class, it should **never** modify its own props.

Thanks for reading !
64: Dual Monitor
Published: 2020-07-12 10:03:49

[The Project] (https://youtu.be/BXDtvg7d014)

##The Reasons 
The video got me so inspired so much! Because I wonder why I need to be pressured by showing the project aka. demonstration in front of people, I might get overwhelmed by everything...

I used to have no interest in developing the new app, I already felt we are packed by all kind of services. **But the video was showing his code and visual result together so that I can see how he works as a web developer.**

* Problem-solving skills 
* The ability in order to explain my algorithm

---- 

##Originality
I think that is what I like to try out in the end, I know it is going to be awkward, I am in the charge of explaining my artwork... well, to get a job! practicing the new language is not easy, and always hard... true

I was suffered studying alone, it got me really frustrated 'the failure'. Perfectionism is not helpful at all, learning to code is not for satisfying my state either social position, **it is for becoming the authentic self and keeps learning.**
Refactoring my Terraform
Published: 2020-07-12 09:30:07


<sub><span>Photo by <a href="https://unsplash.com/@scw1217?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Suzanne D. Williams</a> on <a href="https://unsplash.com/s/photos/transform?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></sub>

We use Terraform in our project, but we struggle recently because it's too big.
We already use modules, but it helps us divide code to keep code maintainable. Unfortunately, it does not split state. So any changes (update provider version, or change an application configuration) can bring us many update.

Lastly, we have a brilliant idea: let's refactor our terraform in order to avoid this. But we have no clue how.

Reading [this post](https://sysadvent.blogspot.com/2019/12/day-5-break-up-your-terraform-project.html) we recognize the symptom we are facing.  

So we have started to decouple some module and use data source instead of passing variables between modules.

Hope this helps !
Minimal ts-node starter
Published: 2020-07-12 09:26:32

My goal is by creating this small minimal ts-node starter is to kickstart small applications for simulating small tasks.

I mostly prefer doing small tasks outside the application as it helps me to clearly understand the implementation of the task and also the end result contains fewer bugs. Without further ado, let's start by creating a new directory by running the following command:

```json
mkdir ts-node-starter
```

Now open `ts-node-starter` directory inside your terminal and initialize `package.json` by running following command:

```json
yarn init -y
```

The above command will create a new file called `package.json`. Now let's install some dependencies which will help us running typescript files in Node.js. For that you have to run the below command:

```json
yarn add ts-node typescript
```

Now let's create a new typescript file and name it `index.ts` and put the following content inside of it:

```typescript
const message: string = "Hello, World!";
console.log(message);
```

After doing the above process open the terminal and run the following command:

```json
./node_modules/.bin/ts-node index.ts
```

You will see the following output in your terminal:

```json
Hello, World!
```

Until now what we can do our job but we want to automate that. For that let's create a new script in the `package.json` file.

```json
"scripts": {
  "dev": "./node_modules/.bin/ts-node index.ts"
}
```

Now after update the `scripts` key in `package.json` run the below command:

```json
yarn run dev
```

The above command will out following inside the terminal:

```json
Hello, World!
```

But the only problem is left is when we change anything in our code we have to again run `yarn run dev` command to execute the code. We can also automate that by installing [nodemon](https://nodemon.io/). `nodemon` is used to run a specific command when upon file changes. Now lets open `package.json` file and update our `dev` script.

```json
"scripts": {
  "dev": "./node_modules/.bin/nodemon --exec ./node_modules/.bin/ts-node index.ts"
}
```

Now let's open your terminal again and rerun `yarn dev` command. At this time you will see the `Hello, World` output but the command will not exit the process as now we are watching for the file changes using `nodemon`. Now open `index.ts` file and change `message` variable value to `Hello, John`. After changing the variable value you will see `Hello, John` printed inside the terminal.


### Helpful tools

* [typesync](https://www.npmjs.com/package/typesync)

Install missing TypeScript typings for dependencies in your package.json.

* [npm-check-updates](https://www.npmjs.com/package/npm-check-updates)

Upgrades your `package.json` dependencies to the latest versions.

You will be able to find the above code on [GitHub](https://github.com/ziishaned/ts-node-starter).
windmill animation in 10KB
Tags: 10daysofanimation, gsap, javascript
Published: 2020-07-12 09:11:29

The monsoon has started in India and I am from Rajasthan(India) which is the abundant source of renewable energies like `Solar & Wind Energy`. Thought of animation related to wind energy came to my mind because of the ongoing windy season.

So I present to you the 7th post for **#10daysofanimation** series. I am doing this series because of the reason that it enables me to develop interesting animations of small size(~ 10-20KB) to make it feasible for web animations. I followed `gsap` library over `css-animations` by taking inspiration from a course on **frontend masters**. If you want to know about the course, leave a comment. 

## Challenge
Today's challenge is to animate the windmill in such a way that it looks more real and interesting.

## Solution Journey
Let's see the journey to understand the cycle.

#### 1. Wireframing the animation
This step involves drawing the animation ideas(at least 3 ideas) on a piece of paper. The sketches need not be perfect, it is only meant for evolving to a good idea. I came up with 4 ideas that involve elements like windmill, birds, clouds, and wind. Then after a lot of thinking and playing, I locked the idea and decided to go with it.

#### 2. SVG Image with proper `ids` and `classes`
The basic element of the animation is the windmill. I googled `windmill svg` and found nothing cool that suits my idea. So, I designed the SVG(**size ~5KB**) using illustrator. The reason why I manually designed it is the size and the ease of assigning `ids` to the elements.

#### 3. Animate elements using gsap
I divided the animation into three sub animations as
- **RotateBlades**: to rotate the blades of windmill
- **FlowingWind**: show wind to add a natural touch
- **FlyingBirds**: show birds to make it interesting

Then I compiled all the three into one using `gsap.timeline()`.
The animation looks like this

{% codepen https://codepen.io/rahuldkjain/pen/MWKXNvv default-tab=result %}

Looks cool right! The best part of developing such animations is the **size**. Anyone can easily add such animations into their website/web-app to enhance the UX(User Experience).

Happy Animating!
How do you stay up-to-date as a software developer who is slow in learning?
Tags: codenewbie, career, discuss
Published: 2020-07-12 09:08:19

I have the impression new things emerge on a very regular basis and it's hard to keep up.

Currently I'm learning Docker and Kubernetes. Then I want to dive into kafka. And the things I already know also change and progress further: Java, Spring, and JavaScript.

I would have to learn 24/7 in order to stay up to date. And I'm also not the fastest learner. I need to try it out again and again until I really understand it.
Awesome github README Templates
Tags: github, awesome, watercooler
Published: 2020-07-12 08:55:42

Github recently relased profile features and it is look awesome. We have collected the all awesome profile templates and listed out in this repo https://github.com/elangosundar/awesome-README-templates.

This repo aims to collect the all awesome beautiful READMEs profile and discover / inspired to other developers.

We have created a multiple category for README's template. If you would like add a new `template category` or add more `readme profile` under the category.

We have created the categories are mentioned below

- art
- code-styled
- creativity 
- default 
- dynamic-realtime 
- elaborate 
- multimedia
- short-and-sweet 
- tabular


*Repo Name:* https://github.com/elangosundar/awesome-README-templates
Write comments only when they answer the “Why?”
Tags: cleancode, comments
Published: 2020-07-12 08:51:31

---
title: Write comments only when they answer the “Why?”
published: true
date: 2020-07-12 08:46:32 UTC
tags: cleancode,comments
canonical_url: https://le0nidas.gr/2020/07/12/write-comments-only-when-they-answer-the-why/
---

This is the one and only question that I ask myself when I see comments or when I feel that I need to write some:

> Do these comments provide the reason why this code was written?

If not then 99.9% we don’t need them.

#### “Remove right margin”

I recently came across a block of code that looked like this:

{% gist https://gist.github.com/le0nidas/5c50e479f7a3820b66c068054d830b2e %}

In this example the comment simply describes what the code does. I am pretty sure that everyone can figure that out but only the code’s author knows why we need to remove the margin under those circumstances. I am also sure that in six months (in my case in six days) even the author won’t remember the reason behind this code.

#### Extract if’s logic

To be fair I do understand the author’s urge to write this comment. Those unavoidable negations, because of the system’s/ui’s APIs, look like they need to be clarified.

Fortunately there is a better way to do that: we extract if’s logic to its own method and name it accordingly:

{% gist https://gist.github.com/le0nidas/837e97540020e449d83370184c9db4ec %}

#### Extract if’s body

We can go a step further and extract if’s body to its own method too, having the code replacing the comment completely:

{% gist https://gist.github.com/le0nidas/744175f2c7cb0affed3b722910088b68 %}

#### Answer the “Why?”

So now what is missing is the reason behind the margin’s removal. A comment that answers the why and completes the reader’s understanding about the code she/he reads.

{% gist https://gist.github.com/le0nidas/db489a8a5870ea3cea7429a4bc945531 %}

“I can see what is happening and I know why too!”
How to see who is visiting your site?
Tags: javscript, react, tutorial, beginners
Published: 2020-07-12 08:09:36

Have your created your stunning website? But now don't know how to check how many visitors are coming and from which platform they are accessing your site. So in this tutorial I'll tell you how you can analayze traffic of your site.
For this we will use Firebase.

What is Firebase?

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. As of March 2020, the Firebase platform has 19 products, which are used by more than 1.5 million apps. And we will use Firebase analytics for our purpose. 
So Let's start :)

1. Go to https://console.firebase.google.com and sign-in with your account.
2. Now create new project. Copy the keys and the script tags of your project.
3. Paste the script tags in your html head section so you can access the firebase services.
4. Paste the keys just below the script tags in the head section.
5. Now you just need to *initialize* your app with firebase using *firebase.initializeApp()* function and call *firebase.analytics()* function inside the same script tag.
6. Now it's all done. Just go to the https://analytics.google.com and sign-in with the same account you used for firebase sign-in.

So now you can see live users to your site, total users with custom date ranges, how many users use what platform, whether users are coming from external links or organic traffic, your income(if adsense is enabled), engagement time of users, how many pages they visit, etc.

I hope it's all clear from above but still if you have any doubts then feel free to ask in comments.