teleren/devto huggingface dataset:
Why 100vw causes horizontal scrollbar
Tags: css
Published: 2020-06-05 02:17:58

---
canonical_url: https://tepy.dev/til/why-100vw-causes-horizontal-scroll
---
> This post is from my personal blog [here](https://tepy.dev/til/why-100vw-causes-horizontal-scroll)

Do you ever wonder why sometimes your site just has a horizontal scrollbar appeared out of nowhere? Today I just ran into it again (as always 😆) and I somehow figured out how to remove it. So here is the step I took to debug and fix it.

- Try the global border or outline color trick to find which element is causing it:

```css
* {
  border: 1px solid red;
}
```

- Find elements with width bigger than the document's width (more from [csstrick](https://css-tricks.com/findingfixing-unintended-body-overflow/))

```js
var docWidth = document.documentElement.offsetWidth;

[].forEach.call(document.querySelectorAll('*'), function (el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});
```

- Most of the times, I always find the `100vw` value on the `width` that is the cause of the overflow. So, if that is the case, you can try replacing it with `width: 100%` instead and see if it works. Try with its inner elements as well if present.

So, back to the title, why would `100vw` be the cause? Well, the answer is:

> When you set an element's width to `100vw`, the element's width now will be the whole `view width` of the browser and the important part is **`100vw` does not include the `vertical scrollbar`'s `width` into its calculation at all**. Therefore, when there is a `vertical scrollbar`, the `total width` will be the sum of the `element's width` and the `vertical scrollbar's width`, which causes the overflow on the x-axis and thus the **`horizontal scrollbar`**.

Hope this helps!

Feel free to correct me if you think there is something wrong 😃
Stateless e Stateful Widgets
Tags: flutter, dart, beginners, devsbrasileiros
Published: 2020-06-05 00:47:23

# O que são Widgets?
São componentes que o Flutter utiliza para poder construir a interface para o usuário.

# StatelessWidget

## O que é?
São widgets que não possuem estados mutáveis. Permanecem o mesmo desde a sua construção.

## Quando usar?
São úteis quando utilizados para apenas dispor de informação estática, sem alteração de estado e sem mudança de comportamento.

# StatefulWidget

## O que é 
São widgets que possuem estados mutáveis. Onde, mesmo após sua construção, após algum gatilho ser disparado, este precisa atualizar o estado.
Um exemplo de atualização de estado para o StatefulWidget é o método setState, que irá reconstruir o Widget em questão.
Vale lembrar que este não é a única forma de gerenciar estados no Flutter, existem outras opções como MobX e Bloc.

## Quando usar?
Considere usá-lo quando este Widget precisa mudar de comportamento de acordo com algum gatilho. Seja quando algum sensor disparar, quando uma lista de variáveis carregar, quando o usuário clicar e algo ser performado.

# Referências
- https://api.flutter.dev/
Introducing Dev Chapters. Find the best web dev ebooks out there 📚
Tags: codenewbie, beginners, books, contributorswanted
Published: 2020-06-04 23:54:42


![post body picture](https://dev-to-uploads.s3.amazonaws.com/i/c3sx1xprdda2dnjrp85c.png)


## Why this website?

Some learn best through online video tutorials, others through reading an ebook. I do prefer the second method. As an example, [the Road to React](https://www.roadtoreact.com/) is a great resource for every beginner looking for learning from the bottom up. 

I also wanted to give Vue a try so I went ahead and decided to design a single web page displaying the best ebooks available for web developers. The website is built with Vue CLI and Bulma.

This is also to give back to the community and allow beginners to create their first pull request so everyone can can contribute to the project. The repo is tagged [first-timers-only friendly](https://www.firsttimersonly.com/).

[![first-timers-only](https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square)](https://www.firsttimersonly.com/) 

## Check it out

[Website](https://dev-chapters.netlify.app/)

{% github sbeaury/dev-chapters %}

## Want to contribute (and add more books to the shelf)?

1. If you do not have installed Node.js in your machine then go to [this link](https://nodejs.org/en/download/) in order to install node.

2. Fork it (<https://github.com/sbeaury/dev-chapters/fork>)

3. Create your feature branch (`git checkout -b feature/fooBar`)

4. Edit the book database in `data/books.yaml` by adding an url, an image url, an alt attribute and a tag (technology or stack).

```yaml
# books.yaml

# others books sit here
# ...

# inserting new book

- linkUrl: "https://www.yourbook.com"
  imgUrl: "https://www.yourimageurl.com"
  alt: "you don't know Javascript image"
  tag: "Javascript"

```

5. Commit your changes (`git commit -am 'Add some fooBar'`)

6. Push to the branch (`git push origin feature/fooBar`)

7. Create a new Pull Request and I will review it




Thanks for reading! The Dev community is awesome!

[Follow me](https://dev.to/sbeaury) if you like to follow my next adventures
When To Cache?
Tags: datascience, python, pyspark, spark
Published: 2020-06-02 16:50:46

In Spark, memory is used for two purposes -

1. **Storage** - store/cache the data that will be used later. This data usually occupies memory for a long time.
2. **Execution** - memory space used for certain operations like joins, srots, aggregations and especially shuffles (when data is shuffled between two executors because of partition skew)

One has to be careful with caching. You want to cache only something you're sure is going to be needed later for a transformation.

**Dynamic Resource Allocation and Caching**

The idea behind dynamic allocation is that you define the initial, min and max number of executors. Spark starts with the initial executors, then based on the load it decides whether or not to start the other executors. Once the heavy lifting the processing is done, Spark asks the executors to be released. This is a great way to increase efficiency but what if you had cached something?

Because you had cached something, now the executors can't be freed unless that cached data is moved to another set of executors. And that's what you need to bear in mind.

**Cache vs. Persist**

We'll just talk about RDDs (and not Datasets). So, there's no real difference between `cache()` and `persist()`. They're both used for the same purpose. Both of these functions cache your data in `MEMORY_ONLY` as that's the default storage level for both in RDDs. For Datasets, it's `MEMORY_AND_DISK`.

You can obviously go and change the storage level depending on the use case. Also, there's no `uncache()` function. There's just `unpersist()`.

Databricks has improved caching by quite a bit by introducing Delta caching but it is limited to some file formats.
88/100 100daysofcode Flutter
Tags: 100daysofcode
Published: 2020-06-04 23:15:15

day 88/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn about unfocus, order reverse onlist view,add timestamp with firebase, orderby,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
WSL2 launch VSCODE (quick tip)
Published: 2020-06-04 23:12:52

If you are using WSL2 and want to launch the vscode from your Windows bin from WSL linux terminal, you can use this simple gist:

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

username="Your Windows User Name"
bin_path="/mnt/c/Users/$username/AppData/Local/Programs/Microsoft\ VS\ Code/bin/code"

if [ $# -eq 0  ]; then
  eval "$bin_path -add $(pwd)"
else
  eval "$bin_path -add $1"
fi

```
If you don't want to hard-code your username:
```bash
username=$(/mnt/c/Windows/System32/cmd.exe /c 'echo %username%' |& tail -1)
```
And now you can user the command **code** to open the folder or **code filename** to open file, as the vscode CLI.

Be also sure to have [Remote-WSl extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) installed.

Now save at **/usr/local/bin/** or anywhere in your PATH for global access.
Leetcode Problem: Valid Parenthesis
Tags: java, leetcode, programming
Published: 2020-06-04 23:03:35

---
title: Leetcode Problem: Valid Parenthesis
published: true
description: Valid Paranthesis
tags: java, leetcode, programming
series: programming-exercises
//cover_image: https://direct_url_to_image.jpg
---

## Background
Recently, I decided to solve some of the problems in leetcode.com for fun and practicing my java which I have not used in a while. I decided to document my thought process as I solve these problems. You can find some of the other solutions in the series table above this section.

## Problem
[Valid Parentheses](https://leetcode.com/problems/valid-parentheses)
Given a string of parentheses determine if the string is valid. The string is valid if and only if, the opening and the closing parentheses match.

For e.g. 
```
{([])} - valid
{{{ - Invalid
()() - Valid
({) - Invalid
```

## Solution
I know the answer to this problem from my college intro to Algo class. The trick here is to use a [Stack](https://en.wikibooks.org/wiki/Data_Structures/Stacks_and_Queues) data structure. One of the first benefits I remember of stacks was to use stacks to verify certain kinds of grammar which is what this question is about. Verifying a grammar of parentheses. 

The pseudo algorithm is: 
1. Walk through every character in the array.
2. If the character is a opening parentheses push into the array.
3. If the character is a closing parentheses pop the top element in the array.
4. If it is the corresponding opening parentheses, move on ; else return false (fail quick)
5. If all elements have been processed, then the string is valid if the stack is empty.

### Coding the solution
The following is the first version of the solution that I wrote: 
{% gist https://gist.github.com/deepakvenkat/a1db4426c1b6dc1adcc69f7d4c671f90/94af2f5f11bfa2cf051db6fdb6548bed513b38d4 file=validParanthesis.java %}

After I verified that this works, I wanted to clean up a bit. A easy win would be to flip the inner if loop so that I don't have to keep two maps. Also that would take care of invalid (non parentheses) characters. So I got here: 

{% gist https://gist.github.com/deepakvenkat/a1db4426c1b6dc1adcc69f7d4c671f90 file=validParanthesis.java %}

#### Sidebar
One other difference in the above two solution is that I have a special case for empty string in the second case. The reason for is two-fold: 
1. First of course is fail early. No need to try and work on string when we already know the result.
2. Second is something I learned today (#til). In java if you split an empty string by an empty string, it results in an array of length 1 with an empty string as the only element. 😮

Here is an e.g. 
```java
jshell> "".split("")
$1 ==> String[1] { "" }
```
Querido JavaScript, no eres tú, soy yo
Published: 2020-06-04 22:55:08

---
title: Querido JavaScript, no eres tú, soy yo
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Después de muchos años de estar juntos hoy me despido de ti. Sé que pensabamos estar más tiempo unidos, pero al final de cuentas, es lo mejor para ambos.

Perdóname por todas las veces que hablé mal de ti a tus espaldas. Más aún cuando estabamos juntos y me quejaba de tus fallas. Con el tiempo aprendí que no eras tú, si no yo el que hacía que lo nuestro no funcionara.

En realidad nunca terminé de entenderte. ¿Por qué eras tan diferente a los demás lenguajes?, ¿por qué lo que las cosas que me asegurabas que iban a pasar no pasaban?, ¿por qué apesar de tantos cambios en tu forma de ser no terminas por gustarme?, ¿por qué?

Te vestí de diferentes formas para ver si así lucías mejor, pero la dura realidad es que nunca terminaste de encantarme.

Coffeescript tenía un nombre muy llamativo pero al final de cuentas no había cafeína que realmente hiciera relucir tus encantos usando esas bonitas garras.

Hablando de ti en el frontend debo admitir que hubieron buenas etapas. ¿Recuerdas cuando usabamos sencha touch? Nuestra primer aventura juntos, nunca podré olvidarla. Pero las cosas se pusieron feas, a la hora de la hora en mobile no funcionaste y tuvimos que deshacernos de ese ropaje. Vue fue lo mejor que te pasó, pero debo admitir que aún así el frontend ha dejado de atraerme, y me he inclidado más a disfrutar el backend.

Y ahí es donde realmente nunca terminé de entenderte. Después de tantos años debo decir que no te conocí realmente y es la razón por la que debo terminarte.

Sé que muchos tendrán bastantes razones válidas para seguir contigo, y que bueno, realmente te mereces lo mejor. Pero por ahora... no cuentes más conmigo.
A Shortcut to Data
Tags: react, d3, datavisualization, learninpublic
Published: 2020-06-04 22:40:02

I've been wanting to learn data visualisation since I listened to React podcast episode 15 ['Data Visualization with Shirley Wu'](https://reactpodcast.simplecast.com/episodes/15-961649c3
) which got me excited about trying out D3.

Recently, I got the chance to dip my toes into this framework as I was fortunate enough to be given a subscription to Frontend Masters with which I dived straight onto the learning path for Data Visualisation.

Ultimately, I tested my new skills visualising data from the dialogue of the Lord of the Rings films. Check it out [here](https://speak-friend-and-enter.netlify.app/).

Here are a few things I learnt whilst dipping my toes into data visualisation for the first time:

**Starting with a course is a great boost**
When I first checked out the documentation for D3, I was a bit overwhelmed with the amount I needed to pick up straight away. Going back and kicking off my learning with a D3 course gave me a great base understanding so I could better pick up what the documentation was describing.
If you can, I would very much recommend [Shirley Wu's courses on Frontend Masters](https://frontendmasters.com/teachers/shirley-wu/) as a great place to start.

**SVG is just as important as D3**
It quickly became apparent that understanding SVG can improve your game, helping to display data in interesting ways. This is why the next course I'm looking to take on is an SVG.

**Leave D3 to update DOM elements**
As a predominantly React developer, I decided to combine React and D3 for this project. After trying different ways to combine the two I found that leaving the visualisation updates to D3 led to cleaner code and better performance.

**D3 Force can lead to infinite loops**
I got caught out a few times when using D3's force as I would get caught in infinite loops while processing the visuals for my data. As I was coding on [CodeSandbox](https://codesandbox.io/) this caused my browser session to crash. To reopen I had to use the URL parameter `runonclick=1` to get past the crashing server to fix the problem.

**Clean your data before you use it**
At first, I was trying to clean the data to visualise in my component code which led down confusing code structures. This was until I realised the data wasn't dynamic so I could preprocess all of my data and store it in simple arrays already sorted ready to render. Perfect.

**Mess around**
I ended up learning the most and finalising ideas by messing around and trying different visualisations. CodeSandbox is great for this giving a quick platform for trying ideas out.
My First Machine Learning Experiment
Tags: machinelearning, showdev, tensorflow, learning
Published: 2020-06-04 22:28:47

I've always been interested in AI, but never took the time to learn it. This time, I wanted it to be different. After creating a simple model in Tensorflow to recognize hand-written digits from the MNIST dataset, I started learning how to create an RNN.

The idea was to take my personal Instagram DMs and train a model on them to generate text. Seeing as how I'm a complete noob when it comes to machine learning stuff, most of the model I wrote is just my interpretation of [Tensorflow's text generation with an RNN tutorial](https://www.tensorflow.org/tutorials/text/text_generation). I barely understood any of the terminology, but Google came in handy.

Here are some of the results of the trained model! The results have been heavily curated since even though they're unique phrases, they can still sometimes contain private things.

```
doesn't even take it request of Spone.?!?!
Like what website?
Lol
Oh yeah
Spent you do this time
From the spetify like, that it would be faster
AHHH
oh
Someone shopp day tbh
```

As you can see, smaller more common phrases are replicated perfectly. However larger sentences make no sense. They can be funny though. You can even see some basic grammar rules like contractions and commas. This little experiment was really fun to do, if not infuriating at times.
Day 147 : Gravity
Tags: hiphop, code, coding, lifelongdev
Published: 2020-06-04 22:23:00

_liner notes_:
- Professional : Had our team wide meeting. Really good to see everyone in one place. Rest of the day, I worked on my workshop and reviewing some internal tests we did on a tutorial we did earlier.

- Personal : Got the pomodoro timer working on my side project. Just need to finish the tasks list and clean up some code and styles. Should be deploying it soon so I can get some people to test it for me.

![Desert scene in Salta, Argentina with mountains, cacti and shrubs](https://dev-to-uploads.s3.amazonaws.com/i/2jzqzr4jj9e4jndgvnxm.png)

Will be going through some tracks for this week's radio show and some light coding on my project. This week has been exhausting and had nothing to do with work. The gravity of everything happening in the country has been draining.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube JS2DSG-Ghto %}
My first Ruby CLI project
Tags: ruby, codenewbie
Published: 2020-06-04 22:21:12

I'm a Flatiron school student and as part of my curriculum, I had to make a CLI app for my final Ruby project. I had a lot of ideas but I wanted to do something about my favorite sport which is soccer. I wanted the app to have three topics: World Cup, Champion League and players. The app would allow users to type a soccer player's name and get all the information about the player: competitions won, titles and more. I had this idea because when I'm watching a game, sometimes I want to know more about a particular player or the stats of the team.

I created 3 Ruby classes: one for Champion league, one for World Cup, and one for players who won Ballon d'Or. I decided to scrap the data because I couldn't find a good API about soccer. I finished my app but I didn't like it. I thought it was too plain and boring. So I asked myself: what can I do with this data? How can I turn this into a different app? I came up with a new idea to create a 10 question multiple choice quiz about soccer.

##Methodology
I built a scraper class that was responsible for getting the data from the web. I used 3 different urls. I built methods to scrap data and three class methods to turn the data into object. I also built a class CLI responsible for printing all multiple choice question and logic to process the questions. It lets users know if they got the answer right or wrong and gives a choice to repeat the quiz.

##What did I learn?
I learned more about scraping. How to get the data I want. I had a hard time with some gems. I learn a lot about how gems can help to improve an app. Every tool is out there to help your app. For example, if you work as a Mechanic and there is nut or bolt that you can't reach, you'll probably ask yourself why can't they make a better wrench to get this nut or bolt. But guess what? That tool is already out there but you don't know. Programming is the same way. I also learned how to take advantage of regular expressions. In this project, I got stuck a lot of times but the good thing is that it helped me learn how read every error and I improved my debugging skills. 

##Future plans
I have plans to make this app better because I know that people who love soccer will like it. Some of my friends who love soccer took the quiz and they love it. In the future I will give it a better design, and more questions options. The more I learn the more ideas will come to me.
At what point do you feel part of a developer community?
Tags: discuss
Published: 2020-06-04 21:35:23

*Community* definitions:
> a group of people living in the same place or having a particular characteristic in common.

> the condition of sharing or having certain attitudes and interests in common.

I have been thinking about this lately. In the current world, we often have these tribal feelings. As developers, we will even fight tooth and nail to defend our community. If I am part of the Javascript community, I can become offensive and mean towards the C++ community because of the programming language. Or because I believe the member of that community have certain traits...

We hear the word community a lot to describe groups of developers. Sometimes for programming languages, sometimes for frameworks and sometimes for websites. The PHP community, the React community, the DEV community...

But... what makes you part of a community? At what point can you comfortably say: "I am a part of the X community" ?

I'll take myself as an example. I use the following technologies: ReactJS, NodeJS, Java Spring Boot, Typescript, CSS, HTML, Javascript.

I mostly use Javascript technologies. I use Spring Boot also. I consider myself to be part of the Javascript community. But, I don't consider myself part of the Java or Spring Boot community. I could see myself part of the React community, but for some reason, it's not as strong as the Javascript one for me...

This has nothing to do with how much I love those technologies. I love React, and I like to use Spring Boot. So, that can't explain why I feel this way.

To me, I think I comes down to the following question:

- If X didn't exist anymore, would you feel like something was missing?

Spring Boot, TypeScript and React could disappear, and honestly, after a few adjustments, I wouldn't care too much. Yeah, even React, I could move on to something else without an issue.

Now, if you took Javascript or DEV.to from me, I wouldn't be a happy camper. Those are things that *define* me. They have been a part of me for so long, and they shaped me in so many ways that I couldn't give them away that easily.

So, after all those words, there are two communities I feel a part of:

- the DEV community
- The Javascript community

What do you think? Which communities do you feel you belong to? 

Love ❤️ 💕
Ultrawide VS multiple monitor set-up: Your thoughts?
Tags: discuss, webdev
Published: 2020-06-04 21:32:05

---
title: Ultrawide VS multiple monitor set-up: Your thoughts?
published: true
description: 
tags: discuss, webdev
//cover_image: https://direct_url_to_image.jpg
---
I'm currently using 17.3 laptop screen (MSI G70) and def planning to upgrade in the future. Based on DEV community set-up pics, I've seen a lot of variation, so I would love to ask you for help! 🤔

Would you recommend single utrawide:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sk0ochapmxaboywtb2bi.jpg)

over three monitor set-up?

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

And what would be the reason behind your recommendation, considering web development as a main purpose for it?
How to install CUDA and cuDNN on an ubuntu 16.04 machine
Tags: cuda, cudnn, opensource, github
Published: 2020-06-04 21:25:19

--- 
title: How to install CUDA and cuDNN on an ubuntu 16.04 machine
published: true
description: I published a step-by-step on Medium on how to install CUDA and cuDNN on an ubuntu 16.04 machine
tags: #cuda #cudnn #opensource #github
//cover_image: https://devblogs.nvidia.com/wp-content/uploads/2012/10/CUDA_Cube_1K.jpg
---

Just published a step-by-step on Medium on how to install CUDA and cuDNN on an ubuntu 16.04 machine:

Blog post: https://matheustguimaraes.com/posts/install-cuda-ubuntu16.html