teleren/devto huggingface dataset:
My hacktoberfest 2020 experience
Tags: hacktoberfest, github, python, git
Published: 2020-11-03 04:27:40

This was my first Hacktoberfest . Being a fresher, I always thought that my level was not that high for clearing this event. But when I started, I started with goal of learning new things and not for completing events.

The things I learned from Hacktoberfest 2020:

1.Git and Github

2.Python

3.Working on issues
Master CSS Flexbox - by understanding Grow & Shrink
Tags: css, react, webdev, tutorial
Published: 2020-11-03 04:24:53

To master CSS Flexbox by understanding Grow & Shrink
{%youtube AThwAiKVqe4%}


In this video, Tom listed out some simple examples, to explain CSS Flexbox Scaling by understanding Grow & Shrink. It's an essential concept to understand in CSS, you can manage to do flexible adjustments if you got the idea!


Preview the result here: 
https://www.pxcode.io/preview/5f979fd7eb796400126652a0/5f979ff9eb796400126652a3 


We are welcome and excited to invite you to watch the tutorial.
Let us help you!

try it on: 
https://www.pxcode.io/
Code Smell 15 - Missed Preconditions
Tags: codenewbie, oop, tutorial
Published: 2020-11-03 04:24:35

*Assertions, Preconditions, Postconditions and invariants are our allies to avoid invalid objects. Avoiding them leads to hard-to-find errors.*

> TD;DR: If you turn off your assertions just in production your phone will ring at late hours.

# Problems
- Consistency
- Contract breaking
- Hard to debug
- Bad cohesion

# Solutions

- Create strong preconditions
- Raise exceptions
- Fail Fast
- Defensive Programming 

# Examples

- Constructors are an excellent first line of defense

- [Anemic Objects](https://dev.to/mcsee/code-smell-01-anemic-models-4dg2) lack these rules.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/61e95b5c7a8d697cb748cd49b43aab90)
```python
class Date:
  def __init__(self, day, month, year):
    self.day = day
    self.month = month
    self.year = year

  def setMonth(self, month):
    self.month = month

startDate = Date(3, 11, 2020)
#OK

startDate = Date(31, 11, 2020)
#Should fail

startDate.setMonth(13)
#Should fail
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/b5eebe620b66c510bafe04a7a4f8ef82)
```python
class Date:
  def __init__(self, day, month, year):
  	if month > 12:
    	raise Exception("Month should not exceed 12")
    #
    # etc ...
  
    self._day = day
    self._month = month
    self._year = year
 
startDate = Date(3, 11, 2020)
#OK

startDate = Date(31, 11, 2020)
#fails

startDate.setMonth(13)
#fails since invariant makes object immutable
```

# Detection

- It's difficult to find missing preconditions, as long with assertions and invariants.

# Tags

- Consistency

# Conclusion

Always be explicit on object integrity.

Turn on production assertions. 

Even if it brings performance penalties. 

Data and object corruption is harder to find.

Fail fast is a blessing.

{% post https://dev.to/mcsee/fail-fast-48dm %}

# More info

- [Object-Oriented Software Construction (by Bertrand Meyer)](https://en.wikipedia.org/wiki/Object-Oriented_Software_Construction)

# Relations

- [Code Smell 01 - Anemic Models](https://dev.to/mcsee/code-smell-01-anemic-models-4dg2)

# Credits

Photo by <a href="https://unsplash.com/@jon_chng">Jonathan Chng</a> on <a href="https://unsplash.com/s/photos/running-track">Unsplash</a>

* * *

> Writing a class without its contract would be similar to producing an engineering component (electrical circuit, VLSI (Very Large Scale Integration) chip, bridge, engine...) without a spec. No professional engineer would even consider the idea.

_Bertrand Meyer_

{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/06/23*
Completed Hactoberfest 2020
Tags: hacktoberfest, opensource
Published: 2020-11-03 04:19:05

"The Power of Open Source is the Power Of People"
-Philippe Kahn
SUCCESFULLY COMPLETED HACTOBERFEST 2020 with +5 Extra PRs !!

Thank you Hactoberfest for making me realize the true potential of what Open Source is capable of.

Whenever I see people posting about receiving swags I get excited to see those. And even I was thrilled once again , but this time for myself 😃.One T-Shirt and few stickers might seem small , but the motivation it gave to me and the way it uncovered my passion was of next level. Next time I promise to plant a tree .v
Python Introduction

Tags: python, tutorial
Published: 2020-11-03 04:18:04

What is Python?

Python is a popular programming language. It was created by Guido van Rossum, and released in 1991.

It is used for:

-web development (server-side),

-software development,

-mathematics,

-system scripting.

What can Python do?

-Python can be used on a server to create web applications.

-Python can be used alongside software to create workflows.

-Python can connect to database systems. It can also read and modify files.

-Python can be used to handle big data and perform complex mathematics.

-Python can be used for rapid prototyping, or for production-ready software development.

Why Python?

-Python works on different platforms (Windows, Mac, Linux, Raspberry Pi, etc).

-Python has a simple syntax similar to the English language.

-Python has syntax that allows developers to write programs with fewer lines than some other programming languages.

-Python runs on an interpreter system, meaning that code can be executed as soon as it is written. This means that prototyping can be very quick.

-Python can be treated in a procedural way, an object-oriented way or a functional way.

Good to know

-The most recent major version of Python is Python 3, which we shall be using in this tutorial. However, Python 2, although not being updated with anything other than security updates, is still quite popular.

-In this tutorial Python will be written in a text editor. It is possible to write Python in an Integrated Development Environment, such as Thonny, Pycharm, Netbeans or Eclipse which are particularly useful when managing larger collections of Python files.

Python Syntax compared to other programming languages

-Python was designed for readability, and has some similarities to the English language with influence from mathematics.

-Python uses new lines to complete a command, as opposed to other programming languages which often use semicolons or parentheses.

-Python relies on indentation, using whitespace, to define scope; such as the scope of loops, functions and classes. Other programming languages often use curly-brackets for this purpose.
Stop Using React? But Why??
Tags: react, vue, angular, showdev
Published: 2020-11-03 04:11:45

I'm usually working with Vue but I also learn both React and Vue. They are awesome, those Single Page Application (SPA) framework solve my previously always-loading Multi Page Application (MPA) problem.

Then I see a post:
[![Post Screenshot of Stop Using React](https://dev-to-uploads.s3.amazonaws.com/i/uoapklxnksfdtrgd13ve.png)](https://dev.to/ender_minyard/why-you-should-stop-using-react-g7c)

I laughed, **very hard.**

Then I grab a cup of coffee and questions myself why this kind of haters exist, why people says React is slow, bla bla bla...

So I did research about React's runtime performance. Hours of time spent, I figured out that it's not actually React's fault, it's because nature of SPA frameworks. I see mind opening comment:

[![Comment by Sarah 🦄](https://dev-to-uploads.s3.amazonaws.com/i/260ildc1o2y2ebap2u2y.png)](https://dev.to/sarahob/comment/14o2j)

...and Stack Overflow question:

[![Question from Greg Gum](https://dev-to-uploads.s3.amazonaws.com/i/nfmn2bth5w9m2evnbimx.png)](https://stackoverflow.com/questions/31490103/spa-initial-load-time)

If loading time is the main concern of SPA, why nobody created web server specialized for SPA? Is that hard to put whole compiled SPA build into RAM for faster access??

Then I realized something:

> I'm a programmer, not a journalist.
> I supposed to make something, not only question on something.

# So I created Kuda Web Server

It's basically a web server, much like simple version of Nginx and Apache, but everything stored in RAM as illustrated below.

![Illustration of how Kuda Web Server works](https://dev-to-uploads.s3.amazonaws.com/i/h4hc08efybu18sk2tl1f.png)

It just works 😁

Anyway, if you want to try yourself, you can go ahead to the repository

https://github.com/Thor-x86/kuda

Hope it helps, thanks!
HacktoberFest2020
Tags: hacktoberfest, learning, github
Published: 2020-11-03 04:05:33

This is the first time I participated in Hacktoberfest and also my first opensource contribution. I learned a lot of new skills from Hacktoberfest, working with new developers on their projects helps me to improve a lot. It was a great experience.

Hacktoberfest 2020 is one of the best experiences of my journey to a developer, that I will always cherish it. The excitement at the hour when my first pull request was merged can't be expressed in words. To Be Honest, I didn't know the importance of this fest I just take part in this fest for fun. My only target was to submit 4 pull requests but Later on, I realized that I did more than 4 pull requests. I am extremely grateful to be a part of Hacktoberfest 2020 which boosted my confidence to a different level.

Skills I gained during this period -

Git
GitHub
CSS
Finding issues
** I hope my journey with open-source will continue.**

Thanks a lot, Digital Ocean for this opportunity!
How native iOS developer picked up REACT NATIVE  without learning React.js
Tags: reactnative, ios, swift, visualstudiocode
Published: 2020-11-03 04:05:20


Here am sharing my experience as a pure iOS developer with swift and Objective C knowledge and beginner to Javascript and css also a JSX syntax. 

Yes 3 years back I decided to learn React Native as I was curious about developing the apps for Playstore/android too. The option to develop app for android is I have to learn Java or Kotlin which I was not interested because I wanted one code to work in both android and iOS hence which can save my time as well I can develop more apps and I can be a freelancer too. 

Here am sharing my steps in learning the REACT NATIVE as a pure iOS Developer.
1. **Learn JavaScript:** As swift follows Javascript syntax like closures, map functions and most of the concepts like let and var so I have just read Javascript little bit, not into depth as a beginner.

2. **Learn Styling:** Went through CSS styling learnt about flex and styling a class.
3. **React Native Documentation:** Started reading about REACT NATIVE from there official documentation from here: http://reactnative.dev
4. **Visual Studio Code usage:** Installed Visual studio Code as a editor and learned about the plugins.
4. **Start practising:** Learned basic structure of the REACT NATIVE application which is something like this
import React from 'react';

```javascript
import { Text, View } from 'react-native';

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Hello World! 🎉
      </Text>
    </View>
  );
}

export default YourApp;
```
5 **State & Props:** Learned about the state and props
6. **Custom Component:** Learn about the the creation about the component and using it
7. **3rd party libraries from NPM:** Learned to integrate 3rd party packages using NPM

8. **Redux:** Learned redux for data flow. As react is one way data binding and passing all values in a props is really makes app very complex and Redux comes into picture where redux manages app state entirely for the application. i.e. you can access the state in all the component.

9. **Learn Hooks:** Now this is very important. Because React Native is now mainly using hooks in latest version. Also react makes functional component to work just like a class component hence giving more control on functional components.

This is my steps where I am able to learn REACT NATIVE and understood in depth without prior knowledge of the Javascript, CSS & React.js
Happy if this increased your confidence in learning React Native. HAPPY CODING!
Introducing Cerba
Published: 2020-11-03 03:49:41

> **TLDR**: [`cerba`](https://github.com/reggi/cerba) is a command-line tool to generate a npm package from a single file. 

I've loved the idea of creating small packages, but in practice it's a huge pain. One tool that has made a tremendous  difference in the ecosystem over the past couple of years is lerna. [`lerna`](https://github.com/lerna/lerna) helps people create "monorepos" and maintain, manage, and publish multiple npm modules in one github repo.

Enter [`cerba`](https://github.com/reggi/cerba) (short for [Cerberus](https://en.wikipedia.org/wiki/Cerberus)), what if rather then authoring the code separated and segregated, we create monolithic code that works without thinking about the seperactions. Then, what if we had some way of targeting files and creating modules out of that file.

```
npx cerba build --main ./src/example.ts
```

This command will track down all the dependencies used by `./src/example.ts` and it will copy all the local files into a new folder `./packages/example`, and it will create a `package.json` file it will also auto-generate the package dependency list by pulling in only the used modules from the root packages. All other "local" files that are referenced by this file will also be copied to this new destination file.

> TLDR; [`cerba`](https://github.com/reggi/cerba) let's you target a file, and build a package from it. 

You can also define a define a `cerba.json`, that looks something like this:

```json
{
  "packages": [{
    "name": "demo",
    "main": "./src/demo.ts"
  }]
}
```

The config file lets you define multiple `package.json` files in one file, just the essentials for what will need to be in the built module.

I've had this idea for quite some time now, and I'm happy to get it off the ground and share it with the world. This is really just a proof of concept and in order for it to really work I think it still needs some other key features. If you're interested in discussing ideas, I'd love to chat! Send me a message or leave a comment!

Checkout the project on github here: [github.com/reggi/cerba](https://github.com/reggi/cerba)

<sub>Credit Creative Commons: [cerberus by Saeful Muslim from the Noun Project](https://thenounproject.com/term/cerberus/2221117/)</sub>
Diseño responsivo con Media Queries
Tags: css, html, frontend, spanish
Published: 2020-11-03 03:13:01

##¿Qué son los *Media Queries*? 🤔

Cuando se trata de diseño responsivo, una de las mejores herramientas son los *Media Queries*. Los *Media Queries* te permiten aplicar estilos dependiendo de ciertas condiciones. Éstas condiciones, en un diseño responsivo, son los tamaños de las pantallas. 

Es decir, tu puedes condicionar el estilo de una página dependiendo del tamaño de la pantalla. Por ejemplo, si la pantalla donde se está viendo el contenido es de 375px o menor se puede especificar cierto color de fondo. Éste color de fondo puede cambiar si la pantalla es de 678px o mayor, y tener otro color completamente diferente si el tamaño es de 1080px en adelante, y así sucesivamente...

La forma de aplicar un *Media Query* dentro del archivo CSS es la siguiente:

```CSS
@media only screen and (max-width: 768px){
   body{
      background-color: grey;
   } 
}
```

Donde:

* **@media**: es la declaración inicial para indicar que lo que precede es un *Media Query*.
* **only**: indica que los cambios se van a ver solamente donde se especifica. Podemos omitirlo.
* **screen**: determina donde quiero ver los cambios, en este caso en pantalla, también puede llevar el valor de *print*, donde aquí, los cambios se van a ver cuando presionamos *CTRL + P* y se muestra la pantalla donde se previsualiza la página antes de enviar a imprimir.
* **and**: conector lógico que indica al navegador que además de mostrar en pantalla también se debe cumplir la condición que está a continuación: *(max-width: 768px)*. Este conector lógico también puede ser "**or**".
* **(max-width: 768px)**: Aquí estamos diciendo que los cambios que se encuentran dentro de las llaves "{}" se apliquen para pantallas cuyo tamaño sea menor o igual a los 768px. Así como hay *max-width* también se puede usar *min-width* donde el resultado va a ser el opuesto.

##¿Se puede cambiar solamente el color de fondo? 🎨

En realidad puede ser cualquier estilo, no solamente el fondo, absolutamente cualquier estilo, desde los colores, el tamaño, hasta la disposición de los elementos.

##Quiero saber más... 🙋‍‍♀️🙋‍‍♂️

Si quieres conocer más acerca del diseño responsivo con *Media Queries* te recomiento el siguiente video: 📹


{% youtube X47FTKldkZA %}


👍‍‍Si te interesó este contenido me puedes seguir en: 
twitter: [@CodingTube](https://twitter.com/codingtube) 👈‍‍  youtube: [CodingTube](https://www.youtube.com/CodingTube) ❤️
How to Properly Manage Application Secrets (From Beginner to Expert!) 🔐
Tags: webdev, devops, security
Published: 2020-11-03 03:44:03

{% youtube 7NTFZoDpzbQ %}

Where do you fall on the scale? Are there any levels I missed?

- Level -2: No authentication
- Level -1: All passwords = "password"
- Level 0:  Hardcode everywhere
- Level +1: Move secrets into a config file (and add to .gitignore)
- Level +2: Encrypt config file
- Level +3: Use secret manager (e.g. [AWS Secrets Manager](https://aws.amazon.com/secrets-manager/))
- Level +4: Dynamic ephemeral credentials (using a tool like [Hashicorp Vault](https://www.vaultproject.io/))
VUI & Chatbots
Tags: ux, voice, chatbots, vui
Published: 2020-11-03 03:26:42

Hello everyone, 

I recently began a course on VUI or Voice User Interface Design. This design is what is behind such ground breaking products such as Amazon Alexa and Apple's Siri. 

Here is a video of an overview of what this week's assignment Conversational Branding Activity.
 
Here is the video: 

{% youtube CAb2yG3rJio %}

Here are some Key Takeaways:

Why this activity is useful - It helps prepare the brand for the the types of things users can ask, and what pain points could come up for users when interacting with the brand's assistant.

How it helps you in the long run - This activity helps the bot prepared for the types of questions users could ask.
Chat bot de leyes de mascotas
Published: 2020-11-03 03:22:20

Hola 👋  quisiera  pedir ayuda para probar un chatbot de un proyecto de la universidad relacionado con el tema legal de mascotas en colombia 

https://bot.dialogflow.com/0f1f0038-051e-4ffc-9d29-7f92e0f07e12
Scraping data with Selenium + Python
Published: 2021-04-14 13:10:57

---
title: Scraping data with Selenium + Python
published: true
date: 2020-11-03 03:00:00 UTC
tags: 
canonical_url: http://igordcsouza.com/2020-11-03-scrapping-data-with-selenium-python/
---

“Why I need to scrap data?” This is probably the first thing you had asked yourself when you saw that title, right? So I can give you at least two good motives: Collect data that is not available in a JSON/CSV format. Test our application. In this post, I’ll only...
Pessoas + Tecnologia > Pandemia
Published: 2021-11-09 21:52:10

---
title: Pessoas + Tecnologia > Pandemia
published: true
date: 2020-11-03 03:00:00 UTC
tags: 
canonical_url: http://gabubellon.me//blog/pessoas-tecnologia-pandemia
---

Senti falta dos abraços e aperto de mão das **_PESSOAS_**  
`que não puder ter ou dar`…  
  
Senti falta de rever **_PESSOAS_**  
`que a um ano eu não via`….  
_mas como se apenas tivesse uma semana passado._  
  
  
Senti falta de conhecer **_PESSOAS_**  
`que eu já conhecia`…  
Senti falta de reconhecer **_PESSOAS_**  
`que eu ainda não conhecia`…  
  
Mas achei nas **_PESSOAS_**  
`a energia e felicidade !`  
Mas eu achei mas **_PESSOAS_**  
**`A COMUNIDADE !`**  
  
Mesmo longe,  
**`estamos PERTO !`**  
Mesmo separados,  
**`estamos JUNTOS !`**  
Mesmos não nos vendo,  
**`estamos nos OLHANDO !`**  
  
E a tecnologia não nos faz **_PESSOAS_** …  
**`A tecnologia ajuda a nos manter PESSOAS !`**  
  
A um tempo eu aprendi que  
**_PESSOAS > Tecnologia_** …  
  
Hoje eu descobri que  
**`PESSOAS + Tecnologia > Pandemia !!`**
How-To Write a Simple Countdown with React
Tags: react, javascript, timer
Published: 2020-11-03 02:49:34

There are tutorials for writing countdown from scratch. With [momentjs](https://momentjs.com/docs/), it should be a pretty simple task.

But as the name suggests, [easytimer](https://www.npmjs.com/package/easytimer) makes it easy.

First, set up the countdown variable with React `useState`:
```Javascript
  const [countdown, setCountdown] = useState(null);
```

Then, start the timer, and use event listeners to listen to the timer changes, update the `countdown` variable.

```Javascript
      const target = {
        minutes: 1
      };
      const timer = new Timer();
      timer.start({ countdown: true, startValues: target });
      timer.addEventListener("secondsUpdated", () =>
        setCountdown(timer.getTimeValues().toString())
      );
```


The `target` object accepts these keys: secondTenths, seconds, minutes, hours, days, or you can pass in an array in the exact order of `[secondTenths, seconds, minutes, hours, days]`

Lastly, remember to remove the listeners when component unmount.

```Javascript
      // Remove listeners on unmount
      return () => {
        timer.removeEventListener("secondsUpdated");
        timer.removeEventListener("targetAchieved");
      };
```

![countdown demo](https://dev-to-uploads.s3.amazonaws.com/i/a4p5unnqxoyroor7p991.gif)

Here's the complete source code, or you can view it on [codesandbox](https://codesandbox.io/s/peaceful-noyce-5qc5j?file=/src/App.js)
```Javascript
import React, { useState, useEffect } from "react";
import Timer from "easytimer";
import "./styles.css";

const App = () => {
  const EXPIRED = "Expired";
  const [countdown, setCountdown] = useState(null);
  const isActive = countdown !== EXPIRED && countdown !== null;

  useEffect(
    () => {
      const target = {
        minutes: 1
      };

      const timer = new Timer();
      timer.start({ countdown: true, startValues: target });
      timer.addEventListener("secondsUpdated", () =>
        setCountdown(timer.getTimeValues().toString())
      );
      timer.addEventListener("targetAchieved", () => setCountdown(EXPIRED));
      // Remove listners on unmount
      return () => {
        timer.removeEventListener("secondsUpdated");
        timer.removeEventListener("targetAchieved");
      };
    },
    // Known issue with eslint warning against the run-once useEffect
    // eslint-disable-next-line
    []
  );

  return (
    <div className="App">
      <h1>Countdown Demo</h1>
      <h2>{isActive ? countdown : EXPIRED}</h2>
      <div>(refresh to reset a 1 min countdown)</div>
    </div>
  );
};

export default App;

```

I found it a little bit confusing that there are two npm packages named easytimer: [easytimer](https://www.npmjs.com/package/easytimer) (last updated 4 years ago) and [easytimer.js](https://www.npmjs.com/package/easytimer.js) (last updated 4 months ago), but they both point to the same [GitHub user](http://albert-gonzalez.github.io/easytimer.js/).
Loops in Java
Tags: java, loops, tutorial, computerscience
Published: 2020-11-03 02:46:35

---
title: Loops in Java
published: True
description: An Introduction to Loops in Java
tags: Java, Loops, Tutorial, ComputerScience
//cover_image: https://bowlendevelopment-photos.s3.us-east-2.amazonaws.com/Twitch_ProfileBanner.png
---

An instructional video for my computer science students, this video covers four loops in Java:

{% youtube tOVbNkjmLek%}