teleren/devto huggingface dataset:
BUILDING CONFIDENCE AS AN INSPIRING DEVELOPER
Tags: webdev, beginners, programming, javascript
Published: 2022-11-20 23:17:44

Confidence is exceptionally imperative and an unquestionable requirement for everybody living in today’s society. Your capacity to manage hardships, tackle issues, and approach people requires confidence.

Fortunately, confidence is a skill, such as driving a vehicle or playing tennis or basketball, that can be learned and developed with practice.

First, what is confidence?

Confidence can mean different things to people, but in this article, I will define confidence in 4 ways.

1. Confidence is hopeful about the future and the path you are on.
2. Confidence is knowing that you have control over that path.
3. Confidence is being calm with that information and the feeling of command over your current circumstances.
4. Confidence is the fact that knowing your insight, your capacity can endure any task that is at hand.

We have two types of confidence

1. The confidence in yourself i.e the energy you project out to the world. i.e your body language.
2. The confidence in performing a task.

We will focus on the second type of confidence; **“The confidence in performing a task”**

The question now is, how do we build this confidence?

Confidence comes from **practice**; As a newbie entering into software development; you might feel inferior and overwhelmed because the field Is too broad, and you might also begin to have low self-esteem when you hear senior developers’ numbers of years of experience; all these feelings are normal and it happens to everyone. But the interesting part is; you can be like Them. BUT HOW?

1. Niche down: software engineering is broad, so you have to niche down and focus on one at a time. we have different niches in the field e.g front-end engineering, back-end engineering, full stack development, DevOps engineering, security engineering e.t.c

2. Start from the basics: In secondary school, you can’t jump your regular 1,2,3…. Or indices to calculus. What does that tell you? You must start from stage 1; the same applies to software engineering. For the front-end learn your basic HTML, CSS, and JS before you move to any framework, for the back-end learn your vanilla (without framework) python or JS for DevOps your basic knowledge of scripting, cloud e.t.c. learning the fundamentals and being grounded in it gives you confidence for any new framework that is to come or an existing framework.

3. Practice every day; According to Woody Allen, he said: 

> Showing up is already half the battle.

Spend at least 30 mins coding every day. Make a habit of daily coding, this will help build your brain memory.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o79k7ows8hfokqcq4wei.png)


Make coding a consistent habit. The world has no use for a temperamental genius. **It’s not about intelligence, it is about consistency and consistency builds up experience and competence**.

The more you code, the more confidence you build, and the more confidence you build, the more successful you become at programming.
[Solved] Build failed due to use of deprecated Android v1 embedding
Tags: webdev, flutter, programming, tutorial
Published: 2022-11-20 23:09:03

Hey guys! 
Have you been facing "Build failed due to use of deprecated Android v1 embedding"? then this video is for you.

{% embed https://www.youtube.com/watch?v=rU33K40-cK8 %}
Release 0.3:Internal Project Contribution
Tags: opensource, beginners
Published: 2022-11-20 22:56:27

Hey everyone, thanks for reading my Blog post. This post is regarding my contribution to Internal Project of Seneca 
[my-photohub](https://github.com/humphd/my-photohub).

## Overview

My Photohub is a web app that makes it easy to share your photos on the web. My Photohub takes your images and optimizes them for the web, creates a beautiful HTML page to show them, and hosts everything in a new GitHub Repository owned by you! Your photo web page is made available to the world via GitHub Pages. Best of all, everything is free and you are in control of the end product.

## Issue

Issue is to add the [Prettier](https://prettier.io/) into this project.

Link to issue [Issue 23](https://github.com/humphd/my-photohub/issues/23) 


## Description 

Added the [Prettier](https://prettier.io/) into this project

- In `.vscode` folder 
- In `extensions.json` file added [Prettier](https://prettier.io/)  as the recommendation
- In `settings.json` added configration.
-  Run [Prettier](https://prettier.io/) via  command line `npm run format`.
- Check  all the files are formatted via command line `npm run format:check`
-  Added `.prettierignore` 
- Added `.prettierrc.json`
- Update the `CONTRIBUTING.md` on how to use  [Prettier](https://prettier.io/) via  command line

## How to install [Prettier](https://prettier.io)

Prettier is an opinionated code formatter with support for:

- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML

First, install `Prettie` locally:
  `npm install --save-dev --save-exact prettier`

Create an empty `config` file to let editors and other tools know you are using Prettier:
  `echo {}> .prettierrc.json`

Create a `.prettierignore` file to let the Prettier CLI and editors know which files to not format.

Run this command in terminal to format all the documents.
`npx prettier --write .`



## Pull Request

Link to [PR](https://github.com/humphd/my-photohub/pull/24)
You don’t need 100% coverage.
Tags: testing, programming, webdev, productivity
Published: 2022-11-20 22:36:40

Before thinking about going for the sweet 100%… do you, at least, have enough tests?
Getting 100% for any feature you have is awesome, don’t get me wrong. But if you don’t have enough tests for most of your application, then you don’t need that 100%.

## Cover all the happy paths first

The least your application should do is work as you intended when you use it as intended.

This means covering all your happy paths first.

## Cover the core features

Your core features, also those more critical, are bound to give you more grief.

Being important to you, you probably want 100% for them first. 

Out of everything, your most critical places should have 100%. (And probably some more, because of possible problems you can have and edge cases that will give you redundancy.)

## Cover the main error paths

What happens when someone tries a wrong password or if your API returns that they aren’t authorized to do something?

There are many expected errors you can have and you should also cover those paths.

## Got a bug? Replicate on tests!

For bugs, it doesn’t matter if you’re already covered (and if you got a bug, then you probably aren’t covered). 

Got a bug, replicate it in a test and never bother about it again.

## New features can start at 100% (or almost it)

Depending on where you are in testing everything if you started to commit yourself to testing your application, it’s a no-brainer that new features can start with already 100%, or as close as possible.

## Go for 100%?

Before getting to 100%, and you probably don’t even need that 100%, you probably will need to check if those tests you already have are actually covering what your coverage says it does.

You can “easily” cover 100%, but if you keep having bugs and other problems even on tested grounds, then those 100% might not be worth anything and you should improve if what you’re testing is actually testing what you want.

## Beyond 100% (even without 100%)

By now, you would have a high percentage, maybe even in the ninety percent range. 

So you have a choice… because climbing the last percent to 100% is costly and might not be worth it, you can think about adding redundancy or doing other types of testing.

You probably would have lots of units and integration testing, so now you could think about e2e tests, maybe load and other types of stress testing, or how about some mutation tests?

---

Cover Photo by [Clay Banks](https://unsplash.com/@claybanks?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/coverage?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
. DOM manipulation
Tags: webdev, javascript, beginners
Published: 2022-11-20 22:07:32

Document Object Model also known as the DOM is an API where languages like Javascript, HTML, and CSS is used to create the display, interactions such as clicks and mouseovers, and access to the data the client is trying to access. We will be using JavaScript to demonstrate how the DOM is manipulated for a successful experience.


We will be adding a button  feature to our web browser to remove an element from the screen and our database.



We will first need to query select the exact HTML element we want to manipulate. you can query select a .class or #id. 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67g0iaam3hnpps9hzrgi.png)


Notice we linked this id grab to a variable which will be helpful if that specific element needs to be grabbed and accessed else where. I recommend declaring your variables globally to avoid declaring and grabbing the same element multiple times. 

Now we will need to create our button and have it appear on our app. We will do this by using the createElementMethod() and .textContent. CreateElement allows us to create a tag and add to our index.Html code. While .textContent() is what the button will appear to be once added to the DOM hence why we added an x to allow the user to know this will be a clicable button to delete.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fra7fsdvzjjx27v8tp8j.png)



Remember to console .log everything just to be sure we our grabbing and creating the right thing. Below I have consol.log our newly created button.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/md74gu121g5exmf4z6ig.png)


Lastly we will add it to our DOM using .append() method , we use this method to to added to the parent node which holds the a spot on our DOM essentially.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2shdrqqwtld3z2cu7oe.png)



Now you should see a button for each photo in our list div with a X button.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tvngv92w016l81likw2.png)
Switch to Switch Statement?
Tags: beginners, javascript
Published: 2022-11-20 22:07:04

**Not-so-fun fact: 
You CAN NOT use logical operators in the switch case statements.
**

A switch statement can be seen as an alternative to an if-else statement. Comparing switch-case and if-else statements, their differences only show when dealing with a large set of selections; in these cases, the switch statements will prove to have faster processing power due to their fixed depth structure. Switch statements are also easier to debug and maintain. Though switch statements can get lengthy, their fixed depth makes it easy to spot and manipulate problem areas.

For example: If you want to change the wake-up time for Thursday in the code below, you would have to restructure the if-else statement slightly.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6ktums8arfpp4auf8ql.png)

But, when dealing with a switch statement, you would only need to locate the "Thursday" case and make the immediate change.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lqka6qusq5l99eerto4.png)

When deciding between if-else and switch-case, always consider how many options you will be working with, if changes in the code might be necessary over time, and how fast you need the processing speed to be.

**Bonus Fact!
Once your switch statement finds its match case, it will print out everything from there and down unless a break is indicated.
**
No breaks:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w5i0xi2sfw6bpt30dar.png)
Breaks:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rrbm8x4ov24qcghfevo.png)

--Thank you for reading my first post! Feel free to comment and follow. I'm here to learn just as much as I am here to share my findings through my journey to becoming a software engineer.
¿Como convertir un objeto en query strings?
Tags: javascript, spanish, node, api
Published: 2022-11-20 22:06:22

Cuando hacemos consultas a una API, puede que queramos almacenar las query strings en un objeto para posteriormente ser usadas en la URL de la consulta en la API. 

Por ejemplo tenemos esta url de la api de TMDB:

```js
https://api.themoviedb.org/3/find/21?api_key=qe879fds9a&language=en-US&external_source=imdb_id
```
Aquí tenemos 3 query string:
- api_key
- language
- external_source

Podríamos hacer lo siguiente para recibir las query strings:

```js
`https://api.themoviedb.org/3/find/21?api_key=${api_key}&language=${language}&external_source=${external_source}`
```
Esta es una manera válida pero si la url base es extensa y manejamos demasiadas queries se hará mas difícil de mantener y escalar. Podemos solucionarlo almacenando las queries en un objeto.
Entonces, ¿como convertimos un objeto en query strings?

Pues, utilizando un módulo nativo de nodejs llamado **querystring**.

``` js
const querystring = require('querystring')

let queries = {
api_key: "qe879fds9a",
language: "en-US",
external_source: "imdb_id"
}

const base_url = "https://api.themoviedb.org/3/find/21?"
const queryparams = querystring.stringify(queries)
console.log(queryparams) \\api_key=qe879fds9a&language=en-US&external_source=imdb_id

const URL = `${base_url}${queryparams}`
console.log(URL) \\"https://api.themoviedb.org/3/find/21?api_key=qe879fds9a&language=en-US&external_source=imdb_id"

```
Ahora tenemos un código mas escalable. Pudiendo manejar toda la lógica de las queries desde este objeto.
Automatic args in React Native Storybook
Tags: reactnative, storybook, typescript, react
Published: 2022-11-20 21:54:39

---
title: Automatic args in React Native Storybook
published: true
description: How to use docgen to generate args and arg types for your React Native Storybook based on your typescript types.
tags: reactnative, storybook, typescript, react
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-20 21:30 +0000
---

This is a quick guide on how to setup automatic args for React Native Storybook V6 (currently in beta).

If you've used the web version of Storybook you'll know that your types are used to infer the types of your args. This is done using a transform called docgen in the Storybook webpack bundle process.

## Docgen for React Native?

In React Native Storybook you might have noticed that this doesn't happen by default. That's because we don't bundle a separate app like in the web so it's not possible to insert a transform into the bundling of the app. In order to do this you the user need to add it to your configuration.

Recently I worked with Michael Shillman one of the core maintainers of Storybook to find a way to make this work for React Native. We came up with something that works for typescript types but requires some setup from user (for the reasons mentioned above). 

## The setup

To use docgen in React Native Storybook you will need at least version `6.0.1-beta.10` and you will want to have types for your component props. 

Then you will want to install these packages: 

```bash
yarn add -D @storybook/react @storybook/docs-tools babel-plugin-react-docgen-typescript
```

Then add the docgen plugin to your babel config:

```js
plugins: [['babel-plugin-react-docgen-typescript', { exclude: 'node_modules' }]],
```


Now add the following code to `Storybook.tsx`

```tsx
import { extractArgTypes } from '@storybook/react/dist/modern/client/docs/extractArgTypes';
import { addArgTypesEnhancer, addParameters } from '@storybook/react-native';
import { enhanceArgTypes } from '@storybook/docs-tools';

addArgTypesEnhancer(enhanceArgTypes);
addParameters({
  docs: {
    extractArgTypes,
  },
});
```

You can also add it to another file and import it from `Storybook.tsx`.

Once this is done then you should have Args and ArgTypes without needing to manually specify them.

Thanks for reading!
Please try it out and let me know if it worked for you.

twitter: [Danny_H_W](https://twitter.com/Danny_H_W)
github: [dannyhw](https://github.com/dannyhw)

Shoutout to [@mshilman](https://twitter.com/mshilman) for helping make this possible.

---

edit: Note that if you get errors with extending types you can fix it by overriding the version of react-docgen-typescript like so

```json
  "resolutions": {
    "react-docgen-typescript": "2.2.2"
  },
```

or in npm/pnpm you would use overrides instead of resolutions.
Cloning a simple NFT shop with scroll animations!
Tags: webdev, css, javascript, html
Published: 2022-11-20 21:28:47

After seeing [Puungs NFT website](https://puuungfriends.com/) i wanted to clone it to practice my coding skills. The layout is simple but very fitting and eyecatching. Of couse, since i was trying to make an exact website using my own code i had a few issues, so it took me 4 hours 😭. I also added added a scroll animation using CSS and the javascript API called `IntersectionObserver`. You can see it [Here](https://cat-shop.lensco825.repl.co/), but you can also see ii embeded below. **It's best to see fullscreen!**


{% replit @lensco825/Cat-showcase %}


#HTML and CSS
   The top of the website is a nav, which i made by using an unordered list and paffing. To make the rest of the top iI first needed to understand the layout of all the NFT images. It seemed to me like they used grid but they didn't give every grid item an image. After i figured it out i put the top-part's information and the second picture-grid into one single element. In the element i gave it a grid making it 2 columns so the text could be right next to the pictures. Under it is a button that goes straight to the website i cloned.


   The second section was a bit harder for me. I gave the secion a grid so each both the images and the text could be at the same level. For the images i gave them a grid with a gap, it didn't work for all of them since some were bigger that others, but it still looked good. Under it is an unordered list of milestones i've reached so far. 


At the final section i added a background image and centered the text, in that text is just information of why i made it. 


Before i finished made the nav lists inline-links that led to each section of the website. I made the font Poppins so it can look better

<hr>

#Scroll Animation
Using the `IntersectionObsrver` API i gave the second and third section a scroll animation. I did this by making each element that has the name "hidden" invisible and to the far left. Then i made a class called "show" that makes an element visible and back to it's original place. Inside the intersection Observer i made it so as soon as an element with the class "hidden" is being fully observed the "show" class will be added to it. When you give the hidden class a transition duration the style of the element will transition from invisible at the far right to visible at it's place.
Simple Weather App By Using OpenWeatherMap API & Custom Icons
Tags: codepen
Published: 2022-11-20 20:58:15

<p>In today’s tutorial, we’ll learn how to build a simple, yet fully functional weather app with Vanilla JavaScript. We have a lot of interesting things to cover, so grab a cup of coffee and let’s get started!</p>

<p><a href="https://webdesign.tutsplus.com/tutorials/build-a-simple-weather-app-with-vanilla-javascript--cms-33893">Read full tutorial here</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/poKppBX %}
Responsive SVG animation w. vanilla Javascript
Tags: javascript, codepen, design
Published: 2022-11-20 20:51:32

**"Codepen" - https://codepen.io/ - is a social development environment - an online code editor for developers of any skill - that allows people to write code in the browser, and see the results of it as they build. Codepen is particularly useful for people learning to code.**

**Code layout for my animation** https://codepen.io/steinarV/pen/qBKPGmK :


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


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


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2thbhl3e7qvsg8vwxl7u.png)

**Visit my blog** https://steinarv.design/blog
First Python project! Snake game 🐍
Published: 2022-11-20 20:42:49


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ntf7n40rhmko8d9sq89.gif)



## The genesis of my snake game.

As I am a beginner on my journey towards learning Python. I thought that creating a snake game would be a perfect way to learn some useful skills and putting to use what I have learned already.

## What makes a great snake game?

That was my first question before even opening the IDE. So while I was pondering about that I remembered my first time playing the game. Then I started to break the game logic into small parts.

I created a list of things that a snake game must have. If you are also a beginner in Python programming I challange you to also try making this fun project. Also, feel free to expand the list with new features.

The perfect snake game should have:

1. A window that opens and a space on the screen for the snake to move on.

2. Snake body that consist of rectangles and that the body is growing when the snake eats the fruit.

3. The logic to move the snake around the screen with arrow keys for example.

4. The rules when the game ends. As in the classic snake game it would be when the snake eats itself or hits the wall/border of the window.

5. The mechanism that makes fruit rectangles appear in random places on the screen.

6. Score that is showing continuously on the screen and is incremented whenever snake eats the fruit.

7. A game over text with the final score.

I think that would be the basics of a snake game. Of course you could always make it more advanced, add some pause option with escape button or make a menu that shows up at first. 

## My version of the snake game

Below you will find a link to my GitHub account with my version of the snake game. It is basic and not sophisticated enough. I will probably add some features in the future but for now I want to go further into learning and make more projects.

[My snake game](https://github.com/Neuxos/snake-game/blob/3ca63397cd8c18a20477441ae2f55ec0a63c2d5a/snake.py)

Please feel free to leave any feedback about the snake game and the code behind it. I would also love to hear from you if you managed to create similar projects it is always fun to see other people approach to the same problem.