teleren/devto huggingface dataset:
React Fundamentals Video
Tags: react, javascript, webdev
Published: 2020-07-20 18:03:56

{% youtube 0MPyk0IAnpo %}
Video tutorial showing examples of React JS fundamental concepts 
-- I found this a bit tough actually (Putting into words the concepts) and the editing is a bit rough in places (currently more remote than usual as at an English language camp) but hopefully this can help someone who wants to learn some core React concepts 

Covers 

* JSX
* Class Components and Props
* State
* Events and Event Binding 
* ComponentDidMount()
GitKraken - Awesome tool to manage git repositories
Tags: git, github
Published: 2020-07-20 17:54:37

GitKraken, a powerfull tool to manage your Github repositories.

I'm really surprised with the powerfull of this tools.

![GitKraken](https://dev-to-uploads.s3.amazonaws.com/i/kraru05le8jmc690hpf4.png)

Repository Tree - Beautiful screen.

![GitKraken Interface](https://dev-to-uploads.s3.amazonaws.com/i/u3i1lvra59ppucypfqxa.png)

It has ability to connect with many specific git providers, including private repositories.

![GitKraken Git Providers](https://dev-to-uploads.s3.amazonaws.com/i/5pbue9axaeix48ggng8b.png)

[Click here to download](https://www.gitkraken.com/invite?referralCode=kZMcFk7m) and start using this awesome tool!

“This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.”
Getting into Gatsby
Tags: node, beginners, webdev, productivity
Published: 2020-07-20 17:49:32

Gatbsy is a very popular framework used to create static webpages. In this blog, we'll discuss what kind of tool Gatbsy is and why is it so helpful in building webpages that follow a [JAMstack](https://dev.to/carmensalas14/jamstack-approach-39m) approach.

We will be going over: 
- **What is Gatsby?**
- **What is GraphQL?**
- **How to get started using Gatsby?**

###What is Gatsby?
The common definition for Gatsby is, it is a static site generator. But let’s discuss what this means. 
This means Gatsby is a tool that will help us produce static sites using HTML, JS, CSS, images, and other static content, that we can then load onto a server. Which is a more JAMstack approach to building applications. 
The traditional approach of server-side rendered applications is that that when you request a page on the application, generally it will then have to reach a database to retrieve the data and then build the page in real-time on the server to then send make to the client. With Gatsby, a JAMstack approach is taken to serving a website. Gatsby will create the pages ahead of time which is then served and the client is only requesting the static pages created. More specifically, Gatsby calls the endpoint with GraphQL, which fetches the data you need, and then a static page is created with that data. The data is only queried once and then served on to a server as a static HTML file. 
Gatsby uses graphQL to query data from an external data source such as markdown files, JSON files, a database, or even an API. Gatsby includes plugin architecture, which allows us to load JavaScript, make API calls, add animations, build interactions onto the HTML files which allows us to still have very dynamic websites. Gatbsy also uses React for templating and CSS for styling. 

###What is GraphQL?
GraphQL is a querying language that allows you to query for data by describing the data you want to receive from a data source such as a markdown file. You are then given the data in the way that you asked for it

###How to get started using Gatsby?
Gatbsy uses Node, so Node will need to be running on a development environment on your computer. You will need to have installed Node and Git before installing Gatsby. You start off by installing Gatsby on your local machine globally. You then run Gatsby on your computer, by creating a new Gatsby template and it will help you set up your application to generate static pages for you. The Gatsby [documentation](https://www.gatsbyjs.org/docs/) explains thoroughly how to get started with building sites on Gatsby from [quickstarts](https://www.gatsbyjs.org/docs/quick-start) for experienced developers who are ready to jump in, to [step-by-step tutorials](https://www.gatsbyjs.org/tutorial/part-zero/) for beginners starting from anywhere.
JAVA CONCEPTS!
Tags: java, beginners, tutorial, career
Published: 2020-07-20 17:46:36

# Plan
Going to start a series on Java Concepts(both programming and core) where in every two days  i will explain (or try to explain) a very fundamental concept of java and readers are encouraged to actively participate in the discussions.

##Goal
The goal of this series will be to brush up the fundamentals of java , which we tend to forget easily.

For beginners: this will be a very good resource to grasp the fundamental concepts of the language .


Feel Free to suggest any improvements!

| Concept   |      link    |  
|----------|:-------------:|
| Java Access Modifiers |  [goto Article](https://dev.to/the_unconventional_coder/java-concept-of-the-day-1jim) | 
| Java Generics |  [goto Article](https://dev.to/the_unconventional_coder/java-concept-of-the-day-oec)     |  
|Java Regex     | [goto Article](https://dev.to/the_unconventional_coder/lets-talk-about-regex-3npd)
| Java Streams Api | [goto Article](https://dev.to/the_unconventional_coder/lets-talk-about-streams-2bdf) |
Permission error when generating a custom token on Cloud Functions
Tags: firebase, cloudfunctions, serverless
Published: 2020-07-20 17:45:40

When using [Cloud Functions for Firebase](https://firebase.google.com/docs/functions) you might run into the following error when trying to create a custom token:

```
'The caller does not have permission; Please refer to https://firebase.google.com/docs/auth/admin/create-custom-tokens for more details on how to use and troubleshoot this feature.' }
```

This is happening when you call `admin.auth().createCustomToken(uid)` and Cloud Functions don't have the required permissions.

You can change permissions by doing the following steps:

- Go to the [Google Cloud Console - IAM permissions](https://console.cloud.google.com/project/_/iam-admin).
- Find the "Google Cloud Functions Service Agent" service account.
- Click on the edit (pencil) icon.
- Click on "Add another role"
- Search and add the "Service Account Token Creator" role.

It might seem pretty straightforward but I wasted some time because I was debugging the wrong service account (the one for the Admin SDK). So, make sure you've selected the "Google Cloud Functions Service Agent" option.

---

[Follow me on Twitter](https://twitter.com/ceolinwill)
Today I answered a question which has been bothering me for a long time.
Tags: javascript
Published: 2020-07-20 17:45:28

### Hey!,
today I started a little bit with the semantics of Javascript and answered me on of the questions I have since I started with this language. This made the language for me a little bit illogical. But which question? Its the question why
if I do a addition with a string and a int it the string joins with the string,
```js
"11" + 1 = "111"
```
and if I do a subtraction the string becomes subtracted like int minus int.
```js
"11" - 1 = 10
```
That was the question which bothered me a long time. Today I found the answer in the ECMAScript semantics.

On page 294 is the semantic for the addition operator (+) which is not only used to add two numbers or more, no its also used to join strings and if one of the given values is a string it converts both values (if the string contains a number not something like "eleven" it must be "11") to a string and return it as a joined string. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kd1ou8yf1gzpoit71mzz.png)

And the Subtraction Operator (-) converts both values to a number (if possible) and then it subtracts them.

And it makes the language now a bit more logical for me I hope for you too. I'm sorry for my English btw I'm learning it currently.

Its my first blog post if you have feedback please leave a comment.

Sources: 
- https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf
How to handle different type of user account in flask
Tags: flask, python, userloader, flasklogin
Published: 2020-07-20 17:44:43

If i use 2 user_login and 2 user_loader method  then i able to access another account and vice versa. So to manipulate login page of Both Account Like :- Student and Member so that students shouldn't be access Member Account. If anyone knows help me .I've Searched it bunch of website but i didn't get it.
Are you feel that is so dependent of packages, libraries or frameworks?
Tags: discuss, javascript, node, career
Published: 2020-07-20 17:39:45

Well, I'm learning actualy about Node JS, and consequently JavaScript and all that I see in this world have dependencies, not just a single dependency but much more that normal.

Is it a new normal? Or I have to create things from scratch?

Like, if I have a job as developer, is normal to use frameworks just to don't waste time?

If you have some solution for this feeling, Let me know.
Efficient Sprints (as a frontend developer) – How to build quality software fast
Tags: agile, angular
Published: 2020-07-20 17:26:07

In this video, I will show you the process of developing Angular apps efficiently.
Here’s what we are going to cover:

Refining and task breakdown processes
The feature kickoff
Building the skeleton
Splitting up the work

Watch the video [here](https://christianlydemann.com/efficient-sprints-as-a-frontend-developer-how-to-build-quality-software-fast/).
Loose application server coupling
Tags: it, codequality, software
Published: 2020-07-20 17:22:15

---
title: Loose application server coupling
published: true
description: just on thinking about how to reduce failures
tags: #it, #quality, #software
---

## Shouldn't be as complex as you think.

I have seem a lot people thinking about how can increase the software availability, an Yes!, you can increase the memory and CPU, but it's the best way ?

If you think No!, you are right isn't the best way, so here is when I start to talk about the **Loose Coupling** concept. You just need to follow one rule :

- As application complexity increases, a desirable attribute of the system can be broken into small part, loosely coupled. 

What I mean is the system should be independent, we always and always should think to reduce dependencies. Just in this way when a change fails or just a deprecated library fails in the system it won't fail in cascade to other components. 
Just one part of the system will down and you can focus your energy just in the issue.

I know sometimes is easier just to add another module to your application. 

Here some of the most common reasons.

- One module more, it's small.
- They won't use that module frequently.
- I have to deliver it quickly.
- I don't know how to do it.
- It's complex, new server, new connection, new unit test...
- **And the list can go on...**

That is a serious mistake, **Fatal mistake**. And so? the system fails and who is the guilty?. The customer for having an increasing the system? or just you for having excused yourself?

You just need to keep in mind some concepts, ServerLess, Micro-services, Coupling, Cohesion.

Believe me, you will sleep better.
12 Assistant rules to boost development
Tags: angular, visualstudiocode
Published: 2020-07-20 17:21:35

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

https://medium.com/@tomaszs2/12-assistant-rules-to-boost-productivity-a0c12bea3d19
PHP and Pragmatism
Tags: php, go, elixir, productivity
Published: 2020-07-20 17:20:22

I have read the recent news that [Windows is ending the support of PHP](https://www.zdnet.com/article/microsoft-were-pulling-the-plug-on-windows-builds-of-programming-language-php/) builds with mixed feelings. On one hand, I think it makes sense moving forward to the direction of new languages. On the other hand, it makes me a bit sad.  I know most probably the community will still support PHP-Windows builds, however, in this decade there are still companies launching new businesses using PHP and I see that as a good thing. 

I see companies very proud of using fancy baby-boomer technologies such as Go, Clojure, Elixir, etc, but that is not necessarily a good thing. I am not against using new technologies, Luddism is a disease. However, they are not a silver bullet and they are not going to magically create very stable, resilient, performant, testable products in terms of tech just because they are modern.

I have seen some companies succeeding in the last 5 years using:(dramatic pause) PHP. Yes, PHP. I am not a PHP fanboy, but I admire people using it to build really great products nowadays. They started with the technology they knew, they ignored all the internet bullshit and stick with the language they had the knowledge in order to design a good product. They were pragmatic.

The idea of starting a new startup today using PHP as the main backend technology would sound crazy to most of the developers, but it is still happening. As I said before, I do not see any problem with it. I would get more surprised by people starting new projects with Go or Elixir without having any prior real-life experience.

Years are still passing and I still see people overlooking basic concepts such as all sorts of tests, solid principles, documentation, clean code, etc. The new technologies are not helping you out if you do not understand those basic principles.

There are some exceptions obviously and in some cases, a specific technology would be better suitable rather than the other one. Considering the common cases though, stick with the one you can deliver more business value. It will be useless having a type-safe, thread-safe, whatever fancy stuff if you cannot leverage the benefits or the software you are designing does not require such a thing. 

Long-life to PHP and long-life to pragmatic developers.
How to Debug Docker Containers (Python + VSCode)
Tags: docker, tutorial, debugging
Published: 2020-07-20 17:14:02

When containers are working they are amazing and make running your code across different environments seamless...

However, when something goes wrong, the additional layers of abstraction can make debugging them difficult.

Here are three techniques you can use to debug them:

1) Override the entrypoint at runtime and exec into the container
2) Copy files into or out of the container for inspection/comparison
3) Run a remote debugger inside the container and attach to it over the network

I created a video walking through how to use these three techniques:

{% youtube qCCj7qy72Bg %}

Leave your own tips in the comments!
So richtest du Google Analytics Event Tracking mit MonsterInsights ein
Tags: wordpress, googleanalytics, googletagmanager, monsterinsights
Published: 2020-08-19 13:51:02

---
title: So richtest du Google Analytics Event Tracking mit MonsterInsights ein
published: true
date: 2020-07-20 17:13:08 UTC
tags: Wordpress,googleanalytics,googletagmanager,monsterinsights
canonical_url: https://j0e.org/monsterinsights-tracking/
---

![](https://j0e.org/wp-content/uploads/2020/07/monsterinsights-event-tracking.png)

Wenn du Google Analytics Events-Tracking einrichten möchtest, erhältst du durch das WordPress-Plugin MonsterInsights eine gute …



Der Beitrag [So richtest du Google Analytics Event Tracking mit MonsterInsights ein](https://j0e.org/monsterinsights-tracking/) erschien zuerst auf [WordPress und Marketing](https://j0e.org).
Dark Reader Extension for Chrome & Firefox
Tags: codenewbie
Published: 2020-07-20 16:47:07

Just do yourself a favor for websites that have no dark mode...

https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en-US

&& If you prefer Firefox like me!


https://addons.mozilla.org/en-US/firefox/addon/darkreader/

If you don't have this, your welcome.. if you do have it.. why haven't you showed us sooner!

Good Day!

Allan
Dart Programming Part #2 - Variables
Tags: dart, programming, variables, dev
Published: 2020-07-20 16:44:38

In this post, our agenda will be to focus on variables and data types in dart and a few fundamental concepts that should be kept in mind.

You can declare a variable with the keyword ‘var’ and 'dynamic' in the [dart](https://dart.dev/).

**Example #1**

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

where name is a variable that stores a string value, you can override the value with an integer or any other type of value.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8pvj7o52z2wfpupdozzg.PNG)

You can also use type for a variable. In the above example, "myName" is a variable of String that can only store string values and if you try to override the value with a different type of value you will get a warning.

>You can also use keywords like final, const, and dynamic to create a new variable. final and const are used to declare a variable whose value cannot be modified later.

**Example with "final":**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5g5tlim4mjzr3tx5k5e.PNG)

**Example with "dynamic":**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ntxr8wpa1tdc5r15f1lz.PNG)

>All variables in dart are a reference to objects which contain values and actions.

Dart contains six special types that are-
- Integers
- Floating-point numbers
- String
- Lists
- Maps 
- booleans

We will go in-depth on types in the next article. 
Let me know if you like or dislike the article. I will improve upon the suggestions and feedbacks.

Happy learning, stay healthy and stay safe, thank you!!
filter() and map() vs. forEach()
Published: 2020-07-20 16:35:44

What are some of the advantages of using map() and filter() vs. using forEach() methods?

Firstly, the forEach() array method always returns a value of undefined. This might be good for some scenarios, but not all. It also mutates our original array, discarding the return values.

### To Be Clear~

forEach() MUTATES the current array!

# VS. map() and filter()

map() and filter() methods both return new arrays that we can work with, without affecting the original array! Sweet! New Toys 👍 🎅
Alphabet To Number, Number To Alphabet ON PHP
Tags: php
Published: 2020-07-20 16:35:09

    function number_to_alphabet($number) {
        $number = intval($number);
        if ($number <= 0) {
           return '';
        }
        $alphabet = '';
        while($number != 0) {
           $p = ($number - 1) % 26;
           $number = intval(($number - $p) / 26);
           $alphabet = chr(65 + $p) . $alphabet;
       }
       return $alphabet;
      }

     function alphabet_to_number($string) {
         $string = strtoupper($string);
         $length = strlen($string);
         $number = 0;
         $level = 1;
         while ($length >= $level ) {
             $char = $string[$length - $level];
             $c = ord($char) - 64;        
             $number += $c * (26 ** ($level-1));
            $level++;
         }
        return $number;
     }
Quick Read on Basics of BEM (Block,Element,Modifier)
Tags: bem
Published: 2020-07-20 16:32:22

---
title: Quick Read on Basics of BEM (Block,Element,Modifier)
published: true
description: BEM Concepts
tags: BEM
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0ec9rb3ccltay3cjeibg.jpeg
---

The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

CSS example writing in BEM way
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/33frqkalk4tedaa81c5w.png)

Block : A top-level abstraction of a new component, for example a card: .card {}. Think Block as PARENT

Elements: child items can be placed inside the block element. For example .btn__title {}. Think Elements as a CHILD.

Modifiers: can be used to manipulate the block so that we can theme or style that particular component without inflicting changes on a completely unrelated module. For example .card--light {} or .card--dark {}

So the card markup might look like this.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yiihw09izvaoadsse60h.png)

So if another developer look at this code who's not familiar should get a good idea of which classes are responsible for what and how they depend on each other. So developers can add many different combinations of cards simply changing a class in the markup

{% codepen https://codepen.io/vish448/pen/yLexbeP %}

## Why BEM

1. If we want to make a new style of a component, we can easily see which modifiers and children already exist. We might even realize we don’t need to write any CSS in the first place because there is a pre-existing modifier that does what we need.

2. If we are reading the markup instead of CSS, we should be able to quickly get an idea of which element depends on another (in the previous example we can see that .card__title depends on .card, even if we don’t know what that does just yet.)

3. Designers and developers can consistently name components for easier communication between team members. In other words, BEM gives everyone on a project a declarative syntax that they can share so that they’re on the same page.
🔥 Rest Assured Tutorial | Day 2 |  WebAuthentication and Cookie Basics(with JSON Basics)
Published: 2020-07-20 16:19:16

Hey BugHunters,  In this video, we are going to learn WebAuthentication and Cookie Basics with JSON Basics.

This is Day 2 of the 30 days of API Testing challenge Series. Where will learn the Basics before jumping to API Automation.

[![ Rest Assured Tutorial](https://i.imgur.com/12pSIsv.png
)](https://youtu.be/LRiYWteiwds "Rest Assured Tutorial")

✅ What is Authentication?

Authentication is a process of presenting your credentials like username, password or another secret key to the system and the system to validate your credentials or you. 

In the API terms Authentication is used to protect the content over web mean only a valid user with valid credentials can access that API endpoint.

✅ What is Authorization?
Authorization is a process with which we can allow or restrict resources. Depending on the business logic, the requirement of user authorization can vary.

✅ What is HTTP cookie?
An HTTP cookie (also called web cookie, Internet cookie, browser cookie, or simply cookie) is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing.

✅ What is JSON?
- JSON stands for JavaScript Object Notation
- JSON is a lightweight format for storing and transporting data
- JSON is often used when data is sent from a server to a web page
-JSON is "self-describing" and easy to understand

✅ Time Jump

🚀 All 30 Days Task - https://scrolltest.com/30days/restassured
📌 Join 30 Days Challenge Updates - https://scrolltest.com/tta
🎓 Free Automation MasterClass - https://thetestingacademy.com
📚 REST API testing with Python - https://masterapitesting.com

🔔 Join Facebook Group :  https://scrolltest.com/fb

✅ Automation Tester Community - https://thetestingacademy.com
🐦Follow us on Twitter - https://twitter.com/itstechmode
📖 Like us on Facebook - https://www.facebook.com/scrolltest
🎤 Listen to our Podcast - https://anchor.fm/thetestingacademy

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")