teleren/devto huggingface dataset:
My Dev Journey: Week 11
Tags: beginners, codenewbie, javascript, bootcamp
Published: 2021-07-18 12:10:51

This week was the final week of the front-end block of my Northcoders bootcamp, and this week focussed on creating the React front-end for the Express/Postgres back-end I created a few weeks ago.

If you've enjoyed any of my blog series, then maybe consider following me on [GitHub](https://github.com/fearneyork) 😁

## What I've learnt this week

### Applying learning from past two weeks

Because this is the last week of the front end block, we focussed on tying everything we've learnt in the past two weeks together to work with our backend projects, mine being hy-games, an api I created to query for information about board game reviews, and review votes and comments.

### Composition

A key lesson this week was learning to recognise when different parts of our sites use similar functionality, and how we can reuse our code to make less work for ourself in the long run when considering scalability.

For example I needed two separate parts of the site to open and close, and the easiest way is to create a component that open and closed on a button click by setting state. Then by passing other components in as children to the pop-up function, and conditionally render them based on the button click state.

### Custom React Hooks

Creating custom React hooks, was a great way to extract out functionality to a functional component, much that same as creating reusable JSX components, they're great when considering how to cut down on repeating yourself as your site or app grows in scale.

There's been a few time this week where I've found the balance between extracting everything out to functional components, whether thats JSX or hooks, to be quite tricky and is definitely something that is going to take some more time and context to understand their best use-cases.

## Resources I've found useful this week

### Figma

Figma again! Like I said in my last blog post, [Figma](https://www.figma.com/) is a pretty good way to quickly and collaboratively mock up the wireframes for an app and definitely helped us to start planning out what actually needed to be done first, rather than start aimlessly coding.

### React Router

Again like last week, [React Router](https://reactrouter.com/web/guides/quick-start) has also been great for seeing examples of setting up React Apps with Routing.
Daily Developer Jokes - Sunday, Jul 18, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-18 12:00:18

---
title: "Daily Developer Jokes - Sunday, Jul 18, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Jul%2018%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258d992c4e.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How do programming pirates pass method parameters?

___A:___ Varrrrarrrgs.
 -->
Full Stack Ecommerce Website
Tags: react, javascript, node, mongodb
Published: 2021-07-18 10:53:13

1. Frontend is deployed on Netlify
2. Backend is deployed on Heroku
3. Source code is uploaded on GitHub
{% github Aman2221/ECOMMERCE-MERN%}

##if there are any errors, please consider sharing
####Thank You❤️️❤️️
Email Validation in JavaScript

Published: 2021-07-18 10:29:59

Now we are going to explain all about email validation with the using of JavaScript also displaying few example see in the below section. 
Here we are provide a code of function. which is the best example for validation.


function email_funnction() {
			var email = document.emailform.email.value;
			if(email.indexOf('@')<=0){
				document.getElementById('errormsg').innerHTML="Invalid your Email Address";
				return false;
			}     
			if ((email.charAt(email.length-4)!='.') && (email.charAt(email.length-3)!='.')) {
				document.getElementById('errormsg').innerHTML="Invalid your Email Address";
				return false;
			}
		}
This is the function you can check and apply any form for email validation. So if you want more information and example with the html of <a href='https://wlearnsmart.com/email-validation-in-javascript/'>Email Validation in JavaScript</a>
Study log - Intro
Published: 2021-07-18 10:06:39

This is my first post on `dev.to` and my intention here is to start logging whatever I am studying. I hope that by doing that I can: 
* Track my studies with notes;
* Reinforce what I study by writing with my own words what I read and practiced;
* Share some thoughts and maybe get some feedback from the community and learn more from others.

I've already spent some time studying React, modern Javascript, Redux, a bit of WebPack, Flow, and some other things. But at the time of this writing, I want to read all official docs from React.
Although I like to read, study, learn about other stuff, at the moment I will start with React.

PS: This is also part of an experiment to increase commitment with my studies and creating the sense of achievement. It's easy to start studying something and just lose track of where to go, making it difficult to decide when to stop and move to another topic.

If this doesn't work... I plan to just delete this post.
Features of C :) 
Tags: c, beginners, csharp
Published: 2021-07-18 09:25:09

/*
today we will cover some features in C
as c is widely used it must have some of the major features :) like
1. Simple 
c is a simple language which is because of it's structured approach and the rich libraries and Data types
2. Machine Independent or Portable
unlike assembly language c language can be performed on different machines :) and that the main reason of building C language :)
3.Mid-level programming language
as we know c is used to develop the hardware and kernel but altho it is also consider as a mid language because it is used on different machines as any 
high level language is used :) 
4. Structured programming language
it is a spl language as we can break it into steps with the use of functions which make it easier to understand 
5. Rich Library
c gives you a lot's of inbuilt functions which makes development fast.
6. Memory Management
c support the dynamic memory allocation in which we can free the memory by using free()
anytime we want 
7. Speed
c is fast yeah it is because of less inbuilt functions as i have texted above it have inbuilt functions which makes it a rich library languages but 
you can simply say that they are quite less then other High level language 
8. pointers 
c supports pointers well this the the coolest thing i like about c because by pointers we can use c to direct interact  with memory and 
we can use pointers for memory, structure, arrays. well you will you will also fall for pointers if you are learning C
9.  Recursion
it is noting just a function within a functions i will go with a function soon enough and cover this topic :) 
10. Extensible
why it is extensible because c can able to learn new things from it's master means you can teach c new things and have more fun with codes. 
well this is for today Arigato :) see you on next article.

~ Frey 
*/
5 GitHub Projects Essential For Every Beginner Python Developer 
Tags: python, github, githunt, beginners
Published: 2021-07-18 09:22:53

#### Here is a researched and handpicked list of the top python github repos and libraries containing the essentials of learning python, from zero to hero!

...

**5.** A python cheatsheet of python essentials such as: operators, data types, functions and more!
{% github trekhleb/learn-python %}

*************
**4.** A python module perfect for machine learning. If you're going to be looking into machine learning further down the line in your python development journey, keep this library at the back of your head!
{% github scikit-learn/scikit-learn %}

*****************
**3.** A curated list of awesome Python frameworks, libraries, software and resources.
{% github vinta/awesome-python %}

**************
**2.** A 100 day python guide packed with great projects, tutorials, info and more!(will need to be translated to english using google translate since it's written in Chinese)
{% github jackfrued/Python-100-Days %}

**************
**1.** A python repo that implements, explains and demonstrates almost every python algorithm that you would ever need to learn!
{% github TheAlgorithms/Python %}

*************
#### That's it for this compilation!

**************

> Get the hottest programming stuff of the week in your inbox every Friday via my [newsletter](https://codejedi.substack.com/welcome)!


Byeeeee👋
1 min video - Does AI have a Fatal Flaw?
Tags: showdev, machinelearning, tutorial
Published: 2021-07-17 21:21:02

Link to the video: https://youtu.be/hNuhdf-fL_g

This is a submission to Veritasium's Sci-Comm contest. The target audience for this is the general audience and beginners to deep learning, so we tried our best to distill the main points of how neural nets are trained and how this relates to adversarial attacks into 1 minute.

We also made Google Colab notebooks with both an attack [demo](https://colab.research.google.com/drive/1Ue_dspXY4hnWjA7NXsf_5rPHoGU-sy9i?usp=sharing) (using EfficientNet and Goodfellow et al.'s Fast Gradient Sign Method for attacking), and the Manim Community animation [code](https://colab.research.google.com/drive/19uTdUUi-679Gr_Ty3GWc1LDyCHIHDs_C?usp=sharing). Manim is a cool math animation library originally created by 3Blue1Brown. We used it to make some of the animations in this video.

Interestingly, this contest originated from an UCLA physics professor losing a $10k bet to Veritasium, who used this money to create the contest. Every view will help us in the contest!
5 Github Projects Essential For Every Aspiring Javascript Developer
Tags: javascript, beginners, github, githunt
Published: 2021-07-18 09:09:28

#### Here is a researched and handpicked list of the top 5 github projects essential for aspiring javascript developers!

**************
**5.** "Clean-code-javascript". Perhaps less essential for beginners, but definitely packed with great advice for javascript developers further along the line on how to make cleaner, more understandable and better structured code!
{% github ryanmcdermott/clean-code-javascript %}

*************
**4.** "javascript-testing-best-practices" is a github project packed with great advice on javascript testing for frontend, backend and more!
{% github goldbergyoni/javascript-testing-best-practices %}

**************
**3.** "33-js-concepts" is a great github project for beginners that tries to introduce you to 33 concepts every javascript developer should know.
{% github leonardomso/33-js-concepts %}

**************
**2.** "JavaScript Style Guide" is a comprehensive javascript guide perfect for beginners with over 100k stars on github!
{% github airbnb/javascript %}

***************
**1.** "javascript-algorithms" is a github project with 110k+ stars that puts a lot of effort into explaining and implementing algorithms and data structures in javascript, as well as add explanations and links to further readings.
{% github trekhleb/javascript-algorithms %}

**************
If you want more of a hands-on approach to javascript, Here is a course popular among javascript beginners that will give you just that:[The Complete JavaScript Course 2021: From Zero to Expert!] (https://rb.gy/fwefv6)
> NOTE: *I'm not affiliated with this course or udemy in any way.*

**************
#### That's it for this compilation!

Byeeeee👋
Deleting a property from a Javascript Object without Mutation
Tags: objects, coding, javascript, programming
Published: 2021-07-27 15:56:36

---
title: Deleting a property from a Javascript Object without Mutation
published: true
date: 2021-07-18 08:16:50 UTC
tags: objects,coding,javascript,programming
canonical_url: https://isantoshv.medium.com/deleting-a-property-from-a-javascript-object-without-mutation-67b9e2d40b7a
---

![Banner image](https://cdn-images-1.medium.com/max/1024/1*lSbm5so0zwaSZFwh0BlXfg.jpeg)<figcaption>Photo by <a href="https://unsplash.com/@oskaryil?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Oskar Yildiz</a> on <a href="https://unsplash.com/s/photos/javascript?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

Hey everyone 👋🏻,

There are multiple approaches to do the same operation in Javascript. Every approach has its own pro’s and con’s and there is always better way to do a particular operation in Javascript. In this article, let us see how to properly delete a property in Javascript without mutating an object.

### Why Mutating Objects is bad idea?

We end up running into hard-to-debug and completely avoidable issues if we keep mutating objects in Javascript. The object might have correct value somewhere but will be different at other place and we would have no idea what changed what.

So it is highly recommended to perform CRUD operations on Javascript objects without mutating the objects. Take a look at this [post](https://blog.sapegin.me/all/avoid-mutation/) to understand more about why it is recommended to avoid mutating Javascript objects.

### Using `delete` keyword

Consider the below object,

```
const person = {
  firstName: "Tony",
  lastName: "Stark",
  team: "avengers",
  worth: "billions",
};
```

so if you want to delete a key from the person object then one way to do this is

```
delete person.worth; 
console.log(person); 

or

delete person['worth'];
console.log(person);
```

Although delete can be used to delete a property, you end up mutating the object which can cause undetectable bugs later on.

### Alternative approach

A better way to delete a property without mutating is by using spread operator.

```
const {worth, …newPerson} = person;
console.log(newPerson);
```

Instead of mutating the original object, you create a new object and use it instead. If your object is a nested one then you may have to handle accordingly as using spread operator doesn’t perform a deep clone.

### Bonus

Want to delete an object from an Array without mutating the Array?

```
const people = [
{ id: 1, name: 'ninja' },
{ id: 2, name: 'darkknight' },
{ id: 3, name: 'dexter' }
...
];

const updatedPeople = people.filter(person => person.id !== 2);
console.log(updatedPeople); 
// [
// { id: 1, name: 'ninja' },
// { id: 3, name: 'dexter' }
// ...
// ];
```

The updatedPeoplewill no longer have the person object with id 2.

Are there any other alternative and better approaches that you follow in your code? Share it with me in the comments.
Populate env vars from .env file with Shell
Published: 2021-07-18 08:05:37

This should work

```sh
export $(cat .env | xargs)
```

But not all time namely if it includes some comments and you are running it with sh (not bash)

Then, mitigate this issue by using instead:

```sh
export $(cat .env | sed 's@#.*@@'| tr -d '' | xargs)
```
How to create a password generator using react
Tags: html, css, javascript, react
Published: 2021-07-18 07:17:05

![React_SS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0r7kqjnlrg81mbovjfu.png)
 
Link : https://password-generator5.netlify.app/

{% github Aman2221/React-Password-Generator %}
Bootstrap 5 Responsive Pricing Card
Tags: bootstrap, css, html, webdev
Published: 2021-07-18 07:50:36

Pricing Card is used on the website to show product price with some features. So here we made Responsive Pricing Card in Bootstrap 5 with CSS3.

In this element, we used bootstrap 5 cards with buttons and also used HTML ul, li tags. To make it more attractive on the hover side we used box-shaodws. To make it responsive and mobile-friendly we used bootstrap 4 card’s grid classes.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/bootstrap-5-responsive-pricing-card/)
I made a basic search-bar using JS
Tags: javascript, webdev, showdev, beginners
Published: 2021-07-18 06:38:16

I created a basic search bar using JS and here is how it looks.
So, whenever a `keyup` occurs inside the search box, our function searches for the item in our list.

**Things you should know**
- Basic JS
- onKeyUp 
- forEach method
- DOM Manipulation

You can see the [live demo here](https://amdhanwate.github.io/search-bar-using-js/)

### The Code
{% codepen https://codepen.io/amdhanwate/pen/XWRRvgm default-tab=js,result %}

### Github Repo
Feel free to fork or clone the repo.

{% github amdhanwate/https://github.com/amdhanwate/search-bar-using-js no-readme %}

#### Thank you!
How to make Angular CLI built app work from a subfolder
Tags: angular
Published: 2021-07-18 06:17:25

Angular CLI, along with many boilerplate generating tools for other frameworks, insists on outputting the built code in a way that will work only on the top-level domain. I can't understand the reason for this, and definitively is not working well with quick&drity example apps you would like to show anywhere easily.

In this article, I'll show you how to make angular build code in a way that you can just drop on any level of subfolders & it will work.

# The problem

After generating your application with:
```sh
$ npx -p @angular/cli ng new my-app
```

when you build your app with:
```sh
$ npm run build
```

you will get the `dist/my-app/index.html` file with:
```
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.31d6cfe0d16ae931b73c.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.97e25c2126edd0d76e43.js" defer></script><script src="polyfills.cb52f48ffd1aee6e8d09.js" defer></script><script src="main.f5cfb581cea2faefeeff.js" defer></script>

</body></html>
```

Although `src="runtime...` looks OK, and it seems it should be working in the browser, when we visit `localhost/my-app/dist/my-app`, we see nothing else but a white screen.  That's because there is:
```html
  <base href="/">
```

Which sets the context for all location references to the absolute location on our current domain. If you change it manually to `<base href="./">`, all should work fine - now the only thing is to set it in a way that will not require manual tweaks after every build.

# The solution
There are 2 possible solutions - use the CLI parameter, or set the value in the `angular.json` file.

## CLI parameter
`angular build` accepts `--base-href` param that allows us to override this value. Adding it manually every time would be a lot of a hassle, so the best to set it in the `package.json`:

```JSON
{
  ...
  "scripts": {
    ...
    "build": "ng build --base-href='./'",
    ...
  }
  ...
```

Then, whenever we run `npm run build`, the value is set correctly.

## Angulars json configuration
If the CLI param feels a bit hacky to you, you can set the value in the `angular.json` config:
```JSON
{
  ...
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "baseHref": "./"
            }
  ...
```

I cannot find it in the official documentation, but it's working & it's recognized by `angular.json` validation.

# Summary
In this article, we have seen how to set up Angular CLI generate app to work from a subfolder. With one or the other solution in place, your built app should look like:

![Screenshot 2021-07-18 at 08-11-15 MyApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32g6ahoyali23id2bllo.png)
LINE UIT: How to Start and Continue Mob Programming
Tags: webdev, programming, productivity
Published: 2021-07-18 05:50:00

The audio in Japanese
[ep.91 『今さら聞けないモブプログラミングのはじめかた・続けかた』 | UIT INSIDE - LINE UIT の開発者による「最新のフロントエンド」をキャッチアップできる Podcast](https://uit-inside.linecorp.com/episode/91?utm_source=pocket_mylist)

## Note

Mob programming at Line News

- Mob review ⇒ Mob programming ⇒ Mob work
- 3 - 10 people
- Slackで呼びかけ
- 2 hours once a week
- It's been for three years.

Mob programming

- Driver and Navigator
- 10 - 15min take turns
- Driverは手を動かすだけ

Why started Mob programming

- Started with Mob review
- To know the reason of the decision making ⇒ It was efficient to do it together

What is done in Mob work

- Study sessions (almost mob programming)
- 問題はみんなで解決するという流れができてきた
- 始めたばかりはMobの為のMobだった ⇒ 仕事の進め方の選択肢としてMobが定着した

何がよかったか

- 解決方法の選択肢が増えた

難しかったこと

- 型通りのMobは遂行が難しかった
- 課題のなかった通常フローにモブを定着させるのは難しかった
- 個人で取り組むのと比べて効率を常に疑問視してしまう

Learning from Mob programming

- iterationがスムーズになっていることが大事
- 稼働率よりもデリバリーにどんな影響があるかに意識する
- 常に100点の取り組みを継続するのではなく、悪くなかったら継続してみると良い
- 型通りのMobを試して、essenseを残しつつルールを少しルーズにしてみるのも良い
- 振り返りをする

The right number for Mob programming

- 3 - 5 people
- Depends on the topic

The good timing to introduce Mob programming

- When team size changes, 2 ⇒ 3 members
- プロセスも共有したい機能はMob programming
- 環境構築(Environment creation)
- 頭の数と手の数が必要な件
- Investigation Issues/Bugs


## Take aways

I want to introduce, suggest followings in the team
- Mob Environment setting
- Mob bug investigation
- Implementation that the process is better to be shared within the team
Scared of Editing YAMLs during CKAD
Tags: kubernetes, yaml, ckad
Published: 2021-07-18 05:43:13

Hi All, I am going to be writing CKAD within 2 weeks from now. I am freaked out about editing YAMLs. In all the practice tests, I know what to do, but when I have to edit any YAML configs, I get tons of errors and freak out totally. I tried nano editor but I don't get the hang of it. I have been using vi for 5 years now but editing YAML and applying changes in KATAKODA single cluster always gives me goosebumps. Please tell me if CKAD environment is better!! Crossing my fingers a big time.
Fire-Side Chat with Kent C. Dodds – React Summit Remote Edition 2021 - YouTube
Tags: react, testing, typescript
Published: 2021-07-18 04:58:10

Fire-Side Chat with Kent C. Dodds – React Summit Remote Edition 2021 - YouTube: {% youtube sKD16YV7PdM %}

## Notes

Migrating to TypeScript, Pain points

- Start with loose TypeScript rules
- Iteratively and over time, rather than one giant PR

Should we use Next.js rather than create-react-app?

- Excited about Remix
- Next.js is pretty solid

Testing library

- Usually don't test lower level of components that doesn't have much logic
- More focus on integration test and e2e test
- Doesn't worth aiming for 100% testing coverage
- Code coverage < Use-case coverage

Career advise for beginners

- Be a nice person
- Communication

RTL(React testing library)

- [RTL Everywhere](https://jgcmarins.github.io/rtl-everywhere/#0)
- Testing code is just an another code

Integration test in general

- rarely use snapshots as it contains many irrelevant information
- "I don't write tests, I write proofs"

Communication advise

- Sharing everything that I do

Functional Component vs Class Component

- 64%: 100% functional component

Linter on your test

- Yes, recommend that
- Writing in TypeScript as well

## Take aways

- I need to (want to) learn TypeScript
- I need to (want to) learn Testing