teleren/devto huggingface dataset:
7 Best TYPO3 Code Quality, Review & Lint Tools
Published: 2020-07-24 07:19:15

Are you looking for good practices on TYPO3 code quality? Then, you are in the correct place. In this article, You will find helpful tips and tricks with TYPO3 code review tools and TYPO3 lint to achieve better TYPO3 code quality.

TYPO3 CMS is well known for its slogan - “The Quality CMS since 1999.” In other words, functional and technical quality is well-maintained since the starting of TYPO3. But, the question comes here: How do you develop and maintain code quality of your TYPO3 project? Are you following all TYPO3 code standards of PHP, JavaScript, YML, TypoScript, etc.?

In this guide, you will learn
- Guide to TYPO3 Code Quality & TYPO3 Lint 
- Why TYPO3 Code Quality Matters?
- Manual vs Automatic TYPO3 Code Quality
- OpenSource Sonar Universe: TYPO3 Code Review Tools
- #1 TYPO3 Code Quality with SonarCloud
- #2 TYPO3 Code Lint

Explore them in depth at - https://t3terminal.com/blog/typo3-code-quality/
TUNES For Braining
Tags: music
Published: 2020-07-24 06:55:45

---
title: TUNES For Braining
published: true
description: 
tags: ["music"]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4mlsxwr1af432tlnsaqa.jpeg
---

I've seen a lot of posts asking what others listen to while coding. Prog(ressive) metal/rock stimulates my mind. Steven Wilson/Porcupine Tree, Opeth, Soen, and others make me feel like I just leveled up 50 IQ points when I hear them. Every single member of every act mentioned above and below is stupidly, disgustingly talented.

Haken (rhymes with "bacon") was already HEAVY in that rotation, but today is the day. After three delays, their new album Virus is here... and it's freaking amazing. 

I know what you're thinking. The name is purely coincidental and the album is loosely conceptually tied to their last album, Vector.

[**GO LISTEN RIGHT NOW**](https://music.youtube.com/playlist?list=OLAK5uy_mGxPNqWtfO9Ye4SkYt0OCMcl4e5hlC53w). You're welcome.
DOCKER - How To Resolve "react exited with code 0"
Tags: react, docker, compose, linux
Published: 2020-07-24 06:37:25

# Resolving "react exit with code 0" when running a React container

![Exit Code](https://dev-to-uploads.s3.amazonaws.com/i/wyms8hs2h0fwztopvaqj.png)

I guess before running into this error on your Docker instance I presume you have basic knowledge of Docker and as such won't need to explain or give basic explanation about Docker and rather go straight to the solution of the aforementioned problem.


### The Error

The error is met when you run the below command on a set of project(s) that include a React App.

    docker-composer up

or try to start a React App container from an image on your Docker instance.

### For the simplest solution, Skip to <a href="#option-5">Option 5</a> :wink:

### Option 1

#### (While Running Multiple Containers)

> Add the configuration "tty:true" to your react instance

    	react:
    			tty: true //NOTE
    			build: dockerreact
    			ports: - "3000:3000"

### Option 2

#### (While Running Multiple Containers)

> Setting "stdin_open:true" to your react instance

    	react:
    			stdin_open: true //NOTE:
    			build: dockerreact
    			ports: - "3000:3000"

### Option 3

#### (While Running Multiple Containers or Single React Container)

> Add "CI=true" as a command that should be executed before "npm install" in your Dockerfile within your React project root directory

    FROM node:14.5

    RUN mkdir -p /usr/src/app
    WORKDIR /usr/src/app

    COPY package.json /usr/src/app

    RUN CI=true //NOTE

    RUN npm install
    COPY . /usr/src/app

    EXPOSE 3000
    CMD ["npm","start"]

### Option 4

#### (While Running Multiple Containers or Single React Container)

> Use "docker-compose run" instead of "docker-compose up" as this automatically sets either option 1 or 2 as true

    docker-compose run

NOTE: This is only works on already built docker images

### Option 5

#### (While Running Multiple Containers or Single React Container)

> Lastly, Downgrade your "react scripts" version to 3.4.0

NOTE: Downgrading to 3.3.0 or lower wont solve this error and might bring up other issues on your react project

    "dependencies": {
    		"@testing-library/jest-dom": "^4.2.4",
    		"@testing-library/react": "^9.3.2",
    		"@testing-library/user-event": "^7.1.2",
    		"react": "^16.13.1",
    		"react-dom": "^16.13.1",
    		"react-scripts": "3.4.0,  //NOTE:
    		"react-scripts": "3.4.1" //NOT WORKING
    },
YouTube Video | CSS Flexbox Course for Beginners - 1
Tags: css, html, youtube, webdev
Published: 2020-07-24 06:52:06

In this series we will look over the CSS Flexbox model and how easy it is to learn. With the creation of flexbox, we can create a modern day website with ease and ditching CSS frameworks like bootstrap.

Here is the first part of the series.

{% youtube -i7jnD5c_1c %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
SVG Colouring Paths
Tags: html
Published: 2020-07-24 06:47:43

Since we did our [SVG Sprites](https://daily-dev-tips.com/posts/svg-sprites/) yesterday, I was thinking if it was possible to colour each specific path.
And it turns out you can do so.

So for my example I took an icon existing of four elements, a man and a woman and the heads are separate from the bodies.

## HTML Structure

```html
<svg
  aria-hidden="true"
  style="position: absolute; width: 0; height: 0; overflow: hidden;"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <defs>
    <symbol id="icon-man-woman" viewBox="0 0 32 32">
      <path
        d="M8 3c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"
      ></path>
      <path
        d="M26 3c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"
      ></path>
      <path
        d="M8 8h-6c-1.105 0-2 0.895-2 2v10h2v12h2.5v-12h1v12h2.5v-12h2v-10c0-1.105-0.895-2-2-2z"
      ></path>
      <path
        d="M30.469 16l1.531-1.109-4.165-6.441c-0.185-0.281-0.499-0.45-0.835-0.45h-8c-0.336 0-0.65 0.169-0.835 0.45l-4.165 6.441 1.531 1.109 3.458-4.487 1.202 2.804-4.191 7.683h3.833l0.667 10h2v-10h1v10h2l0.667-10h3.833l-4.191-7.683 1.202-2.804 3.458 4.487z"
      ></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-man-woman">
  <use xlink:href="#icon-man-woman"></use>
</svg>
```

As you can see there are four paths in our definition symbol.

So how do we go about styling them all a different colour?

## Styling a CSS Path

I'm going to use the nth-child selector for each specific path.

```css
#icon-man-woman {
  path {
    &:nth-child(1) {
      fill: #83c5be;
    }
    &:nth-child(2) {
      fill: #ffddd2;
    }
    &:nth-child(3) {
      fill: #006d77;
    }
    &:nth-child(4) {
      fill: #e29578;
    }
  }
}
```

This will result in the following:

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="rebelchris" data-slug-hash="YzwgXwr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="SVG Colouring Paths">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/YzwgXwr">
  SVG Colouring Paths</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

## Browser Support

The support is pretty strong!

![SVG Fragment support](https://caniuse.bitsofco.de/image/svg-fragment.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Simple React Up and down Counter
Tags: react, javascript, html, css
Published: 2020-07-24 06:41:40

With the release of React Hooks by Facebook, management of state has become really easy in React. Hooks helps us in storing the new data which can be used later in the application in the same session.
A counter is a simple application which counts the number of times a button has been clicked. It can also be modified such that on click of one button the count increases and on the click of other the count decreases. This is a tutorial for such a counter. I apologize for the styling in advance, I have horrible taste in styling.
The first thing that we will do is create a simple React app. Type the following lines of code in the command window in the file location where you want to create the application.

"npx create-react-app appName"

This will create a basic React app that displays the React symbol. Create a new "**Counter.js**" file in the "**src**" folder.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ysc2bxbkevljjlr0110e.JPG)
The “**OnIncrementClick**” and “**OnDecrementClick**” acts as event handler which increases or decreases the count value. {count} displays the current count value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0f7kmaxp3d8549avetmp.JPG)
Count is a state variable which is set to a value using setCount. useState hook is used to make both these variables state variables. Whenever the Increment button is pressed the count value is increased by one and on the press of the Decrement button the count value is decreased by one.
You can test it here. [Click Here](https://codesandbox.io/embed/tender-bartik-4wrsz?fontsize=14&hidenavigation=1&theme=dark)
Can I know if this dress suits pregnant women?
Tags: machinelearning, deeplearning, chatbot, ai
Published: 2020-07-24 06:20:54

Building #ai #Chatbots that can answer FAQ and transactional questions is easy. Building a #chatbot that can answer complex customer questions is HARD.

You need much more than a chatbot - you need a full stack vertical #ai solution that can build out a #retail #knowledgegraph from the available data you have and then start generating its own data from the usage (akin a data flywheel).

Reach us to learn more how vertical #ai can help you delight your customers and improve #ecommerce conversions
Build A Flutter 💙 Tinder Clone with Firebase & BLoC #10/40 Tabs
Tags: flutter, tutorial, dart, career
Published: 2020-07-24 06:02:07

---
title: Build A Flutter 💙 Tinder Clone with Firebase & BLoC #10/40 Tabs
published: true
description: Tutorial on building a Tinder clone with Flutter, Firebase and Bloc
tags: #Flutter #Tutorial #dart #career
//cover_image: https://direct_url_to_image.jpg
---
In this series of videos we are going to build a Tinder clone with Flutter, Firebase as a backend and Bloc as our state management solution.

Here we set up the Tabs.

Protip: Watch video at 1.25 speed.

{% youtube eJ_74oL-fE8 %}
Alerts, Prompts and Confirm in Javascript
Tags: javascript, webdev, codenewbie, begi
Published: 2020-07-24 06:02:00

They are quite some Javascript functions, I discovered that quite a few beginners may  really in need of or might need a better understanding of the functionality and how they interact with the browsers.

Firstly, we will be looking into Alert. Hmmmm, not like credit alerts 🙂, so you don't have to get your hopes up so high.😄

• What is alert ? 
Basically alert makes use of a modal to display messages to the users (visitors of the website)  in the browsers.

Let's take a look at the code below, 
![Javascript alert](https://dev-to-uploads.s3.amazonaws.com/i/12pt70onnwx6qq1ryw0p.PNG)


• What is Prompt ?
Prompts enables the owner of the website to ask  users/ visitors question(s) before they proceed to using the website.
 Eg.

![Javascript Prompt ](https://dev-to-uploads.s3.amazonaws.com/i/3psikrwfbre9fk60hbda.PNG)



• What is confirm ?
Confirm looks like prompts in terms of the syntax but with the exception that it does not give an optional reply. 

![Javascript confirm function](https://dev-to-uploads.s3.amazonaws.com/i/oz8awonidbs8oq44qe6f.PNG)

Disadvantages of making use of this Javascript interaction functions.

• The browser displays it's where it wants it to be displayed. Mostly it's in the top center of the webpage.
• You can't format like increase the width, add color to the modal etc.
• You must opt out by clicking ok, cancel or ESC key before you continue using the webpage.

Aaya, this are all I can come up with for now, please kindly write under the comment section of they is anything you may wish to add to it or any corrections to the article. This would so mean mean alot to someone out there.

Thank you for reading!
[Java] Setting the PowerPoint Document Property MarkAsFinal as True
Tags: java, powerpoint
Published: 2020-07-24 06:00:18

Mark as Final means that the presentation slide is the final edition and the author doesn’t want anyone to edit or change the content inside. With Free Spire.Presentation for Java, we can protect the presentation slides by setting the document property MarkAsFinal as true. This article will share the Java code used to mark a PowerPoint document as final.

**Installation**
**Method 1:** Download the [Free Spire.Presentation for Java](https://www.e-iceblue.com/Download/presentation-for-java-free.html) and unzip it. Then add the Spire.Presentation.jar file to your project as dependency.

**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.

```java
<repositories>
        <repository>
            <id>com.e-iceblue</id>
            <name>e-iceblue</name>
            <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
        </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.presentation.free</artifactId>
        <version>2.6.1</version>
    </dependency>
</dependencies>
```

**Java Code:**

```java
import com.spire.presentation.FileFormat;
import com.spire.presentation.Presentation;

public class MarkAsFinal {
    public static void main(String[] args) throws Exception {

        //Create a PPT document and load file
        Presentation presentation = new Presentation();
        presentation.loadFromFile("test.pptx");

        //Set the document property MarkAsFinal as true
        presentation.getDocumentProperty().set("_MarkAsFinal", true);

        //Save the document to file
        presentation.saveToFile("MarkasFinal.pptx", FileFormat.PPTX_2010);
    }
}
```

**Output:**
![](https://dev-to-uploads.s3.amazonaws.com/i/ixqmbjh4saiyjt3qkc6s.png)
First chrome Extension
Tags: codenewbie, codequality, git
Published: 2020-07-24 05:44:45

I published my first chrome extension for minifying/expanding the blocks({...}) at the files in the GitLab
# While Minifying
![minify-img](https://i.imgur.com/2yIi5JI.png)

# While Expanding
![expand-img](https://i.imgur.com/ib29YXy.png)
####Source Link:
https://chrome.google.com/webstore/detail/gitlab-fold/ieghndfegpckpaipimgihlojdjpcppmh/related?hl=en
Should I move from PHP to Python?
Tags: php, python
Published: 2020-07-24 05:34:45

As an PHP developer, I was wanted to learn more about it, work on it, learn new techniques and explore all other possibilities in it. I have been working in PHP since 2011. It's been long journey, 10 yrs. But sometimes I think that am I stuck to only one programming language? 

Is it good time to learn new language like Python?

Please share your valuable experiences/thoughts.
eSlayers part 6 - fetching matches... finally
Tags: nextjs, react, javascript, html
Published: 2020-07-24 05:25:51

Finally made it to fetching some sort of match history. There is definitely a lot of refactoring that needs to be done, but for now, I am pretty content with what I got.

## Things I completed today

* Modified `server.ts` to add an additional proxy route. 
* Added a `Match.tsx` component which returns game_date and participants.
* Added a `Participant.tsx` component which will return a summoner's name from their `puuid`.
* Modified `Summoner.tsx` to test newly fetched data.
* Modify `fetchLeague.ts` URL to the updated proxy API.
* Modify `fetchSummoner.ts` URL to the updated proxy API and add in a new function to fetch summoner based on use `puuid`.
* Add a new fetch to get data of a single TFT match.
* Add a new fetch to get an array of matches.

## Pain points
There were a lot of issues at first because I was trying to do some data manipulation on stuff that was not fully fetched yet. I thought I was doing things right with `useSWR` conditional fetching, but I just fooled myself, sorta. Lot's of `console.logs` and chrome debugger to see what was happening and where my code was breaking. I landed on a solution that seems to work 100% of the time now. I think once I start breaking things down even further the pieces will start to come together and things will play nicer with each other.

## For the future
At some point, I am going to want to save this data to some sort of state manager. Deciding between redux or React.Context. I am also wondering if this app will be possible with just `useState`. I don't have a clear picture yet since I can do everything with fetching. Once I get to a "finalized" state of data that I am going to display I will decide on a state manager.
Website in Development
Tags: html, css, javascript
Published: 2020-07-24 05:17:13

I'm making myself a developer website.

This website is going to be the main page that everyone will find me in future. My website currently isn't on a domain but is in a github repository.

Link: https://github.com/drflamemontgomery/DevWebsite

Please feel free to give feedback and or criticism.

Ps: easy way of hosting website locally is to go to the directory and type in terminal - "python -m http.server". This will allow you to access it on a web browser by going to link "localhost:8000"
Day 2 - 10DaysOfJavaScript
Tags: challenge, javascript, beginners, programming
Published: 2020-07-24 05:12:51

![Day 2 - 10DaysOfJavaScript](https://dev-to-uploads.s3.amazonaws.com/i/7cjhlrqkjik5gd01m5wr.jpg)

### Day 2: Conditional Statements: If-Else

- An integer value score is provided for a students test
- 0 ≤ score ≤ 30
-  It must return the letter corresponding to grade

```javascript
function getGrade(score) {
    let grade;
    // Write your code here
    if(score<=5) {
        grade="F";
    }else if(score<=10) {
        grade='E';
    }else if(score<=15) {
        grade='D'
    }else if(score<=20) {
        grade ='C'
    }else if(score<=25) {
        grade ='B'
    }else if(score<=30) {
        grade='A'
    }
    return grade;
}

```

### Day 2: Conditional Statements: Switch

- A string is provided where its length is 1 ≤ s ≤ 100
- Given the following legend, return the correct value based on the first letter

```javascript
function getLetter(s) {
    let letter;
    // Write your code here
    switch (true) {
        case 'aeiou'.includes(s[0]):
            letter = 'A';
            break;
        case 'bcdfg'.includes(s[0]):
            letter = 'B';
            break;
        case 'hjklm'.includes(s[0]):
            letter = 'C';
            break;
        case 'npqrstvwxyz'.includes(s[0]):
            letter = 'D';
            break;
    }
    return letter;
}

```

Day 2: Loops

- Given a string of s of any length
- Output, in order, the vowels of that string on each new line
- Right after, output, in order, the consonants of that string on each new line

```javascript
/*
 * Complete the vowelsAndConsonants function.
 * Print your output using 'console.log()'.
 */
function vowelsAndConsonants(s) {
    let vowels = ['a','e','i','o','u'];

    for(let v of s) {
        if(vowels.includes(v))
            console.log(v);
    }
    for(let v of s) {
        if(!vowels.includes(v))
            console.log(v);
    }
}
string = 'javascriptloops'
vowelsAndConsonants(string)
```

**Check out [30 Days of Code| CodePerfectplus](https://codeperfectplus.com/category/10daysofjavascript/) for All solutions from this series.**

React ❤️ to encourage Author.
Go2: Map and Filter with Generics
Tags: go, todayisearched, news, codenewbie
Published: 2020-07-24 05:09:31

Go plans to add generics in their next big release since [2016](https://go.googlesource.com/proposal/+/refs/heads/master/design/15292-generics.md) and they have been working upon the syntax so that it matches with current semantics. 

In June 2020 they had released a [draft](https://go.googlesource.com/proposal/+/refs/heads/master/design/go2draft-type-parameters.md) for how about they have planned the syntax to match with their semantics.

One of the problems of Go which it was a lot criticized was that it had never had `map` and `filter` in built which is a lot used for functional programming. Gophers had to write a `for` loop to achieve but [Rob Pike](https://github.com/robpike) had written a [`filter`](https://github.com/robpike/filter) package to achieve this but it contains a lot of boilerplate and he suggests to use `for` loop. With Generics `map` and `filter` can be implemented quiet easily.


While going through the Go Reddit. I had found this [code](https://go2goplay.golang.org/p/7zFKUcpzhvZ) which implements `map`, `filter`, `any` and `all` in Go with Generics. You must have noticed that they use `[T]` instead of `<T>` for denoting them. They are currently testing and asking for feedback as `<T>` doesn't match with Go semantics. You can find the thread [here](https://www.reddit.com/r/golang/comments/hvpis5/go2_playground_now_supports_square_brackets_for/).

I hope Go2 will be best release of Go Language ever!
Automated Pull Requests, to merge or not?
Tags: security, discuss
Published: 2020-07-24 05:00:56

How do I review PR before merging, and what are the implications of merging?

Even if I merge, it should probably be easy to rollback?

Also, instead of sending hundreds of emails and notifications, before of one damn library (lodash, actually), please send only one summary. But for PRs, I guess it cannot be helped.

> Bump lodash from 4.17.15 to 4.17.19

![lodash suggestion](https://dev-to-uploads.s3.amazonaws.com/i/i4ycimphokkq4fz0z41p.png)

This is just wrong. I never use lodash either ways. (Actually, can't you scan `package.json`?) I can use `resolutions`, but it is very yarn-specific.