teleren/devto huggingface dataset:
Retrospectiva - Team Building: Party Time
Tags: teambuilding, agile, retrospective
Published: 2021-05-08 19:41:41

Já contei um pouco sobre os tipos de retrospectivas e a importância delas nesse post aqui, vale a pena conferir.

Agora mostro pra você uma das retrospectivas de #teambuilding que costumo fazer com vários times.

interações:
- Quebra gelo
- Party time

(Caso um membro ou toda a equipe esteja trabalhando remotamente, pode-se utilizar alguma ferramenta para facilitar o desenho, recomento o [Miro](https://miro.com/) ou [Mural](https://www.mural.co/))

##Quebra gelo - 10min

Dessa lista de perguntas, escolha uma para cada participante de forma aleatória.

- Se você fosse um vegetal, o que seria?
- Se você pudesse se tornar um personagem fictício, qual escolheria e por quê?
- Se você pudesse morar em qualquer lugar e levar tudo e todos com você, para onde iria?
- Se você pudesse/quisesse mudar seu nome, para qual seria?
- Você é primavera, verão, outono ou inverno? Por quê?
- Num apocalipse zumbi, o primeiro item a sua esquerda será sua única arma, qual é?
- Se você criasse um slogan para a sua vida, qual seria?
- O que eu amo e quero manter no meu trabalho, porque?

## Party time - Trabalho em equipe - 50min

A ideia aqui é montar uma festa, com uma temática que facilite a interação dos membros do time.

Cada um fala uma coisa gostaria que tivesse numa festa (tentar fazer com que as pessoas digam coisas diferentes, mas pode ser qualquer coisa mesmo)

Dessa lista de itens, é necessário fazer um sorteio para que cada pessoa pegue um item diferente do que falou e tente desenhar.

Pra não virar bagunça, pode tentar desenhar um item por vez, mas as outras pessoas podem ajudar no processo também.

## Conclusão

Para o fechamento, o(a) facilitador(a) pode perguntar o que as pessoas acharam e qual foi o ponto mais interessante da dinâmica.

---

Mesmo sendo uma interação um pouco incomum, é uma boa forma de contato inicial com novo membro ou até mesmo um novo time inteiro. As vezes é melhor oferecer uma dinâmica fácil e pode-se dizer, fora do contexto do processo comum da empresa, pois assim a conexão entre as pessoas fica mais leve.
Keyoxide Proof
Published: 2021-05-08 19:13:03

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/FINGERPRINT) to [this dev.to account](https://dev.to/x0darkpadr3). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:485c425be45c35c1e00909f69e6b11ba39245984]
MOTIVATION DOESN'T MATTER
Tags: motivation, codenewbie, productivity, programming
Published: 2021-05-08 18:57:15

Have you ever said:
"I don't have the time to code today"

Let me tell you the truth, If you rely on motivation.. You will FAIL!!

If you're relying on motivation to succeed as a developer you're not going to succeed at all.

In order  to become a better programmer you need to implement coding into your lifestyle. That may require sacrificing those lounging breaks on the weekend.

Those days where you lack motivation become wasted days that put you one step behind.

If you truly want to learn how to code, you don't need motivation, You need a lifestyle change.

Set a time during the day that you can dedicate towards coding.
Grouping in CSS
Published: 2021-05-08 18:56:48

```css
h2 {
    color: red;
}

.thisOtherClass {
    color: red;
}

.yetAnotherClass {
    color: red;
} 
```

- In Grouping we separate selectors with commas (,) Alternative of the above 10 lines of code is as shown below:

```css
h2, .thisOtherClass, .yetAnotherClass {
    color: red;
}
```
Nullish Coalescing Operator Refactoring
Tags: javascript, codequality, refactoring
Published: 2021-05-08 18:47:56

**The nullish coalescing operator (`??`) returns its right side when its left side is nullish** (`null` or `undefined`), and its left side otherwise. For example, `const x = a ?? b` would set `x` to `a` if `a` has a value, and to `b` if `a` is `null` or `undefined`.

The nullish coalescing operator is very useful to **provide default values when a value or an expression is nullish**. Before it was introduced in ES2020, this default value pattern was often expressed using the conditional operator.

You can replace conditional (ternary) checks with nullish coalescing operator expressions:

* `a == null ? x : a` becomes `a ?? x`
* `a != null ? a : x` becomes `a ?? x`
* `a === null || a === undefined ? x : a` becomes `a ?? x`
* `a !== null && a !== undefined ? a : x` becomes `a ?? x`
* etc.

Learn More: [Nullish coalescing operator (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)

P42 now supports converting ternaries that provide default values for nullish expressions. [Try it out in the P42 VS Code Extension!](https://marketplace.visualstudio.com/items?itemName=p42ai.refactor)
How to Scan Documents with an HP Scanner in Linux [VIDEO]
Tags: opensource, howto, linux, ubuntu
Published: 2021-08-05 19:19:51

---
title: How to Scan Documents with an HP Scanner in Linux [VIDEO]
published: true
date: 2021-05-08 18:31:22 UTC
tags: FOSS,HowTo,Linux,Ubuntu
canonical_url: https://fossnaija.com/scan-documents-in-ubuntu-linux/?utm_source=rss&utm_medium=rss&utm_campaign=scan-documents-in-ubuntu-linux
---

This video shows how you scan any document ([files](https://fossnaija.com/5-ways-to-backup-files-on-your-computer/), books etc) easily without any additional (3rd party) software on [Linux](https://dev.to/xeroxism/new-release-ubuntu-linux-1804-long-term-support--bionic-beaver-2kle). The Scanner that was used for the demonstration is HP PSC 1410 3-in-1 scanner. This should work in any popular scanner out there.

<iframe width="665" height="375" src="https://www.youtube.com/embed/jw1SVifo_L8?version=3&amp;rel=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;fs=1&amp;hl=en-US&amp;autohide=2&amp;wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe>

{% youtube jw1SVifo_L8 %}



LIKE, SHARE and SUBSCRIBE!!!

TWITTER: [https://twitter.com/fossnaija](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbktFal9wNkh3ZFV0MmdIckVrZThFbUl5RE1nUXxBQ3Jtc0tsNWdQeFJfRlJKeW1zVHFKWlNmSmd5YlRTVk05M2JrVWZKei1VeENoMGg5R0JRUGY2QnlXNFVsVklNNnNVM3dKaC1UQnVIN25VcmRGbExkZTdTeGR5UjlWME9yNzQzYklFa1BnSmdVTlZYUlNjS1NYUQ&q=https%3A%2F%2Ftwitter.com%2Ffossnaija)​

INSTAGRAM: [https://instagram.com/fossnaija](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbVVjMV9FRW84SDZhRWcwSEtfdTgtXzh3WFZQQXxBQ3Jtc0trNVQ4Y0pWY21CUlRYM0hSNVB4S1dwUDE2WFR2ek5VSmgyVXMyamZoQVdxOHV1aXNoU1V0eFNuMWNrUHpQeUJyVTFoU1VMRTdGRERJaWdsMmtZWXpjZFZURzFnOTlGMHI2N2VlNzFtZ296enlNcWxHVQ&q=https%3A%2F%2Finstagram.com%2Ffossnaija)

**Happy Linux'ng!**

The post [How to Scan Documents with an HP Scanner in Linux](https://fossnaija.com/scan-documents-in-ubuntu-linux/) appeared first on [Foss Naija](https://fossnaija.com).
10 Interview question of java script 
Published: 2021-05-08 17:25:24

1. What is Get and Post in javascript?

2. What is DOM?

3. What is a call back function?

4. What is recursion?

5. What is event Bubble?

6. Difference between double equal and triple equal ?

7. Explain about const ,let and var .

8. Explain arrow function .

9. Code of prime number .

10. Code of Fibonacci Series .
Day 77
Tags: 100daysofcode, programming
Published: 2021-05-08 17:22:19

Day 77/100 of #100DaysOfCode


- Practice  'Intermediate Algorithm Scripting' part of FreeCodeCamp 'JavaScript Algorithms and Data Structures ' course.

-Improve skills by building 15 projects using React  from John Smilga   (Coding Addict). Today practice project
6- "tabs".
Containerzing our python application
Tags: docker, python, programming, computerscience
Published: 2021-05-08 17:11:39

Flask is a Python-based micro web platform. It is known as a microframework because it does not necessitate the use of any specific resources or libraries. It lacks a database abstraction layer, type validation, or any other components that rely on pre-existing third-party libraries to perform basic functions.

this is just a boiler plate hello world program in python

```python

#write this in  "flask_code,py"
from flask import Flask
app = FLask(__name__)

@app.route("/")
def hello_world_for_flask():
    return "first flask project"

app.run(port = 8090) #make it run in 8090 port
```


`pip freeze` on your command prompt will give all the installed packages on your enviroement thus you can go and add them and this command also give the version of the installed.After they list in the terminal put all the text here to the `requirements.txt` and save it in the directory that has `Dockerfile`.
```dockerfile
FROM python:3

#make the workdir command to app
WORKDIR /app

#install depedencies from here
COPY requirements.txt .
RUN pip install -r requirements.txt

#we have the copy our source code

COPY /app .

#to run our application
CMD ["python", "flask_code.py"]
```

Then after building the docker file please do use the below command to build the docker file.

`docker build -t docker_built_file`

After building the docker image do go and run it with the command that I have stated here(you can use any port that you wish to use).

`docker run -p 8090:8090 docker_built_file`

Then go to the browser and type `localhost:8090` and then you will find this as the output.(if you have worked as stated here).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z3qezdsembe1a6woik5.png)

Thank you all hope this helps you all in learning new thing.
49 Days of Ruby: Day 42 -- Web Frameworks: Rails
Tags: ruby
Published: 2021-05-08 17:11:07

---
title: 49 Days of Ruby: Day 42 -- Web Frameworks: Rails
published: true
description: Join us on a 49 day learning journey through Ruby!
series: 49 Days of Ruby
tags: #ruby
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9m73qaetuse3nm3y3it8.png
---

**Welcome to day 42 of the 49 Days of Ruby! 🎉**

Today, we are going to take a quick look at Ruby on Rails. This framework perhaps did more to popularize the Ruby language than anything else. However, as we have seen, it is not the only web framework out there.

## Getting Started with Rails

From the command line, you can run `rails new my_app` and that will create a new directory called `my_app` with all the scaffolding for a Ruby on Rails website.

Then, change into the directory of the app, and run `bundle install` and `bundle exec rails db:migrate`. This will install the gems for the app, and set up the initial database schema.

Once that is finished, you can run `bundle exec rails server` and navigate to `http://localhost:3000` in your web browser. You will see something like this:

![Rails Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmrjn3mhuhdyfzm1rzxn.png)

## Rails Architecture

We learned yesterday about how Hanami architects its apps and puts the models, views, and controllers.

In Rails, it is done a little bit different but still operates within the MVC design.

* The Controllers for your app live inside `app/controllers`
* The Models for your app live inside `app/models`
* The Views for your app live inside `app/views`
 
## Rails Generators

Rails ships with interesting things called "generators", which helps you build components of your web app relatively quickly. You can read more about them in the [Ruby on Rails Docs](https://guides.rubyonrails.org/command_line.html#bin-rails-generate) for the specifics.

With generators, you can create controllers, models, database tables, and more from your command line.

For the rest of today, play around with Rails! See what you can build and share it with the community.

**Come back tomorrow for the next installment of 49 Days of Ruby! You can join the conversation on Twitter with the hashtag [#49daysofruby](https://twitter.com/hashtag/49daysofruby).**
My experience in taking OCP Java SE 11 Developer
Tags: java, java11, ocp
Published: 2021-05-08 16:33:57

### Introduction
As an experienced Java Developer, It was an opportunity for me to take the discounted exam (90% off) starting from February 25 to April 25 of this year. The discounted exam was due to the Java 25th Anniversary. I ended up scoring 76% and it was a nice experience that made me more understand Java and the new features of version 11.

### Preparation
I've prepared for the exam about 1.5 months and I used the book of Boyarsky and Selikoff, [OCP 11 Study Guide](https://www.amazon.com/Oracle-Certified-Professional-Developer-Complete/dp/1119619130). This book covers almost all of the topics that you will encounter in the exam. Since some of the chapters of the book was hard to understand, I sometimes re-read again a specific chapter.

Since I've already took an OCA for Java 8. These are the chapters that I've studied for this exam:
* Chapter 2
* Chapter 11
* Chapters 12 - 22

After reading each chapter, I immediately took the review questions so I can assess if I understood the module. Also at the end of the book, you can register and access for the Sybex Online Test Bank which is valid in 1 year upon your registration.

### Before The Exam
The exam can be taken in Pearson VUE website where you will schedule and pick if you're going to take via online or onsite. After that, you must do a system check if your current device is working properly.

### The Exam
OCP Java 11 SE Developer has no exam prerequisites, unlike the previous exams that you must take first the OCA exam. I took the exam online because of COVID-19 restrictions. But I prefer taking exams onsite.

The exam consist of 50 questions under 90 minutes which is different to previous OCP exams that has 85 questions under 150 minutes. Exam objectives that I've encountered are as follows:
* Concurrency
* Functional Programming (Lambda and Stream API)
* Java Fundamentals (Operators and Core Java API)
* Annotations
* JDBC
* Security
* NIO.2
* I/O
* Exceptions
* Modules

The exam was slightly hard since you need to think of the answer for each question under 2 minutes. I mark a question **For review** when it took me already more than a minute just to answer. The exam proctor is usually strict for unnecessary movements you make during the exam. After answering and reviewing all the answers, you can submit and can see the results immediately.

### Summary
The exam is not easy and you need to prepare for it. Luckily, certification books of Boyarsky and Selikoff exists. Their book contains questions that is already hard and can make you really prepare for the exam. In the end, you must manage and give time in studying for the certification.
Should I put my input and button in a form?
Tags: html, forms
Published: 2021-05-08 16:10:17

This is what I found myself trying to find out this week.

## The set up

I have an input element and button. When you type in the input and press the button it goes and fetches data from an API, using what you type as a search. Well, it will eventually, for now it just does a bit of console logging.

HTML:
```
<input>
<button class="button">Submit</button>
```

JS:
```
const button = document.querySelector('.button')
button.addEventListener('click', function() {
  console.log('button clicked');
})
``` 

[Test this code in CodePen](https://codepen.io/nicm42/pen/RwpPwvN?editors=1111)

## What is a form?
A form is used to submit data. So, for example, filling your name and email address on a website so the company will contact you. When the form is submitted it goes somewhere and does something.

In this example we're not sending the data off somewhere and we're not then giving users a message to confirm it's been sent. So therefore we don't need to put the input and button in a form because this isn't doing form-things.

## The problem with not using a form

I wanted to test my EventListener, so I typed something in and pressed the Enter key on my keyboard, same as I would do if I saw a similar set up on any website. And nothing happened. It only gave me the console log when I actually clicked on the button.

Which makes sense: the event listener is listening to the button being clicked, not the enter key being pressed when the input is focused.

Maybe you're the sort of person who would automatically just click the button, which is great. But if you're the sort of person who presses enter when they've finished typing, then would you think to click the button or assume the site is broken?

## The form solution

There are ways around this - you could listen for the enter key being pressed on the input, but that's a pain, because then you have to do something on a specific key being pressed. And also still listen for the button click.

The solution is to put the whole thing in a form and instead listen to the form being submitted.

HTML:
```
<form class="form">
  <input>
  <button type="submit" class="button">Submit</button>
</form>
``` 
JS:
```
const form = document.querySelector('.form')
form.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log('button clicked');
})
``` 

 [Test this code in CodePen](https://codepen.io/nicm42/pen/mdWJday?editors=1111) 

Now when you press enter in the input box, it acts like you clicked the button.

You'll notice I also added an extra line in there:
```
e.preventDefault();
``` 

This is needed because a form wants to go somewhere, but we want to stay on the same page. preventDefault() tells it not to do the default form action.

### Accessibility note

For ease of reading I haven't included any attributes on the input element. Nor did I include a label. A label is a good idea for accessibility: [for more information read this very good guide on CSS tricks to labels and inputs](https://css-tricks.com/html-inputs-and-labels-a-love-story/)
Good design
Tags: webdev, design
Published: 2021-05-08 15:57:24

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

Design is a subtle thing. Getting it right at the first go takes practice and experience. Web design especially has two aspects of it. UX and UI.

My principle is to make it simple, intuitive and accessible. A visitor should instinctively know where things are located and the result of any action on the website should be known before the action is performed.

This is incredibly challenging, but coming up with something spectacular is really satisfying. The website functions as expected, everything flows smoothly as you guide the visitor in exploring and discovering valuable content.

Another principle of mine is to "trim the fat". Anything that is not absolutely needed, should be cut off. A website needs its own feng shui – when it’s too cluttered, nobody can find what they need. Once in a while see what you might be able to lose. This goes for elements on the website as well as steps to steps to perform an action. My favorite principle in design is balance.

I like websites that do one thing and do it well.

Starting from a blank canvas can be challenging. It is okay to refer to designs that have been created by other designers then adapt them to your work. Tapping into the wisdom of the crowd makes you a good designer and helps you to improve your skills. Here are some places where you can get some good design inspiration.

* [Dribbble](https://dribbble.com)
* [Pinterest](https://pinterest.com) 
* [Behance](https://www.behance.net)
* [Awwwards](https://awwwards.com)
* [Mobin](https://mobin.design)
* [Httpster](https://httpster.net).

Feel free to reach out to me on [twitter](https://twitter.com/rexthony) if you have any questions or suggestions.
WASSUP... I am here to present you with [Just-chat] Yep you can clap now!
Tags: webdev, node, html, help
Published: 2021-05-08 16:05:21

[Just-chat](https://Just-Chat.timothyrowell.repl.co) it's NEW GO TO IT, I made it with my team [HackersClan](https://replit.com/team/HackersClan) its **still** in development but I just wanted to share my ~~crappy, knockoff discord, badly done CSS, ugly, laggy~~ chat app please check it out here's a trailer for it! {% vimeo 546899774 %} This took about a month to make. If you would like to help out with it comment! Follow For more :)
Tailwind + IntersectionObserver API = <3
Tags: css, javascript, tailwindcss, webdev
Published: 2021-05-08 16:03:54

The intersection observer is an incredibly powerful API, and really great for managing scrolling animations. When combined with Tailwind, it gets even better. 

In my use case, I have multiple elements which need to fade in once they are in the viewport, but their transition time should vary to give a sense of speed and progression.

To achieve the varying animation speeds, you could do a few things:
- Use inline styling
- Write a class for each element
- use the `attr()` [method in CSS](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#css_access)

My project is using Tailwind and Vue, so I opted for a tailwind class-based solution. 

Let's have a look at my observe:

```js
observeHandler(ob) {
      ob.forEach((el) => {
        el.target.style.opacity = ob[0].intersectionRatio;
      });
    },
```

Pretty simple stuff. We are using the intersection ratio to calculate the opacity of the element, to fade in on scroll. 

I've got a lot of elements to observe, here's my solution in attaching the observe:

```js
let options = {
  root: document,
  rootMargin: '0px',
  threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
}

let observer = new IntersectionObserver(this.observeHandler, options);

let els = document.querySelectorAll('[data-observe]');

els.forEach((el) => {
  observer.observe(el);
});
```

Amazing, nice and simple. We seek elements with the `data-observe` attribute:

```html
<div class="text-5xl mb-5" data-observe>Websites are more than code.</div>
```

Now, back to our delays and transition speed. I am using Tailwind classes to manipulate those properties, here is a great example:

```html
<div class="flex items-center delay-75" data-observe>
  <div class="w-10 h-1 bg-black mr-3 mt-1"></div>
  <div class="text-2xl">I capture the imagination,</div>
</div>
<div class="flex items-center delay-300 duration-300" data-observe>
  <div class="w-10 h-1 bg-black mr-3 mt-1"></div>
  <div class="text-2xl">hand-craft experiences</div>
</div>
<div class="flex items-center delay-500 duration-500" data-observe>
  <div class="w-10 h-1 bg-black mr-3 mt-1"></div>
  <div class="text-2xl">and build solutions.</div>
</div>
```

This means I can add any number of observers, and use tailwind to control speed, which is amazing. 

![Animation example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwpw330rl4ebhf31w0wq.gif)

To see the final result:

https://imgur.com/pdvkqjH
Intro to Machine Learning
Published: 2021-05-08 15:58:55

The creators and maintainers of scikit-learn have created a MOOC: Machine Learning in Python with scikit-learn.

This MOOC is available for free; it was funded by Inria, the French national research institute for digital science and technology.

This online course is beginner-friendly. A strong technical background is not required. Learners should have some familiarity with numpy, pandas, matplotlib.

Information:

- This online course is available for free: [Information & registration](https://www.fun-mooc.fr/en/courses/machine-learning-python-scikit-learn/)
- All the materials will be made public and reusable
- 8 weeks / 35 hours total
- Course dates : From May 18 to July 14, 2021
- Certificate: will be issued upon completion of course; share it on LinkedIn, etc.