teleren/devto huggingface dataset:
Shipping Home Page Cleanups
Tags: design, meta, ux, changelog
Published: 2020-02-19 16:53:40

#TL;DR
Today we're shipping some small UI changes for the home page. Let us know if you can spot any bugs or issues since changes might have affected other views too.

---

A couple weeks ago the DEV team started looking into possible improvements for the DEV home page. We asked you for feedback and opinions and OMG my product designer soul was like 🤩🤩🤩🤩🤩🤩🤩

#TL;DR of what happened

We had this idea to do a home page makeover. You gave us tons of input around what we should be focused on, tons of ideas for features and improvements, and tons of great feedback. Here's a bit more detailed recap: 

{% post devteam/follow-up-your-feedback-on-the-home-page-2cij %}

For the Home Page itself, we decided to split our efforts into three separate "projects": 1) Low Hanging Fruits, 2) Feed Improvements, and 3) North Star Vision.

#Shipping Low Hanging Fruit 🚢

Today we're super pumped about shipping **just a tiny bit of what we have planned**. We made some small UI optimizations that are mostly visible on the home page but also on other views. Some of the improvements include:

- **De-emphasizing sidebars** – there will be fewer "boxes" in the sidebars so that you can better focus on the feed itself. It helps us build some layout hierarchy.
- **Spacing** – it should be less random now.
- **Typography** – font sizes, line height, and colors should also be less random :D

...I guess we could call it "DE-RANDOMIZING DESIGN". That would be a catchy title for a ~~medium~~ DEV post, huh? 

It's technically not much but visually, it may feel different. Give it a couple days to get used to it. And remember it's just a first step. 


#What you may notice 👀
This update is more minimalistic, and may even look less DEV-ish. Some of you pointed out that that DEV’s eclectic, glitchy & imperfect style is 100% on-brand, so why does it look like we’re scrapping all of that? Don’t worry, **we see this**. Although we love this “style”, a lot of it is caused by lack of rules and guidelines especially in design. We’re cleaning it up now so that we can re-incorporate more of the DEV brand of “organized disorder” over time. Plus, this will let us build great features and improvements efficiently in the future. Trust us when we’re saying that your initial impression will just be a temporary feeling. 
#What's next?
Of course, we still want your feedback. If you see any issues or bugs, please let us know either here or in [GitHub](https://github.com/thepracticaldev/dev.to).

We're also looking at some metrics to see if we didn't screw up anything. If we notice that "omg signups went down by 50000%" then we do `git revert` or whatever you do in that case (hey, I'm not a developer!). Also, I could be fired then 🤷‍♂️.

## It's not over.
This is just a very first step towards where we want to be. The whole team is working pretty hard at defining that North Star vision, not only in terms of features, but also in UI. 

Cheers!

(Cover photo by [JESHOOTS.COM](https://unsplash.com/@jeshoots))
[PT-BR] Usando React com Parcel
Tags: react, parcel, tutorial, webdev
Published: 2020-02-19 16:52:03

---
title:[PT-BR] Usando React com Parcel
published: true
description:
tags: #react, #parcel, #tutorial, #webdev
---

##Introdução

Neste artigo, irei explicar como usar a biblioteca/*framework* React através do Parcel. 

##O que é Parcel?

O Parcel é um *module bundler* que não precisa de configuração para seu funcionamento (diferentemente do webpack, por exemplo). E também, possui um tempo de empacotamento muito mais rápido, utilizando-se de um sistema de cache.

![Imagem demonstrando o benchmark do Parcel](https://i.imgur.com/xmqHuq9.png?1)

##Instalações

Primeiramente, é necessário criar uma pasta e inicializar o NPM (ou o Yarn se preferir).

```
npm init -y
```

Depois, instale o Parcel e o React.

```
npm i -D parcel-bundler
npm i react react-dom
```

Logo após, instale também alguns *presets* do Babel.

```
npm i -D @babel/preset-env @babel/preset-react @babel/core
```

Se não for usar o *Hooks* e não quiser usar o *bind* nas classes da sua aplicação, é necessário instalar o seguinte plugin, como diz a [documentação](https://pt-br.reactjs.org/docs/handling-events.html). 

```
npm i -D @babel/plugin-proposal-class-properties
```

Caso queira usar *async/await*, instale os seguintes pacotes:

```
npm i --D @babel/plugin-transform-runtime
npm i @babel/runtime
```

Com isso, já é possível construir sua aplicação React.

##Como usar

No *package.json* adicione na parte de *scripts* o diretório do arquivo de entrada, geralmente um *html*:

```
"scripts": {
  "dev": "parcel ./src/index.html",
  "build": "parcel build ./src/index.html"
},
```
Para configurar o Babel, inclua também no *package.json* (se preferir, crie e utilize um arquivo próprio do Babel):

```
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      "@babel/plugin-transform-runtime"
    ]
  }
```

E pronto, agora é só mandar "npm run dev" no seu prompt para rodar sua aplicação em modo de desenvolvedor ou "npm run build" para colocá-lo em modo de produção.

##Conclusão

Deste modo, a utilização do React com o Parcel se torna uma boa alternativa para quem quiser ter um desenvolvimento muito rápido com um projeto mais leve e com mais controle, o que não ocorre com o *create-react-app*. Uma solução muito mais pesada, que se utiliza do webpack, e com diversos pacotes desnecessários que são instalados automaticamente.

##Fontes

* https://parceljs.org/getting_started.html
* https://pt-br.reactjs.org/docs/getting-started.html
* https://blog.jakoblind.no/react-parcel/
* https://medium.com/javascript-in-plain-english/create-react-app-the-easier-way-with-parcel-22a44d62c187
Making Games in Ruby With Gosu
Tags: ruby, cpp
Published: 2020-02-19 16:41:39


  Have you've ever wanted to make games with ruby? [Gosu](https://www.libgosu.org/ruby.html) is a 2D game development library for Ruby and C++. It provides a window and main loop, 2D graphics and text (powered by OpenGL), sound, music, keyboard, mouse, and gamepad input. 

##### Prerequisites & Installation

I'll be showing how to install Gosu on OSX, but they also offer tutorials on setting gosu up with Windows, Linux, Raspbian.

[Gosu GitHub wiki](https://github.com/gosu/gosu/wiki/Getting-Started-on-OS-X)

  Gosu depends on the SDL 2 library. So make sure you have Homebrew installed and run `brew install sdl2`. When that's done, simply install the Gosu gem with `gem install gosu`.

To test whether everything works as expected, you can use this one-liner, which should open a window:

```bash
ruby -rgosu -e 'w = Gosu::Window.new(200, 150); w.caption = "It works!"; w.show'
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xguilhialfbi93q9ojj.png)

Or you can install and run the gosu-examples gem:

```bash
gem install gosu-examples
gosu-examples
```

I recommend you should do the latter. 

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

  This tutorial window shows you what Gosu is capable of. Even better, they have a shortcut to the source code for each example! You can view the source code by pressing `E` And if you like they have a code-along for the [`tutorial.rb`](https://github.com/gosu/gosu/wiki/Ruby-Tutorial) game.

##### Examples

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

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

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

  There's so much you can do with this lightweight gem. Here's a link to the [Gosu Showsace](https://www.libgosu.org/cgi-bin/mwf/board_show.pl?bid=2) where you can download community projects or post your own!
What to review in a code review
Tags: codequality, pullrequest, review, discuss
Published: 2020-02-19 16:30:47


In a code review, I look for the following 

* To Prevent Language Specific Issues
* To Prevent Framework Specific Issues
* To Ensure code quality is maintained
* To ensure unit tests validate the right scenarios

I don't think you're required to know the whole codebase when you're reviewing code. 

Please share your thoughts in comments. 


#discuss
Daily Challenge #192 - Can you Survive the Zombies?
Tags: challenge
Published: 2020-02-19 16:21:32

---
title: Daily Challenge #192 - Can you Survive the Zombies?
published: true
series: Daily Challenge
description: Survive the hoards of the undead!
tags: challenge
---
###Setup
Unfortunately, you have found yourself in a difficult situation. You have injured your leg and are unable to walk. A number `n` of zombies are shuffling towards you, intent on eating your brains. Luckily, you've got your trusty rifle. 

The zombies will start at a range of `r` meters. They will move at 0.5m per second. Each second, you shoot one zombie, which depletes your ammo reserve `a` by 1 each shot. The remaining zombies shamble forward. Since you're a good shot but also debilitated, there's a 5% chance you might miss. 

If any of the zombies manage to reach 0 meters, you get eaten and lose. If you run out of ammo, you'll also get eaten. Ignore any time that would be spent reloading. 

Write a function that accepts the total number of zombies `n`, a range in meters `r`, and the number of bullets you have `a`. 

If you shoot all the zombies, return "You shot all X zombies." If you get eaten before killing all the zombies, and before running out of ammo, return "You shot X zombies before being eaten: overwhelmed." If you run out of ammo before shooting all the zombies, return "You shot X zombies before being eaten: ran out of ammo." (If you run out of ammo at the same time as the remaining zombies reach you, return "You shot X zombies before being eaten: overwhelmed.".)

###Example
`zombie_shootout(3, 10, 10)` => "You shot all 3 zombies."

###Tests
`zombie_shootout(100, 8, 200)`
`zombie_shootout(50, 10, 8)`


Good luck! (I think you're going to need it.)
***
_This [challenge](https://www.codewars.com/kata/5deeb1cc0d5bc9000f70aa74/train/javascript) comes from Captain_Howdy on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
Publishing Your First GitHub Pages Website
Tags: showdev, beginners, tutorial
Published: 2020-02-19 16:17:12

---
title: Publishing Your First GitHub Pages Website
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/reut2iopha2oa3cz6zqs.jpg
description: Learn how to get up and running with your first GitHub Pages Website in this tutorial by Mike Bifulco, Director of Technology at Aquent Gymnasium.
tags: showdev, beginners, tutorial, discuss
---

We recently published this tutorial as part of Gymnasium's weekly [Take 5](https://thegymnasium.com/take5) tutorial series.  We're nearing 30 different _Take 5s_, which you can check out for free (_always_ free, no strings attached!) on our site.  You should also check out our full-length courses and hour long Gym Shorts courses.

Enjoy!
{% youtube ukPI1zlxKqg %}

Note: This is the first video tutorial I've done - so I'm keen to hear your feedback on my presentation style! I'll be doing more Take 5s in the future, and I'm always looking to improve.  Thanks in advance!
Duplicating a browser tab calls componentWillUnmount
Published: 2020-02-19 16:08:00

When cloning a tab, componentWillUnmount is called

When cloning a tab, componentWillUnmount is called early in the event of a new tab. This is mysterious. But further problems seem to be shared up to the state of the session storage and the previous tab in the event. The session storage is completely empty when the replication tab is fully opened. What is this strange phenomenon?
I award free Certificates at CodeAbbey, Ask Me Anything!
Tags: ama
Published: 2020-02-19 15:24:46

In the fall of 2013 I started building my small web-site with programming problems - [CodeAbbey](https://www.codeabbey.com). Soon it become obvious that most users fall off after solving from 5 to 20 tasks - but few are **very persistent**, doing over 100 and sometimes reaching the top.

So I started awarding free Certificates for solving certain amount of tasks (now 145 - [read more](https://www.codeabbey.com/index/wiki/certificates)). They have unique numbers so they could be checked at user's profile page - or added to LinkedIn by link. Depending on skill some people reach this in a month while others in a year or two...

It appears, people like them - even so that some tried to cheat :) Though it is annoying to verify pretenders' solutions manually, I'm on the other hand usually feel very pleased by such devotion.

**I don't mean you need immediately join us :)** As these certificates are just funny things and not recognized officially by any University or Company, of course. I just have come to boast a bit, since I'm somewhat proud of this idea of motivating people anyway!

_Here is example of certificate for some outstanding colleague:_

![Wenting Cai certificate at CodeAbbey](https://dev-to-uploads.s3.amazonaws.com/i/zpnxyx2bkv7dxpn9lax8.png)
Environnement de développement Waves.
Tags: wavesplatform, blockchain, node, docker
Published: 2020-02-19 15:21:30

Préparer son environnement de développement local est la suite logique après s'être familiarisé avec l'IDE en ligne. 

Nous allons voir dans cette vidéo comment installer l'ensemble des éléments, à savoir l'extension Waves pour VS CODE, une node privée via Docker, le plugin Surfboard etc.

LIENS DES DIFFERENTS OUTILS

Docker:
https://hub.docker.com/?overlay=onboa...

Docker Tool Box (nécessaire pour windows familiale)
https://docs.docker.com/toolbox/toolb...

Vscode
https://code.visualstudio.com/download

WAVES-RIDE Plugin
https://marketplace.visualstudio.com/...

Surfboard
https://github.com/wavesplatform/surf...

COMMANDES DOCKER

Démarrer une node privée
docker run -d -p 6869:6869 wavesplatform/waves-private-node

Démarré un explorateur de transaction (192.168.99.100 si windows familiale)
docker run -d -e API_NODE_URL=http://localhost:6869 -e NODE_LIST=http://localhost:6869 -p 3000:8080 wavesplatform/explorer

PROCHAINES VIDEOS

22 février
Utiliser son environnement précédemment installer et comprendre l'ensemble des fonctionnalités de Surfboard pour la création, la compilation et un déploiement rapide de vos smart contract

25 février
RIDE V4 et Waves node 2.0 arrivant sous peu, nous passerons en revue l'ensemble des changements liés à ces nouvelles version, pour RIDE mais aussi pour le protocole Waves.

Suivez nous et posez toutes vos questions sur :

Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr

https://www.wavesplatform.com
Python: Pass by Sharing
Tags: python, tutorial, beginners
Published: 2020-02-19 15:12:55

In Python there is only **pass by sharing** or **pass by object** which means that according on the object it will change its value i.e. depending if it is mutable or not but you will not be able to change the type of object completely.

When people say that python has both 
**no pass by value** and **no pass by reference** when they are teaching because they want beginners to know this as it is very crucial for understanding the concepts of programming. Most languages don't have pass by object as far I know.

```python
def change_list(change):
    change += [2, 5, 7, 56, 79]

def change_dict(dict, value):
    dict[value] = 12

def change_obj(obj):
   obj = tuple(obj)
```

These are functions for various objects we are gonna test on.

## List

```python
int_list = [2, 5, 45, 676, 56]
change_list(int_list)
print(int_list)
```

The output of the code will be `[2, 5, 45, 676, 56, 2, 5, 7, 56, 79]` because the list is mutable and it has `+=` operator support.

If `change_obj()` function is used for `int_list`; `int_list` will remain a list as the type is changed **locally** and not **globally**.

## Tuple

```python
int_tuple = (23, 56, 54)
change_list(int_tuple)
print(int_tuple)
```

This will not work as tuples don't support `+=` operator and they are immutable.

## Dictionary

```python
age = {'Sam' : 12, 'Tom' : 15, } 
change_dict(age, 'Jack')
print(age)
```

The output of the code will be `{'Sam' : 12, 'Tom' : 15, Jack : 12}` as dict is mutable. 

## String, Int and Floats

Strings, Int and Floats are immutable by default so there's is no use of elaborating this and just like stated above type of object cannot be changed.

### Further Reading

[Call By Objects by effbot.org](http://effbot.org/zone/call-by-object.htm)

[Python Objects by effbot.org](http://effbot.org/zone/python-objects.htm)


If there is any confusion or anything misleading then please don't forget to comment.
I made a Dev.to Chrome extension. Tried UserScript too, but failed.
Tags: webdev, javascript
Published: 2020-02-19 15:10:43

*More importantly, are UserScript's dead?* It is a good way to go cross-browser, and over the CORS. But, Chrome extensions seem to be more popular these days.

Also, UserScript was my first exposure to JavaScript as well.

The extension can be compile from the repo. (or download from releases)

{% github patarapolw/better-dev.to no-readme %}

And, it is I-cannot-wait to this post.

{% post patarapolw/showing-comments-publish-date-isn-t-good-2ifh %}

## What did I learn

- Dev.to is a Preact app, and the extension doesn't reload on every navigation. I have to listen to [popstate](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event).
- I can easily do this to GitHub as well, just like [refined-github](https://github.com/sindresorhus/refined-github).
- I don't know how to properly use MutationObserver nor listen to HTTP events, so I abuse MutationObserver with querySelectorAll on every mutations.
- Chrome extension seems quite similar in concept to Electron or Cordova. Not sure about TypeScript / ESLint support for global variables.
Request for Node.js has been deprecated
Tags: request, npm, node, javascript
Published: 2020-02-19 15:05:33

---
title: Request for Node.js has been deprecated
published: true
description: Let's review what led to the deprecation of request, one of the top Node.js packages of all time.
tags: request, npm, node, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/a45pai3n2affck2wtyhr.png
---


The breaking news landed a few days ago, with [a simple commit](https://github.com/request/request/commit/aded7e4f8e57f6f33cf39d65634bfb822bfcb2c8) entitled "doc: note full deprecation".

That's right! **[`request`](https://github.com/request/request)**, one of the top and oldest npm packages, has been deprecated by @mikeal its creator.

![Screenshot of the deprecation notice on npm](https://dev-to-uploads.s3.amazonaws.com/i/tqe5pjgl4kto4q8hczto.png)


As of writing, over 40K packages rely on `request`. In fact, it's the 4th [most depended upon package on npm](https://www.npmjs.com/browse/depended). And it has a whopping 18.5 million weekly downloads.


For the most familiar with the package's development, there's no news here. `request` was in maintenance mode since March 2019 (see issue [#3142](https://github.com/request/request/issues/3142)). And deprecating the package is just one step further.

Still, it is, I believe, a truly courageous and clever step toward the future of the Node.js (and more broadly the JavaScript) ecosystem.

## Let's review what led to this situation.
Without paraphrasing too much [@mikeal statement back from March 2019](https://github.com/request/request/issues/3142), here are the key points that led to this deprecation:

* Back in 2009, `request` was one of the first modules ever created for the Node.js ecosystem.
* For a few years, `request` and Node.js evolved together, each learning from the other.
* And as one of the very first modules listed on npm, `request` quickly became one of the most downloaded.

But:

> _"The place request has in the Node.js ecosystem is no longer one of an innovator but of an incumbent."_ [@mikeal](https://github.com/request/request/issues/3142)

That's right that most tutorials, even here on DEV, use `request` as the per-default HTTP client - while there are dozens of very good alternatives.

> _"The best thing for these new modules is for `request` to slowly fade away, eventually becoming just another memory of that legacy stack."_ @mikeal

That's the very first time that I see such a humble position. It's truly clever. And while it's going to require 40K+ packages to be upgraded, that's totally worth it. 

What do you think?
Flutter Tutorial Trip UI with Swipe
Tags: flutter, beginners, tutorial, career
Published: 2020-02-19 14:56:45

---
title: Flutter Tutorial Trip UI with Swipe
published: true
description: A minimal design take on a Flutter Tutorial Trip UI with Swipe.
tags: flutter, beginners, tutorial, career
---

A minimal design take on a Flutter Tutorial Trip UI with Swipe.

Full Video on Youtube ▶: https://youtu.be/jLV86mcU2is

Help me by starring on Github
-https://github.com/oliver-gomes/flutter-trip-ui 

🔴Subscribe to my Youtube Channel for more videos!
Startup Phase 1
Tags: startup, ecommerce, business, techproducts
Published: 2020-02-19 14:51:20

---
title: Startup Phase 1
published: true
description: About my startup idea 
tags: startup, Ecommerce, Business, TechProducts
---

It has a very long time since I do not post any article on Dev.to. The reason behind was my own startup. Yes, startup!!!! 
In this one, I'm going to tell everything like "How I got Idea for this startup? ", "How I reach my goal?" etc.etc.
First of all, I want to tell you about my startup "what it is all about??" 
Basically, the name of my startup is "the Compactia". It's not more than an e-commerce website for tech products like DSLR/Digital Camera, Laptops, Mobiles, and their accessories. It sounds so simple and nothing looks interesting. Yes, I know that. Now you will be questioning how's my startup different from others and why anyone has to purchase from my website? 
Then ladies and gentlemen answer is simple <b>"Good quality products at lowest market value." "Free Fast and Secure Delivery All Overworld." "You can request any product which not listed on our website and we will provide you at the lowest market cost within 2-3 Days." </b>

Due to the short time, I will explain everything in part. I want to make every article short and precise that's why I will explain other things in next articles. 

Till that you can visit/can explore our website and suggest to me if have something to tell so that we can improve our service/website. The link is below 

<a href="https://thecompactia.com/">the Compactia</a>