teleren/devto huggingface dataset:
What the Error? ReactJS: Rendered fewer hooks than expected
Tags: beginners, discuss, tutorial, tips
Published: 2019-05-19 14:50:17

---
title: What the Error? ReactJS: Rendered fewer hooks than expected
published: true
description: How to debug and fix the "Rendered fewer hooks than expected" error in ReactJS
tags: beginners,discuss,tutorial,tips
cover_image: https://owenconti.com/static/images/rendered-fewer-hooks-than-expected.jpg
---

This is the first video in my new series, What the Error? where I debug and resolve common error messages in web frameworks.

This video covers ReactJS's "Rendered fewer hooks than expected".

{% youtube Zx13z4Is_PA %}
How to setup a spring-boot project
Tags: spring, springboot, springframework
Published: 2019-05-19 12:44:59

---
title: How to setup a spring-boot project
published: true
description: Tutorial on how to setup a spring-boot project
tags: spring, spring-boot, spring-framework
---

# Setup

To download SpringBoot go to <a href="https://start.spring.io" target="_blank">start.spring.io</a> and make sure your config is as follows (remember to replace the `Group` description, and to add the `Web` dependency):

![spring boot config](https://thepracticaldev.s3.amazonaws.com/i/n1k7xudoam5joiafzpnn.png)


---


### With [Intellij](https://www.jetbrains.com/idea/download)

- File > New > Project from existing sources
- Select `Gradle` option (since we've chose it to be our build and dependencies manager)
- Select the `Use auto-import` option so dependencies can be automatically downloaded
- `Select the downloaded spring-boot folder`
- Wait until all dependencies are downloaded (This might take a few minutes)



### With command-line
- Install [Gradle](https://gradle.org/install/) (Install maven if you chose it as your build and dependencies manager
- Copy the downloaded folder to Intellij directory
- Enter the folder and run `gradle build` (This command also run application tests)

## Runing the project with Intellij

The right upper corner of your IDE there is this green `play` button. Just click on it and watch the IDE's terminal for a similar output:
```bash
2019-05-19 09:36:07.615  INFO 70436 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2019-05-19 09:36:07.751  INFO 70436 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2019-05-19 09:36:07.754  INFO 70436 --- [           main] com.example.demo.DemoApplicationKt       : Started DemoApplicationKt in 1.826 seconds (JVM running for 2.28)
2019-05-19 09:36:12.131  INFO 70436 --- [       Thread-4] o.s.s.concurrent.ThreadPoolTaskExecutor  : Shutting down ExecutorService 'applicationTaskExecutor'
```


## Runing the project with command-line
- Inside the project's folder run `gradle bootRun` and for an output as presented above.


---

Let me know if you had any issues in the commends below, or leave a reaction if everything worked as expected.
How To Avoid Long BEM Modifiers
Tags: css, html, discuss, webdev
Published: 2019-05-19 10:37:48

Before we begin, we should all get on the same page.

# What is BEM? 🤔

First of all, BEM is a naming convention. In my opinion, it makes the CSS easier to read and understand. It makes it easier to scale and generally more easy to work with. BEM is an abbreviation of the overall concept. The elements of the structure is **B**lock, **E**lement and **M**odifier. The description of the examples are inspired by the official guide.

## Block

This is a standalone entity that has its own meaning and purpose. The block is `.button`.

```css
.button {
    display: inline-block;
    padding: 1em;
}
```

## Element

This should be a part of a block that has no standalone meaning and purpose. It should be semantically tied to its block. The element is `&__text`.

```css
.button {
    display: inline-block;
    padding: 1em;
    
    &__text {
        font-size: 1em;
        font-weight: 400;
    }
}
```

## Modifier

This should be a flag on a block or an element. Here we are able to change appearance or behavior. The modifier is `&--bold`.

```css
.button {
    display: inline-block;
    padding: 1em;
    
    &__text {
        font-size: 1em;
        font-weight: 400;
        
        &--bold {
            font-weight: 700;
        }
    }
}
```

One of the most important rules is, that you can’t have an element inside an element and you can’t have a modifier inside a modifier.

# What is the problem? 🤔

With BEM modifiers the naming convention can result in very long selectors. This can damage the readability.


We could make modifiers like this:

```css
.button {
  &.--small {
    height: 2em;
  }
}
```

In this way we could do this `<button class="button --small"></button>`.

Instead of this:

```css
.button {
  &--small {
    height: 2em;
  }
}
```

Which results in longer selectors `<button class="c-button c-button--small"></button>`.

It would make it easier to get an overview, when reading the outputted code. We just need not to make classes named `--modifier` outside of a block. That would also be weird.

> What do you think? 🤔
> What could break this idea? 🤔

Thank you for your time!

If you liked this, then please ❤️ and [*follow me on Twitter*](https://twitter.com/mrsteffenp).
I am self-taught fullstack engineer who studied Political Science :D, Ask Me Anything!
Tags: ama
Published: 2019-05-19 11:48:45

I started coding when I was 12 years old. As the title suggests, I studied political science and international relations in the university. I am now working as a fullstack engineer at tutti.ch, an online marketplace operating in Switzerland with more than 15m monthly page views (that's a lot for Switzerland :P).
Shorten the length of Border-Bottom
Tags: css
Published: 2019-05-19 11:47:58

If you are like me, you have ran into this issue many times. Need to add a border to the bottom of an parent element but you don’t want it to be under 100% of the element.
Can this be done in css?
Which led me to the answer…YES!

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="GhHaider" data-slug-hash="vwJXVw" 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="Shorten the length of Border-Bottom with CSS">
  <span>See the Pen <a href="https://codepen.io/GhHaider/pen/vwJXVw/">
  Shorten the length of Border-Bottom with CSS</a> by Ghulam Haider (<a href="https://codepen.io/GhHaider">@GhHaider</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Decorator pattern in javascript
Tags: javascript, designpatterns, decoratorpattern
Published: 2019-05-19 10:03:07

---
title: Decorator pattern in javascript
published: true
description: Implement the decorator pattern in javascript
tags: javascript, design patterns, decorator pattern
---
One of the interesting patterns in the programming world is the decorator pattern.
this is a definition which I've taken from Wikipedia.
"In object-oriented programming, the decorator pattern is a design pattern that allows the behaviour to be added to an individual object, dynamically, without affecting the behaviour of other objects from the same class."
we can use that to add some extra behaviour in our methods for example logging, measuring running time, prevent special input to send to the functions and etc.
I myself used this pattern several times in my own back-end projects with C# but I was excited to create a simple library to do this in javascript so I decided to share my experience with you.
First of all, I've created a repository for this library and you can access the code via this link:
https://github.com/mfaghfoory/javascript-object-decorator

there is a simple function called 'decorate' inside js-decorator.js file and it takes 5 parameters (four of them are optional) and returns a decorated object.

```javascript 
decorate(object, [beforeCall], [afterCall], [onCall], [onException])
 ```

For example, imagine we have an object like this:

```javascript
let product = {
  name: "tv",
  price: 600,
  printInfo() {
    console.log(`${this.name}-${this.price}$`);
  },
  logToDb() {
    //send this object to DB
  }
};
```
and we want to log some functions result or measure its running time so we can create our hook functions like this and pass them to 'decorate' function:

```javascript 
let beforeCall = res => {
};
let afterCall = res => {
};
let onCall = res => {
};
let onException = error => {
};
product = decorate(product, beforeCall, afterCall, onCall, onException);
 ```
For example:
```javascript 
let beforeCall = res => {
  console.log("before call:" + JSON.stringify(res));
  console.time();
};
let afterCall = res => {
  console.log("after call:" + JSON.stringify(res));
  console.timeEnd();
};
let onCall = (func, args) => {
  //can modify the result like this:
  //let res = func(args);
  //return '--' + res + '--'
};
let onException = error => {
  //log error to db
};
product = decorate(product, beforeCall, afterCall, onCall, onException);
product.printInfo();

//Result:

//before call:{"method":"printInfo","args":[],"object":{"name":"tv","price":600}}
//tv-600$
//after call:{"method":"printInfo","args":[], result: undefined,"object":{"name":"tv","price":600}}
//default: 0.291015625ms
```
I've just created this library so feel free to give your suggestions and I'll be happy to apply your good ideas in the repository.

Happy coding :)
starting my journey on web development
Tags: programming, webdev, journey
Published: 2019-05-19 09:26:28

---
title: starting my journey on web development
published: true
description: everything is difficult at first
tags: #programming #web_development #journey
---
I think I was so stressed at the very first time because I didn't have any resources and courses to start.

Fortunately started from one the best websites that really helped me to learn and start programming and how to underestimate things better, I started from c# course and that was absolutely significant, although I had not any idea of how things work and what's even programming, the course was perfect and I could learn lots of things from that.

The main subject that was so fantastic is about OOP(object oriented programming) there are really phenomenal examples and side projects.

Despite its persian language, if you want to get started on programming you should take their course.

www.7learn.com
Run React Native app on Real Android device using WiFi on Windows
Tags: reactnative, android, ios, javascript
Published: 2019-05-19 07:37:03

---
title: Run React Native app on Real Android device using WiFi on Windows
published: true
description: Run React Native app on Real Android device using WiFi on Windows
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/05/run-react-native-app-on-real-android-via-wifi.html" > Run React Native app on Real Android device using WiFi on Windows</a>

In our previous tutorial we have already explained how to run react native app on physical android device through cable on windows platform. In this tutorial, I am going to show you how we can run our react native app on real android device through WiFi connection on windows platform. To run your react native app on real android device using WiFi, your real android device and your development machine must be shared same network.

<img src="https://4.bp.blogspot.com/-wbx7bAlbiEI/XOD5GSjnnZI/AAAAAAAACzs/2UssxLOHqFgHY-q1sFEXXdI6XkK5h9nPgCLcBGAs/s400/run-react-native-app-on-real-android-via-wifi.jpg" /> 

<a href="https://www.skptricks.com/2019/05/run-react-native-app-on-real-android-via-wifi.html" >Click here to read more... </a>
Must Know Shell Keybindings 🐧🐚
Tags: cli, linux, zsh, bash
Published: 2020-04-07 06:21:13

---
title: Must Know Shell Keybindings 🐧🐚
published: true
date: 2019-05-19 04:51:00 UTC
tags: cli,linux,zsh,bash
canonical_url: 
---

<u></u>

[![](https://lh3.googleusercontent.com/-TDi6xSFtwRk/XZSDoYQOShI/AAAAAAAALVg/qdf4E6qLMQkE4z3SkJnlx2Nx5C4QrXidwCLcBGAsYHQ/s640/1570014102979239-0.png)](https://lh3.googleusercontent.com/-TDi6xSFtwRk/XZSDoYQOShI/AAAAAAAALVg/qdf4E6qLMQkE4z3SkJnlx2Nx5C4QrXidwCLcBGAsYHQ/s1600/1570014102979239-0.png)
  
<u></u>  

<u><u><br></u></u>
<u>A</u> shell also known as the command line is one of the most important tools for any software developer. You can do very complex things very quickly here. Learning to use the shell efficiently can make your life much easier.  
  

In this post I'll be writing about the most useful keybindings for the bash and zsh shells. \*nix systems generally ship with the Bourne again shell or bash and zsh or Z shell is also quite popular among developers as it provides some very powerful features. Some of these shortcuts may work with other shells too.  
  

# **Shell Keybindings**  
  

## **Navigation** 🚀

Alt + f/b  - Move cursor to previous/next word  
Ctrl + a/e - Move cursor to beginning/end of command  
Ctrl + xx  - Toggle between the start of line and current cursor position

---

## **Editing** ✏️

Ctrl + x,e   - Open command in editor  
Ctrl + k     - Cut till end  
Ctrl + u     - Delete whole line (zsh)/ cut until beginning (bash)  
Alt + w      - Delete until beginning (zsh)  
Alt + l/u    - Lowercase/Uppercase word  
Alt + c       - Capitalize word  
Ctrl + w     - Cut previous word  
Alt + Del    - Delete previous word  
Alt + d        - Delete next word  
Alt +. or !$ - Previous commands last arguement  
!\*                - All arguments of previous command  
Alt + t        - Swap current word with previous  
Ctrl + t       - Swap the last two characters before the cursor (typo). <br>  
Esc + t       - Swap the last two words before the cursor  
Ctrl + y      - Paste  
Ctrl + \_      - Undo  
Alt + r        - Cancel the changes, revert

---

## **Process** 📊

Ctrl + l - Clear screen   
Ctrl + c - Interrupt/Kill   
Ctrl + d - Close current shell   
Ctrl + z - Background/Foreground job

---

## **History** ⏳

Ctrl + r   - History search  
Ctrl + s   - Go back to the next most recent command  
^abc­^­def   - Run previous command, replacing abc with def

---

## **Modes** 🕹️

Ctrl +x,v - vi mode (zsh)  
set -o vi - Vi mode

  

If you know any other useful keybindings, feel free to comment below.  
GitHub gist [here](https://gist.github.com/9c6d607e160b0439a186d4fbd1bd81df).
PowerShell Core | API Azure |Azure Database for MySQL
Tags: savemoney, restapi, powershell, automation
Published: 2019-11-17 17:24:18

---
title: PowerShell Core | API Azure |Azure Database for MySQL
published: true
date: 2019-05-19 03:39:42 UTC
tags: save-money,rest-api,powershell,automation
canonical_url: 
---

#### Provisionando recursos de banco de dados MySQL consumindo a API do Azure.

![](https://cdn-images-1.medium.com/max/1024/1*h2k0Bpmlh6Dkf8tuwgN8CQ.png)<figcaption>PowerShell Core Azure Rest API e MySQL</figcaption>

E ae, beleza pessoal? falando mais uma vez de como criar um recurso no Azure através do PowerShell, em outro artigo provisionei um recurso utilizando o provider listado do PostgreSQL que no final das contas bate na API REST do Azure e cria o(s) recurso(s). Neste artigo vamos provisionar o Azure Database for MySQL enviando uma requisição web. Veremos como recuperar as informações de assinatura, em qual contexto estamos, etc. É uma ótima opção para escapar de ter que logar inúmeras vezes para provisionar o recurso na “mão” 🙌.

Obs: Para esta demo utilizo um grupo de recursos chamado **testeGratuitoAzure** se você não possui o mesmo grupo de recursos será necessário alterar alguns trechos do script ou criar o ResourceGroup. Outro ponto importante é o custo, acesse o link e verifique [https://azure.microsoft.com/en-us/pricing/calculator/?service=mysql](https://azure.microsoft.com/en-us/pricing/calculator/?service=mysql) .

Feita as considerações vamos a 😈 DEMO😈 ✊ ✌️.

{% gist https://gist.github.com/EwertonJordao/d3a194521ba62d7f684e47aeb4c470de.js %}

![](https://cdn-images-1.medium.com/max/1024/1*GdmvkbqKdl5PmjvpNX7F5Q.png)<figcaption>Resultado após executar o script.</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*r-m9K9S-pLwPbggGLv235Q.png)<figcaption>Visualizando o log do Azure (Get-Azlog)</figcaption>

Se tudo estiver ok, após as validações da API a criação dos recursos será concluída com sucesso ou falha 😅, com o cmdlet **Get-AzLog** você pode consultar o log de execução da criação dos recursos no Azure, para saber se obteve sucesso na criação do recurso ou se deve corrigir algum parâmetro na requisição. Informando o parâmetro ResourceProvider você filtra o resultado da consulta do log.

![](https://cdn-images-1.medium.com/max/559/1*wOAbPruZrZghz_FOzXa68g.png)<figcaption>resultado da execução do Get-AzResource</figcaption>

Utilizando o **Get-AzResource** ele vai retornar todos os recursos provisionados no Azure.

![](https://cdn-images-1.medium.com/max/993/1*QAGPWgJmAGkZ14lRO38c-Q.png)<figcaption>Recurso criado no Azure.</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*6sP3DqyozmU5CB_5HU4S3A.png)<figcaption>Servidor de Banco de dados MySQL visão portal Azure</figcaption>

É isso pessoal, demonstrei como o PowerShell facilita o provisionamento de recursos consumindo a API REST do Azure ☁️ .

Não se esqueça, **PS é vida**  😍.
How to Study for a Test by Making a Website
Tags: studying, learning, gatsby
Published: 2019-05-19 03:14:39

---
title: How to Study for a Test by Making a Website
published: true
description: I have a final a in a few days, but have also been itching to write code outside of work. So, I'm making a site to study for my final!
tags: studying, learning, gatsby
cover_image: https://thepracticaldev.s3.amazonaws.com/i/710igobqin8ewfu26hm8.jpg
---

With my crazy schedule of driving 1.5 hours one-way for a class four days a week, I haven't had as much time to write code outside of work. I also see tons of people on Twitter talking about React or Gatbsy, which makes me want to dig into them even more.

So, I'm making an informational website on Discrete and Combinatorial Mathematics II to study *and* practice my Gatsby skills. 😉 The course material is separated very nicely already: 7 advanced topics and 6 core topics. So far, there's one page for each which are linked from the home page with a little summary description.

![](https://thepracticaldev.s3.amazonaws.com/i/4az0rsudygy5gq04uy0q.png)
<figcaption>Preview of the home page.</figcaption>

On each page, I plan on showing a list at the top of the important terms and definitions the relevant textbook section and I'm also inserting the examples most helpful to me.

![](https://thepracticaldev.s3.amazonaws.com/i/yhov3ts4yi3ygi26xjd0.png)
<figcaption>Preview of a topic's page.</figcaption>

Finally, I'm also creating a glossary page where all of the important terms and definitions will be formally described and linked to from any of the other site pages.

![](https://thepracticaldev.s3.amazonaws.com/i/bkyxf8891q4t2wcsdm4h.png)
<figcaption>Preview of the terms page.</figcaption>

I feel extremely nerdy for doing this and it's *actually* incredibly fun. I'm trying to pick up on little things along the way too, such as practicing semantic HTML. I found this really cool post while looking up the differences between `<section>` and `<article>` elements.

{% link https://dev.to/zac_heisey/7-alternatives-to-the-div-tag-in-html-62i %}

I hope this post inspires you to do whatever it takes to accomplish your goals. Figure out what tactics work for you, and [just get it done](https://dev.to/ashleemboyer/just-do-the-thing-10el).

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*[Image](https://unsplash.com/photos/YoadQb46v6k) by [Craig Garner](https://unsplash.com/@craiggarner) on [Unsplash](https://unsplash.com).*
React Native configuration problems with gradle
Tags: reactnative, react, javascript, gradle
Published: 2019-05-19 00:36:33

I'm facing some trouble when trying to use react native. When I use gradle tool to build my project it never works. I made some research and I realized that people often face problems on the configuration of react native. 

Here is the link for my question in stackoverflow:

https://stackoverflow.com/questions/56199876/react-native-problems-with-gradle-tool

Does anyone can give me some help?
What the heck are args and kwargs?
Tags: python
Published: 2019-06-01 17:05:46

---
title: What the heck are args and kwargs?
published: true
tags: [Python]
canonical_url: https://warrenwong.org/what-the-heck-are-args-and-kwargs/
cover_image: https://warrenwong.org/static/c211fcc64b59e4016fc046a99974d3c7/96726/matt-artz-438139-unsplash.jpg
---

So you're looking at someone's Python code and see something crazy, like `*args` and `**kwargs`. What the heck are those?

We will have to unpack it since there's a couple things that maybe causing confusion. First off, what does the `*` and `**` do? Then, what do `args` and `kwargs` mean? And finally, what is it used for?

The `*` is a way of unpacking the `list` or `tuple` data structure and the `**` is a way of unpacking a `dict`. `args` as you can guess, means arguments. Now `kwargs` maybe harder to guess, but you can probably deduce "kw" to mean "keyword". With that, you can guess that `args` represents the arguments passed to a function separated by a comma and `kwargs` are the keyword arguments.

The main reason for using `args` and `kwargs` are pretty simple if you're trying to create a higher-order function in Python. Rather than passing in a bunch of named arguments as well as keyword arguments, using `args` and `kwargs` allows for generalizing the the function signature so that you can accommodate almost any function.

#### Reference

[Unpacking Argument Lists](https://docs.python.org/3.7/tutorial/controlflow.html#unpacking-argument-lists)
Language for markdown_helper? 
Tags: programming, markdown, windows, discuss
Published: 2019-05-18 23:21:15

---
title: Language for markdown_helper? 
published: true
description: 
tags: programming, markdown, windows, discuss
---
My most popular Ruby gem, [markdown_helper](https://rubygems.org/gems/markdown_helper) (closing in on 8,000 downloads) has the drawback that a potential user must have Ruby installed.

For many Linux users, that's not likely to be a problem because many Linux installations include Ruby.

But a Windows user who doesn't have Ruby installed would have to install it.  That's a pretty big footprint for a minor utility.

So I'm thinking about doing a second implementation, one that would produce a single Windows executable that would work right out of the box.

To decide on a language for this, I think there are two considerations:

- The build must product a single executable file.
- The language should be one that would encourage, rather than discourage, contributors.

This will be on GitHub (in fact, the utility only works inside a GitHub project), so the preferences of GitHub programmers will be important.

So the question is:

- What should the language be?  (And of course, Why?)

I'll appreciate your thoughts.

Oh, and note that the actual *user* of this utility does not need to know that language. because it will be an executable.
Can someone help me out
Tags: css, html, help, helpmeplz
Published: 2019-05-18 20:31:16

So my site is http://hunter.us.to/ and the https version, which doesn't update as regularly as the http one, is https://falsegamer.tk/ . But anyways, I would like my website more graphical but I don't know where to start. Could someone help me or even possibly do it for me. Thank you.
Smartphone  template placeholder
Tags: codepen
Published: 2019-05-18 19:43:09

---
title: Smartphone  template placeholder
published: true
tags: codepen
---

<p>Drawing of a smartphone, free template placeholder that you can use for your projects to display how your app would look on a phone.</p>

{% codepen https://codepen.io/SBabic/pen/qGjzgP %}