teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-05-11 19:30:22

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. What's Your Brand?

Niall explains the importance of personal branding and offers advice on how to develop your own brand.

{% link https://dev.to/nialljoemaher/personal-branding-for-your-career-4hgh %}

#2. Block Element Modifier

Pachi shares the what, why, and how behind this naming methodology for HTML and CSS.

{% link https://dev.to/pachicodes/what-is-bem-and-why-use-it-to-name-your-html-classes-2bd7 %}

#3. Goal Fulfillment 

Aral creates a tutorial to explore Deno, the runtime for JavaScript and TypeScript that's set to release on May 13, 2020. In this post, we learn how to build a simple chat application.

{% link https://dev.to/aralroca/learn-deno-chat-app-37f0 %}

#4. Practical Promises

Mariane doesn't give us an under-the-hood explanation of promises, instead they give us a practical explanation comparing promises to real-life promises.

{% link https://dev.to/marianesantana/promises-in-15-minutes-9l7 %}

#5. Fear No More

Milu tells us what git is, why it's important, ands break down the following basic commands in detail: clone, checkout, pull, add, commit, stash, and push.

{% link https://dev.to/milu_franz/git-explained-the-basics-igc %}

#6. Change It Up

This post is for anyone looking to spice up their next project with some fun APIs! 

{% link https://dev.to/biplov/15-fun-apis-for-your-next-project-5053 %}

#7. Flexibility, Scalability, Simplicity

Sara gives us an in-depth overview of microservices, what they are, how the architecture compares to monoliths, challenges, when to use microservices, and much more.

{% link https://dev.to/microtica/everything-you-need-to-know-to-get-started-with-microservices-5243 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Performant by Default, React Web Apps in 2020 (Video)
Tags: webdev, react, techtalks, beginners
Published: 2020-05-11 20:05:33

> This video is a talk from [*Byteconf React 2020*](https://www.bytesized.xyz/react-2020), a free, live-streamed React conference that aired on May 1st-2nd, 2020. Join our newsletter at the [conference website](https://www.bytesized.xyz/react-2020) to stay in the know about future conferences, videos, and more!

Building performing React apps is hard. Like really hard. You have to know how to setup webpack, Babel, code-splitting, TypeScript, and the list goes on. What about performance, eh? How about building SSR + SSG + Serverless + Offline enabled applications?

In 2020, when building React web applications, my default choice is Next.js. It offers built-in performance, route prefetching, dynamic imports with code splitting, and probably the best server-side rendering experience — all of that with a no config setup.

By the end of this talk, you'll be a lot less scared of creating high-performance web applications that are scalable with both static and dynamic serverless components.

Thanks to [Ahmad Awais](https://twitter.com/MrAhmadAwais) who presented this talk at [Byteconf React 2020](https://www.bytesized.xyz/react-2020)!

{% youtube Y0_3FFFMtZQ %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
Placeholder title
Tags: gftwhackathon
Published: 2020-05-11 22:15:35

[Instructions]: # (To submit to the Grant For The Web x DEV Hackathon, please fill out all sections.)


## What I built


### Submission Category: 

[Note]: # (Foundational Technology, Creative Catalyst, or Exciting Experiments)


## Demo
 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


## How I built it 

[Note]: # (For example, what's the stack? did you run into issues or discover something new along the way? etc!)


## Additional Resources/Info 


[Reminder]: # (We hope you consider expanding your submission into a full-on application for the Grant for the Web CFP, due on June 12.)
Maximum Points You Can Obtain from Cards - LeetCode
Tags: slidingwindow, dynamicprogramming, array
Published: 2020-05-12 02:34:14

---
title: Maximum Points You Can Obtain from Cards - LeetCode
published: true
description: LeetCode Medium problem solution
tags: sliding-window, dynamic-programming, array
---

The question is a bit tricky, In programming terms we need to find sub-array such that you can draw maximum points

Sliding winndow algorithm is a useful technique whenever you need to find some substring or subarray. Here we need to find a subarray from the beginning and end

## Explanation:

example: 
cardPoints = [1,2,3,4,5,6,1]
k = 3


1. [1,2,3,4,5,6,1] --> start = [1,2,3], end = [], max = 6
2. [1,2,3,4,5,6,1] --> start = [1,2], end = [1], max = 6
3. [1,2,3,4,5,6,1] --> start = [1], end = [6, 1], max = 8
4. [1,2,3,4,5,6,1] --> start = [], end = [5, 6, 1], max = 12

Here's the algorithm

1. Create these variables
	 * `leftWindow = k - 1`, wondering why leftWindow is k - 1? it's because we need array indices values
	 * `leftSum = 0`
	 * `rightWindow = cardPoints.length - 1`
	 * `rightSum = 0`
2. Now Loop through the card array k times and add each value to the leftSum
3. Let's assume leftSum is the maxSum `max = leftSum`
4. Start sliding the window while leftWindow is > 0 then decrease the leftSum and increase the rightSum. check whether leftSum + rightSum is greater than max

Here's the solution

```js
var maxScore = function(cardPoints, k) {
	let leftW = k - 1, 
		leftSum = 0, 
		rightW = cardPoints.length - 1, 
		rightSum = 0;

	for(let i = 0; i < k; i++) {
		leftSum += cardPoints[i];
	}

	let max = leftSum;

	while(leftW >= 0) {
		leftSum -= cardPoints[leftW];
		rightSum += cardPoints[rightW];

		leftW--;
		rightW--;

		max = Math.max(max, leftSum + rightSum);
	}

	return max;
};
```
Animated Responsive Product Cards using CSS & JavaScript 2020 (Video Format)
Tags: javascript, css, tutorial, beginners
Published: 2020-05-12 17:09:16

{% youtube 9Fj97yKUQbY %}

In this tutorial, we'll Create, Read, Delete Animated Responsive Product Cards with Hover Effects using HTML, CSS  & JavaScript only. This project-based tutorial is suitable for all especially beginners.

📕 Concepts covered in this video:
 - How to create Awesome Animated Responsive Dynamic Product Cards
 - CSS Grid
 - JavaScript DOM 
 - Flexbox 
 - CSS transitions
 - ES6+ Syntax

[**SUBSCRIBE**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA?sub_confirmation=1) our [**Youtube channel**](https://www.youtube.com/channel/UCBF2LIwr2Odb3-pRnNBRegA) if you want to get notified for more real-world **project-based tutorials**

Share this [video](https://youtu.be/82PZQ6NdCSk) with a friend

Let’s connect:
[Twitter](https://www.twitter.com/codeleague7) 
[Instagram](https://www.instagram.com/codeleague7)
[pt-BR] O que eh BEM e porque usar isso pra nomear HTML/CSS
Tags: braziliandevs, webdev, html, css
Published: 2020-05-12 20:00:23

Dia!!!

Hoje eu vou traduzir um post que escrevi em inglês e foi bem popular aqui, então acho que minha galera BR merece atenção também

Vou falar sobre uma ferramenta que eu uso pra desenvolver websites e deixa meu código mais bonitinho ao mesmo tempo que facilita minha vida... BEM!


##O que é BEM?
BEM (Bloco, Elemento, Modificador) é uma convenção de nomeação de classes em HTML e CSS e foi criado por um grupo chamado [Yandex](https://tech.yandex.com/bem/).
Basicamente, é uma metodologia que te ajuda a entender melhor as relações entre seu HTML e CSS e assim facilita pra você estilizar seu código.

##Por que usar BEM?
Você não TEM que usar, claro. Então porque eu recomendo?

- BEM da uma estrutura legal pro seu código, e é bem simples de usar.
- Facilita a estilização e leitura do seu HTML.
- Te ajuda a evitar conflitos de estilo,
- Consistência!!!

##Entao, COMO eu uso isso?

Okay, chegamos na parte divertida!

```html
<div class="hero">
<img class="hero__img">
</div>

<div class="main">
<h1 class="main__title">
<p class="main__text"></p>
<p class="main__text-special"></p>
<p class="main__text"></p>
</div>

```
Aqui temos um pedaço simples de código.
**Bloco:**
A < div > é o nosso bloco. Tudo que o bloco precisa é um nome simples e descritivo, e no nosso exemplo usamos HERO e MAIN.

**Elemento:**
Os elementos são os itens que vão dentro dos nossos blocos. Eles são parte dos blocos, então eles recebem o nome do bloco.
Além do nome do bloco, eles recebem um segundo nome, que deve ser descritivo pra facilitar a compreensão. Nosso exemplos são:
"main__text", "main__title" and "hero__img".

**Modificador:**
Enquanto essa parte é menos usada do que o Bloco e o elemento, e bem importante também. Os modificadores te avisam que um item é especial, mais ainda assim são elementos!.
Nosso segundo < p > tem o nome de "main___ text-special".
Talvez esse parágrafo vai ser de outro cor ou ter outra fonte. Quem sabe?
O importante é entender que enquanto isso ainda é um "main__ text", colocando o "-special" avisa que algo diferente vai ser adicionado.

##Porque  __ e - ???
Esse acentos são parte da metodologia do BEM.
Algumas pessoas seguem a ideia do BEM mas com outros sinais, e é okay se funciona pra você.

##Conclusao
Blocos só precisam de um nome,
Elementos precisam do nome do bloco + __ + o nome do elemento,
Modificadores precisam de tudo que o elemento precisa + um diferencial

Eu tentei explicar da forma mais simples possível, espero que esse post seja de utilidade rpa você!
BEM é uma metodologia bem legal e útil, e as poucas vezes que eu nao uso, pode apostar que eu vou ter algum problema com conflito de estilo no meu projeto haha

Obrigada por ler,
Pati.
Dark theme in SQL Server Management Studio
Tags: sql, codenewbie, webdev, showdev
Published: 2020-05-12 14:27:00

## Dark theme and me!🖤

I just love having dark theme for every tool and application I use on day to day basis, ranging from: VSCode, Notepad++ and Notion to Slack, Teams and Outlook.
After switching between a lot of dark themes in VSCode, I finally settled for Dracula due to the number of applications it supports. So now I can have single dark theme across all the applications that I use.
- [VSCode](https://draculatheme.com/visual-studio-code/)
- [Slack](https://draculatheme.com/slack/)
- [Notepad++](https://draculatheme.com/notepad-plus-plus/)
- [Terminal](https://draculatheme.com/terminal/)

Make sure to check them out.(I know most of us are already using them).

So now that you know about my love for dark themes, I was frustrated that you don't have one for SQL Server Management Studio (SSMS).
I was only aware of the "Blue" and "Light" theme that you can toggle between by going to: Tools > Options > Environment > General > Color theme:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/brk4kxgkoumixkx1yqc5.png)


But I found out through my colleague that you can set it up, and here are the steps on how you can do it:
(Disclaimer: It's not officially supported)

### Step 1:
Locate and update the config file.
Open any text editor as Administrator, in my case its Notepad++ (as if I have not mentioned it enough 😊). Now we will locate the 'ssms.pkgundef' file.
- For SSMS 17 its: C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio
- For SSMS 18: C:\Program Files (x86)\Microsoft SQL Server Management Studio 18\Common7\IDE

And open it.

### Step 2:
Disable "Remove Dark Theme"
So now you have the file open, scroll down and find the section of the code under the “Remove Dark theme” heading, add “//” to comment out that line, and save the file:

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

### Step 3:
It's time to see the magic!🖤
Start SSMS and the 'Dark' will be available in the Color theme drop-down menu:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5tf3f8gcab6wvfb86zxa.png)
Matplotlib and data visualization
Tags: python
Published: 2020-05-12 14:39:03

Data processing, analysis and visualization has become one of the most important applications of <a href="https://python.org">Python</a> in recent years.

Data visualization refers to presenting data as beautiful statistical charts and then further discovering the laws and hidden information contained in the data. 

Data visualization is closely related to data mining and big data analytics, and the ultimate goal of these areas, as well as the much-talked-about "deep learning," is to predict the future from past data.

## Installing matplotlib

PIP can be used to install matplotlib with the following command.

    pip install matplotlib

## Plotting

The code to draw a **line plot** is shown below:

```python
# coding: utf-8
import matplotlib.pyplot as plt
def main():
    x_values = [x for x in range(1, 11)]
    y_values = [x ** 2 for x in range(1, 11)]

    plt.title('Square Numbers')
    plt.xlabel('Value', fontsize=18)
    plt.ylabel('Square', fontsize=18)
    plt.tick_params(axis='both', labelsize=16)
    plt.plot(x_values, y_values)
    plt.show()
if __name__ == '__main__':
    main()
```

![matplotlib line chart](https://dev-to-uploads.s3.amazonaws.com/i/8wd36sehml1hutxz9ljz.png)

You can make all kinds of <a href="https://pythonspot.com/matplotlib-line-chart/">line charts with Python</a>.

You can **draw a histogram** with matplotlib too.

We can use the normal function of NumPy's random module to generate normally distributed sampling data, where the three parameters represent the expectation, standard deviation and sample size, respectively, and then plot them as histograms, as shown in the code below.

```python
# coding: utf-8
import matplotlib.pyplot as plt
import numpy as np
def main():
    data = np.random.normal(10.0, 5.0, 1000)
    plt.hist(data, 10)
    plt.show()
if __name__ == '__main__':
    main()
```

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

**Related links:**
* <a href="https://pythonbasics.org/#Plotting">Matplotlib and seaborn examples</a>
* <a href="https://gumroad.com/l/mpdp">Matplotlib course</a>
Play2Earn - a gamer’s dream come true?
Tags: blockchain, play2earn, games, dapp
Published: 2020-05-12 16:02:49

Do you still remember that day on which you were playing your favorite game and thought: „I wish somebody would pay me for what I’m doing here!“? I do. I was fantasizing about this a lot. The reality was sobering, however, and the idea vanished from my head - until the rise of crypto.

Blockchain technology has breathed new life into the play-2-earn concept and it diversified from there on. After the crypto kitties hype in 2017 - a game about breeding and trading blockchain kitties -, a number of trading card games (TCG) emerged. In these games each card represents a non-fungible token (NFT) on the blockchain, which can be traded on decentralized market places. Cards initially need to be purchased or earned and some can be upgraded over time. The idea is that adoption will drive the price, so you can make a nice profit when finally selling your collection. Representatives of this type of game are Gods Unchained or Spells of Genesis.

![Gods Unchained](https://dev-to-uploads.s3.amazonaws.com/i/arl3ztafyj5zm778f6k3.png)

Some game developers extended this concept by incorporating a more complex in-game ecosystem. A simple example is the TCG Axie Infinity, where you breed cute blockchain monsters for battle. For breeding you need love potions which can be either earned in-game or purchased on any decentralized exchange. Of course, they can be sold there as well. I admit, buying and selling love potions is not yet very complex, but there are also games with bigger plans out there like Privateers Life, which aims to build a life-like ecosystem with all resources needed to be produced in-game.

![Axie Infinity](https://dev-to-uploads.s3.amazonaws.com/i/meqpem8u0y2w3m35q1r6.png)

It may sound like, but not all play-2-earn blockchain games are about trading cards and NFTs. In the bomberman-inspired game cryptoman, for example, you earn real-value crypto such as ETH or DAI by blowing up other players on a multiplayer-battlefield. If you manage to climb up the leaderboard high enough, you even get a share of the revenue as long as you’re holding your place. Additionally, cryptoman is frequently hosting events, such as tournaments, with special prizes and giveaways.

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

This, my friends, might be the beginning of a new era. With more and more projects hopping onto the play-2-earn train, it will soon be unstoppable and we’ll finally be able to make money by doing what we enjoy the most! 

While the biggest chunk of work needs to be done by the game developers, we all can help making this future come true by supporting the early stage projects. So, have fun and earn some crypto!


Links to the projects mentioned in this post:
https://www.cryptokitties.co
https://godsunchained.com
https://spellsofgenesis.com
https://axieinfinity.com
https://privateers.life
https://cryptoman.app
taskwarrior with Python
Tags: python
Published: 2020-05-13 13:44:26

<a href="https://taskwarrior.org/">Taskwarrior</a> is Free and Open Source Software that manages your TODO listing from the command line. It is flexible, fast, and unobtrusive. It does its job then gets out of your way.

### Setup taskw

You can use Taskwarrior from <a href="https://python.org">Python</a> using the module taskw. Using taskw requires that you first set up taskwarrior.

Installing it is easy with <a href="https://pythonbasics.org/how-to-use-pip-and-pypi/">pip</a>:

```
$ pip install taskw
```

That will install the taskw module on your system. If you don't want a system wide installation add `--user` or setup inside a virtual environment.

### Taskwarrior in Python

Using taskwarrior from Python

Looking at tasks

```python
    >>> from taskw import TaskWarrior
    >>> w = TaskWarrior()
    >>> tasks = w.load_tasks()
    >>> tasks.keys()
    ['completed', 'pending']
    >>> type(tasks['pending'])
    <type 'list'>
    >>> type(tasks['pending'][0])
    <type 'dict'>
```

Adding tasks

```python
    >>> from taskw import TaskWarrior
    >>> w = TaskWarrior()
    >>> w.task_add("Eat food")
    >>> w.task_add("Take a nap", priority="H", project="life", due="1359090000")
```

Retrieving tasks

```python
    >>> from taskw import TaskWarrior
    >>> w = TaskWarrior()
    >>> w.get_task(id=5)
```

Updating tasks

```python
    >>> from taskw import TaskWarrior
    >>> w = TaskWarrior()
    >>> id, task = w.get_task(id=14)
    >>> task['project'] = 'Updated project name'
    >>> w.task_update(task)
```

Deleting tasks
```python
    >>> from taskw import TaskWarrior
    >>> w = TaskWarrior()
    >>> w.task_delete(id=3)
```
Completing tasks
```python
    >>> from taskw import TaskWarrior
    >>> w = TaskWarrior()
    >>> w.task_done(id=46)
```

**Related links:**
* <a href="https://taskwarrior.org/">Taskwarrior</a>
* <a href="https://pythonbasics.org/">Learn Python</a>
Forward arguments in shell
Tags: shell, bash, cli
Published: 2020-05-13 14:16:00

---
title: Forward arguments in shell
date: '2020-05-13T14:16:00Z'
original_date: '2020-04-11T10:12:00Z'
description: 'Optionally eating arguments, and passing the rest to the next process.'
canonical_url: https://derk-jan.com/2020/04/forward-in-shell
series: dj-weekly
tags: shell, bash, cli
published: true
---

> Originally published at [derk-jan.com](https://derk-jan.com/2020/04/forward-in-shell/). I have recently [taken up writing, again](https://derk-jan.com/here-we-go-again/) and am trying to commit to at least one helpful post each week for the next 52 weeks.

For one of my CLIs, I needed to remove the first argument from the argument list and forward the rest to a next process. In this example, my shell script is called `cli_process` and given arguments `arg1`, `arg2` and `arg3`, I want to execute `forward_process` with `arg2` and `arg3`.

```bash
#!/usr/bin/env bash

# Documentation on @
#   https://www.gnu.org/savannah-checkouts/gnu/bash/manual/bash.html#index-_0040
# Documentation on shift [n]
#   https://www.gnu.org/savannah-checkouts/gnu/bash/manual/bash.html#index-shift
# Why quoting the argument is "necessary":
#   https://stackoverflow.com/questions/4824590/propagate-all-arguments-in-a-bash-shell-script/4824637#4824637

# eats 1 argument
shift 1

# forwards the rest to "forward_process"
forward_process "$@"
```

_Originally posted as a [gist][gist], by myself_.

## Windows

Windows `.bat` files support a similar token: `%*`, which is equivalent to `$@`.
However, the `SHIFT` command, unlike the bash equivalent `shift`, doesn't modify this special token. There are various solutions that will attempt to eat the first `n` parameters, but all of them have edge-cases in which they don't properly work. Should you need this in windows, I recommend you write out the arguments manually `%2`, `%3` (and skip `%1`).

Here you can find some Windows solutions, but make sure you check the comments underneath each one:

- [StackOverflow (935609): batch parameters: everything after %1][so-935609]
- [StackOverflow (761615): Is there a way to indicate the last n parameters in a batch file?
  ][so-761615]

## Resources

- [Bash documentation][doc-at] for `@`
- [Bash documentation][doc-shift] for `shift`
- [StackOverflow (4824590)][so-4824590] on why you need the "quotes" around "@\$"

[gist]: https://gist.github.com/SleeplessByte/ea551df4088d3629f2e5fddcce6b48ea
[so-935609]: https://stackoverflow.com/questions/935609/batch-parameters-everything-after-1
[so-761615]: https://stackoverflow.com/questions/761615/is-there-a-way-to-indicate-the-last-n-parameters-in-a-batch-file/761658#761658
[so-4824590]: https://stackoverflow.com/questions/4824590/propagate-all-arguments-in-a-bash-shell-script/4824637#4824637
[doc-at]: https://www.gnu.org/savannah-checkouts/gnu/bash/manual/bash.html#index-_0040
[doc-shift]: https://www.gnu.org/savannah-checkouts/gnu/bash/manual/bash.html#index-shift


---

Want these short articles in your e-mail? [📧 Sign up for my newsletter](https://buttondown.email/SleeplessByte).