teleren/devto huggingface dataset:
CSS Draw - Mario's Blue Shell
Tags: codepen, css, spanish
Published: 2021-08-27 06:21:06

Esta vez tocó dibujar el Blue Shell de Mario por propuesta de @nelsoncode en el post anterior.

No me extenderé mucho con la explicación, este dibujo si me hizo pensar y planear cómo iba a obtener un buen resultado sin utilizar vectores (svg).

> Destaco que es mi segundo intento dibujando con CSS, [el primero](https://dev.to/betocabadev/primer-intento-dibujando-con-css-mario-s-mushroom-powerup-323e) salió bastante bien.

Comencé por hacer las figuras básicas y cuando llegué a los detalles me decidí por armar la textura del caparazón con un `clip-path` y el borde con dos elementos que la verdad me sorprendieron en su figura final.

Espero que puedan explorar un poco el código CSS y están invitados a intentarlo, mismas reglas 😉 mucha suerte y gracias por leerme.

{% codepen https://codepen.io/betocabadev/pen/VwbJYdy %}
ES6: Arrow function in JavaScript | How this works in Arrow Functions
Tags: javascript, functional, beginners, tutorial
Published: 2021-08-27 06:16:44


One must know about how to write and how Arrow functions works.

Its is very important to know arrow functions before you jumping to work on any JavaScript Framework like Angular or Libray like Angular or React.

I have explained below topics in video with clear examples.
* What is Arrow function ?
* How to define arrow function with different examples
* How this keyword works in Arrow function vs normal function and more………

{% youtube 3hdW81f9vOg %}
CSS Box Model
Tags: css, html, beginners
Published: 2021-08-26 12:45:55

All the components depicted in a web page consists of boxes. So, basically all the html elements can be considered as boxes.
In CSS, box model is used for the design and layout of the html elements ,also how each of them are arranged together to form an overall layout.

###What is CSS Box Model?
The CSS Box Model is a box that wraps around every html element. It has four layers: margin, border, padding, content.


![css box model](https://sabe.io/classes/css/css-box-model-padding-border-margin/css-box-model.png)

###What does it comprise of?
* Content: It is the innermost area which consists of content like text, image or other media, which can be sized using height and width properties.

* Padding: This area wraps around the content as an additional layer. Its dimensions can be given using padding properties.

* Border: This is the area around the padding. It wraps the content as well as padding. It can be sized using border properties.

* Margin: It is the outermost layer, which wraps around every other layer. It is a white space between the box and other elements. It can be adjusted using margin properties.
![example](https://i.postimg.cc/yNFMqLLL/image3.png)

***
When we set height and width properties of any element using CSS, it is merely applied to the content area. 
So, to know the actual dimensions of the element we 
need to consider padding and border also.

Total width of an element is calculated as :
######Total Width = ( width + left padding + right padding + left border + right border)

Total height of an element is calculated as:
######Total Height = (height + top padding + bottom padding + top border + bottom border)
***
###The Box-sizing Property

This property defines how the margin, padding and borders are added around the box.

![box model property](https://i.postimg.cc/s2N8BkqT/image4.png)

* Content-Box: It is considered as the default value. It adds the padding, margin and the border outside the box. This means when we specify a width and height to any element, the padding and border are applied over it , so it seems larger.



![example](https://i.postimg.cc/260S4jNR/image1.png)

* Border-Box: It adds the margin, padding, and border inside the box. As a result the padding and border are included inside the height and width of an element, ensuring all the elements are sized in an easy manner.
Issue in Maui project not showing Android Emaulator (Visual studio 2022)
Tags: xamarinforms, mobile, android
Published: 2021-08-27 05:56:27

Hi
I have created a MAUI project in VS 2022 preview, which is working fine initially with emulator, but now Emulator is not showing. When I create Xamarin project Emulator is showing and application is running on that Emulator.

Please help me to resolve this issue as it occurs developing application

What I have tried:

1. I had delete/renamed
Copy Code
C:\Users\username\AppData\Local\Xamarin
C:\Users\username\AppData\Local\Microsoft\VisualStudio\17.0_e17a11fb\ComponentModelCache


2. I had repair VS 2022 preview
3. I had reinstall MAUI
Edabit challenge 4 | strings | very easy | Miserable Parody of a Calculator
Tags: challenge, webdev, codenewbie, javascript
Published: 2021-08-27 05:53:56

Create a function that will handle simple math expressions. The input is an expression in the form of a string.

Examples
calculator("23+4") ➞ 27

calculator("45-15") ➞ 30

calculator("13+2-5*2") ➞ 5

calculator("49/7*2-3") ➞ 11

```javascript
function calculator(exp) {
return eval(exp);
}

console.log(calculator("23+4"));
console.log(calculator("45-15"));
console.log(calculator("13+2-5*2"));
console.log(calculator("49/7*2-3"));
```
Edabit challenge 3 | strings very easy | Boolean to String Conversion
Tags: challenge, codenewbie, javascript, discuss
Published: 2021-08-27 05:47:46

Create a function that takes a boolean variable flag and returns it as a string.

Examples
boolToString(true) ➞ "true"

boolToString(false) ➞ "false"

```javascript
function tipOne(val) {
return val + '';
}

function tipTwo(val) {
return val.toString();
}

function tipThree(val) {
return String(val);
}

//you can also write using arrow functions

console.log(tipOne());
console.log(tipTwo());
console.log(tipThree());

```
Why is Code & Problem Solving difficult to understand – And How to Make it Easier
Tags: codenewbie, programming, computerscience, javascript
Published: 2021-08-27 05:20:31

**Are you struggling to learn to code and problems solving?** If you are, I want to help. So I have collected some tips from my personal experience to guide you so that you won't struggle unnecessarily again.‌‌

# Use creativity, imagination, and code!
**The most important thing is to understand what you are trying to build, and how to tell if you are taking steps in the right direction.**

My advice on this is to use your imagination! Find a way to picture a system in your head. Picturing code as people **(call them: “actors”)** is a great way to do this. Imagine the people only behave how you tell them to. In code, an actor is usually most easily represented as a class instance. What does that person need to know to perform their duties? This tells you what properties the class would need.

**How might they get confused?** This tells you what edge cases to consider. If they need to ask for help what information would they need to provide to receive good help? This will be useful when designing error handling.

# How might they become overwhelmed? Can they delegate or share their work efficiently?
As an example of how this might work imagine a queue of people. No person will know who everyone in the queue is, but each will know who the person in front of them is, and each person has a separate business to accomplish. Now you know the two properties a queue node needs the next node, and data. This is enough to start writing some code, and you can build from there.

This model might even help make it clear when a Queue would be useful in your code: just imagine the conditions under which people might need to wait or form a line.

Code written by someone who can picture how their code should work should ultimately be better code, even if many mistakes are made along the way.

# Conclusion‌‌

**Struggling** is a good thing when it's productive. It makes you a better person or a better software developer. But don’t get me wrong – I am not telling you to struggle unnecessarily. ‌‌

**No software developer** is free from struggle when they code. But it is worse to struggle unnecessarily by learning with the wrong resources, or not asking for help from a mentor or someone who can help you whenever you are stuck.

**Now, go get things done.**
Regular vs Non-Breaking Spaces  
Tags: javascript, tdd, gotchya
Published: 2021-08-26 11:17:45

---
title: Regular vs Non-Breaking Spaces \u00a0
description: How ASCII 160 bites
published: true
tags: javascript, tdd, gotchya
canonical_url: https://www.thiago.codes/blog/regular-vs-non-breaking-spaces
---

Today at work I came across a failing test that made me wonder if the previous
developer had just given up and left it fail. The failing test looked to be comparing
two identical strings but failing at the spaces.

To replicate this issue, you can fire up the [NodeJS
REPL](https://nodejs.dev/learn/how-to-use-the-nodejs-repl) and follow along.

NOTE: Each `>` is a command to be executed in the REPL.

I've highlighted parts to take note of.


```shell{6,13,27-28}
➜  ~ node
Welcome to Node.js v16.7.0.
Type ".help" for more information.
> const assert = require('assert')
undefined
> const nonBreakingSpace = '\u00a0'
undefined
> const space = ' '
undefined
> assert.strictEqual(nonBreakingSpace, space);
Uncaught AssertionError [ERR_ASSERTION]: Expected values to be strictly equal:

' ' !== ' '

    at REPL4:1:8
    at Script.runInThisContext (node:vm:129:12)
    at REPLServer.defaultEval (node:repl:562:29)
    at bound (node:domain:421:15)
    at REPLServer.runBound [as eval] (node:domain:432:12)
    at REPLServer.onLine (node:repl:889:10)
    at REPLServer.emit (node:events:406:35)
    at REPLServer.emit (node:domain:475:12)
    at REPLServer.Interface._onLine (node:readline:487:10)
    at REPLServer.Interface._line (node:readline:864:8) {
  generatedMessage: true,
  code: 'ERR_ASSERTION',
  actual: ' ',
  expected: ' ',
  operator: 'strictEqual'
}
```

> In HTML, `&nbsp;`'s are used to prevent two words from breaking or wrapping
at the end of a line.

Looking at the log above, it is not immediately obvious what is going on. This
is even less obvious when the spaces exist in a sentence, or when the text
exists in html as something like:

```html
<span>This&nbsp;will&nbsp;bite!</span>
```

When this is rendered by a React testing library, the `&nbsp;` will appear
identical to a normal space when rendered.

I had a suspicion it was an issue with ASCII characters only because I remember
an [old
prank](https://stackoverflow.com/questions/26965331/javascript-prank-joke#26965332)
regarding replacing semicolons `;` with the Greek question mark `;`.

I fixed the breaking test by entering the actual ASCII code instead of the
copy-pasted space.

For example:

```js
assert.strictEqual(expected, "Don't\u00a0break\u00a0me")
```
How to Add Resources in the Flutter Event Calendar
Tags: flutter, webdev, dart, mobile
Published: 2021-08-27 04:57:08

Learn how to group the appointments based on the available resources in Syncfusion [Flutter Event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) widget. This video explains how to add resource-based appointments and special regions to the Flutter Calendar.

Flutter Calendar Widget - Flexible Event Scheduler

- Visualize vivid appointments in different views including day, week, month, schedule, and timeline.
- Schedule recurring events and appointments in different time zones.
- Style calendar elements easily.
- Exclude nonworking days and nonworking hours to have a more focused view of your schedule.

{% youtube nXNX-6leMvo %}
Empleos en Data y Analytics LATAM — Agosto 2021 - II
Published: 2021-08-27 04:52:41

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻

✅ [Data Engineer - Intuitive (México)](https://www.linkedin.com/jobs/view/2673564186/?alternateChannel=search&refId=FkWLpZlozVq69QSSGJtq2w%3D%3D&trackingId=LqtXcp4mErT3s9%2FU53%2BhlQ%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - Microsoft (Costa Rica)](https://www.linkedin.com/jobs/view/2657310867/?alternateChannel=search&refId=FkWLpZlozVq69QSSGJtq2w%3D%3D&trackingId=as67MhgG12JICxl%2FIgQ0rA%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - Cuida Co. (Perú)](https://www.linkedin.com/jobs/view/2687528793/?alternateChannel=search&refId=FkWLpZlozVq69QSSGJtq2w%3D%3D&trackingId=xA8d1HHgsUD%2FrGuqisDMpw%3D%3D&trk=d_flagship3_search_srp_jobs)
✅ [Data Engineer - Deloitte (Chile)](https://www.linkedin.com/jobs/view/2654974964/?alternateChannel=search&refId=UCcQnCuc172HGNtNBFnr4A%3D%3D&trackingId=DoOa22BQStSgl64gJHj%2BzA%3D%3D&trk=d_flagship3_search_srp_jobs)

Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
Should configuration be avoided?
Published: 2021-08-27 04:42:46

---
title: Should configuration be avoided?
published: true
---

I’ve never met a developer who enjoys “configuring” anything. Is there something fundamentally wrong with the whole idea of “configuration”? Is it a “code smell”?

Most configuration I’ve ever worked with violates basic principles of clean code and good software design – non-existent or shallow modularisation, mixture of concerns, poor naming, deep nesting, duplication, over-specification, etc. etc. No wonder it’s painful to work with!

Whenever we think we need configuration, should we instead pause and think about redesigning so that we don’t need configuration?
Bank Account Verification Programatically
Published: 2021-08-27 04:21:38

If you want to verify a bank account programatically from the backend by just taking name, account number and IFSC from the frontend. Cashfree has a product for doing that. [Bank Account Verification](https://www.cashfree.com/bank-account-verification)

## Need to verify users bank account ?

The problem I have to solve in my BisKit project is very simple. I've to do payouts to users for which I need to verify their accounts for successful payouts. There could be a chance that user might have given wrong/invalid credentials. 

### My journey: 

* Create an account with cashfree.
* Switch to test environment.
* Click on Verification Suite. Where you can try Bank Account Verification provided by cashfree. But in test environment it gives correct response to only specific bank accounts. [Test Bank Accounts](https://docs.cashfree.com/docs/sample-responses-from-bank#status---success-1)
![Bank Account Verification Success Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dyqmj3ozgge1saro321.png)
* Check the [API docs] (https://docs.cashfree.com/reference#postman-collection-2)
before moving on to SDK. Yeah, cashfree has [SDK] (https://www.npmjs.com/package/cashfree-sdk) 
* Cashfree made developers life simple by providing [Bank Validation Integration Kit for Node](https://github.com/cashfree/cashfree-bank-validation-node)
* Finally, from the verification suite you need to generate API Keys and whitelist IP address in Access Control. To use them in the code.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 32
Tags: php, javascript, webdev, tutorial
Published: 2021-08-27 04:18:38

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be designing the category page

{% youtube mQimE2PQeHw %}


If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Technologies for recognising GitHub Repo contributions
Tags: help
Published: 2021-08-27 04:05:41

Hello guys,

I am aware of all-contributors bot that helps with adding new contributors to a OSS project on GitHub, but it does not seems to be able to automatically add all contributors(those who previously contributed, before the point of using all-contributors), perhaps with some sensible defaults.

I am wondering if there are any alternative tools out there that you are using to recognise contributors in your GitHub Repo?

Would love to learn more about that:)
Why Data Lake is a Good Option for Archival of Legacy Data?
Published: 2021-08-27 03:54:40

{% youtube BGcShSvRwCk %}

Legacy applications have a huge amount of data stored which is difficult to archive and segregate as the data is voluminous and unstructured. This thoughtcast gives you an overview of why a data lake is a good option for the archival of legacy data.

Know more about our Data Lake solutions - https://bit.ly/2K5Wq8L

Do you really need a data lake? Know 4 best practices to build a data lake - https://bit.ly/39oIRK2
Breadth vs depth in the job search
Tags: career, productivity
Published: 2021-08-27 03:52:49

Breadth vs Depth when getting a job in the first 3 years of your career....

It's really important to be good at something. In the beginning I tried learning everything..which was nice and all and gave me a good wholistic picture. But if you NEED to get a job ASAP, it was the opposite thing to do.

I had spent a bunch of time, kind of playing around in rails, kind of playing around with frontend, kind of playing around with database stuff, learning algorithms. Didnt know how they all fit together but i was going to interviews and getting my a$$ handed to me. 

It took me a while to figure this out. I needed to focus on one thing. That was frontend development.

Why?

You have very limited shot at impressing these people. You need to KNOW you shite.

If you dont have professional experience, youre already at a disadvantage. 

So...you need to give them a reason to hire you....crush that interview.

Short story long....in the beginning of your career, focus focus focus on ONE thing. Sure sprinkle in some other stuff here and there to grow, but until you're sure you can get a job in a short amount of time doing your craft. Keep getting better at the one thing.

**Want more? Come join our Facebook group to help you get your first job as a software engineer, career development, and so much more!**

https://www.facebook.com/groups/310120400851953
Tree Traversal in Python
Tags: tree, traversal, python
Published: 2021-08-27 03:48:28

Let's say we have the following tree:

```
tree = {
    5: [3, 7],
    3: [2, 1],
    7: [8],
    2: [],
    1: [],
    8: []
}
```

There are two ways to traverse this tree 
-> Breadth First Search (BFS)
-> Depth First Search (DFS)

BFS can be imagined as horizontal neighbours and DFS can be imagined as vertical neighbours.

Implementation of BFS:

```
def bfs(tree, node, path=[]):
    queue = [node]
    while queue:
        node = queue.pop(0)
        if node not in queue:
            path.append(node)
            for neighbour in tree[node]:
                queue.append(neighbour)
    return path
```
Output:
```
>>> bfs(tree, 5)
    [5, 3, 7, 2, 1, 8]
```

Implementation of DFS:

```
def dfs(tree, node, path=[]):
    queue = set()
    if node not in queue:
        queue.add(node)
        path.append(node)
        for neighbour in tree[node]:
            path = dfs(tree, neighbour)
    return path
```
Output:
```
>>> dfs(tree, 5)
    [5, 3, 2, 1, 7, 8]
```
August 26th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-08-27 03:15:56

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-5g7c %}

<center>

![Little kid making a fist as if to say "Yes!"](https://media.giphy.com/media/6brH8dM3zeMyA/giphy.gif)
</center>

Photo by <a href="https://unsplash.com/@qmikola?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Mikołaj</a> on <a href="https://unsplash.com/s/photos/book?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Updates on dev-to clone in Angular - August 27
Tags: angular, webdev, showdev, typescript
Published: 2021-08-27 02:47:38

##### Help me improve these updates by giving suggestions.

Github Repo - https://github.com/ajitsinghkaler/devto-clone

Deployed on Firebase - https://dev-toclone.firebaseapp.com/

Last week we finished details page article section and basic comments section.
![Articles details page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dn6lr72hv93pbss99ieq.png)

This week I added the complete comments section. It was one the most complex tasks while building the dev.to ui. The comments structure is a bit complex to render. Comments contain a key called children which can again contain comments so it was like a tree like structure.

```
├── comment
│   ├── comment ─── comment
│   │   └── comment
│   ├── comment
│   ├── comment ─── comment ─── comment
│   │   └── comment ─── comment ─── comment
│   └── comment
├── comments
│   ├── comment ─── comment
│   │   └── comment 
│   └── comment 
├──── comment
│   ├── comment
│   └── comment
└──── comments
```

How to render an infinite tree. Then I called the comment component from the comment component. To create a recursion like scenario which will render the entire component tree. I've written details about it in this [article](https://ajitblogs.com/problems-faced-while-creating-comments-section-with-a-tree-like-data-structure/).

[Vimal Patel](https://twitter.com/patel_vimal) has also added 
commit lint to the repo so that reading the commit messages is easy. I'm thankful for that.

## First Live stream

I also did my first live stream with [Santosh](https://twitter.com/SantoshYadavDev) on moving over our app from angular-cli to NxDevTools we did the basics in the stream and I went over a lot of questions that I have to why Nx if you want to see how to move your project over Nx please follow us on [This is tech Talks](https://www.youtube.com/channel/UCwLr8EHk7A-A89tRqoHSdZw)
 we will be migrating the whole dev.to clone to Nx over the live stream. This was my first talk I was a bit nervous but Santosh made me at ease. Thanks Santosh.

So this is where we are right now.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10ylwi1auxrz2qdaiwzd.png)

Next week I'll start working on the podcast page.

## Issue

1. [Create a 404 page](https://github.com/ajitsinghkaler/devto-clone/issues/30)

1. [Comments section css is a bit off](https://github.com/ajitsinghkaler/devto-clone/issues/32)

1. [Add number of child comments in comments section](https://github.com/ajitsinghkaler/devto-clone/issues/33)

## Commits

1. [Commit lint](https://github.com/ajitsinghkaler/devto-clone/commit/0624aa97da384de25cb3f20902e511b2899e60fa)

1. [Basic comments](https://github.com/ajitsinghkaler/devto-clone/commit/9d05fd85b369aea6c92f68ad9407f78152aa0f08)

1. [Comments section completed](https://github.com/ajitsinghkaler/devto-clone/commit/d2a317f15409e5ef13b7fb995cdadb336420ad82)
Getting Started With Material-UI
Tags: materialui, javascript, codenewbie, react
Published: 2021-08-28 21:01:15

---
title: Getting Started With Material-UI
published: true
date: 2021-08-27 02:47:34 UTC
tags: materialui,javascript,codenewbie,react
canonical_url: https://javascript.plainenglish.io/getting-started-with-material-ui-43cc81d93ab6
---

[![](https://cdn-images-1.medium.com/max/1116/1*FxMGr1qV-GuEc2ICqgRTZA.png)](https://javascript.plainenglish.io/getting-started-with-material-ui-43cc81d93ab6)

How to implement responsive React Components using this React Framework

[Continue reading on JavaScript In Plain English, an Official Partner Publication on Medium »](https://javascript.plainenglish.io/getting-started-with-material-ui-43cc81d93ab6)