teleren/devto huggingface dataset:
Week 7 homework
Published: 2023-02-27 01:28:52

## Homework
- Write a follow up response on dev.to from the perspective of a new developer in the field
  - What is confusing about platforms?
      - It is confusing that they all work differently but also have common similarities. Example: they start off basic but each may use a different language for their platform. It may be easy to understand one (with some time) but the second I try to look at another, I can confuse what I have learned from one to the other.
  - How could web components and VanillaJS standards be taught in a way that is more approachable?
     - I think projects like "making a card" help basic users learn the fundamentals. Yes, I was very confused at first but with time I became more comfortable with what I was coding and looking at. I think very basic projects (that push you but do not discourage you) can encourage a love for developing. 
  - What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)
     - I found working within css and html the easiest as a new developer. The way it was formatted made sense to me and I liked how straight forward it is. I never was guessing what something was doing once I got the basics down. I had prior coding knowledge with JS but it was just not strong enough to help me in this class. 
  - Think back on the tooling. What parts were confusing? What clicked with you immediately?
     - I assume tooling is working within css and html. I find the layout pretty self explanatory. The class and heading structure was pretty basic and did not take much to be easy to do on my own. Having to put a period in front of class names in css took a bit to get used to but was easy to do after a few times. The JS is always confusing to me no matter how much practice I have with it.
  - What additional readings did you have to do in order to make sense of things.
      - I typically would have to look up how to do something the first time and then after that I could do it on my own. For example: working within markdown was something I did not have any prior experience with before this class. I got the hang of it pretty quickly since it was pretty basic. I did have to google how to use it the first few times.
How to create truly const object in JavaScript?
Tags: javascript, typescript, node, webdev
Published: 2023-02-27 01:26:03

We create an object `person` with name Harry and try to reassign it to an object with name Ron.

```js
const person = {
  name: 'Harry'
}

// Uncaught TypeError: Assignment to constant variable.
person = {
  name: 'Ron'
}
```
We can't do it and get an error because we use const statement.

But what if we change the property directly of this object?
 Although we use const, we can do it, so we don't get a truly constant object.

```js
const person = {
  name: 'Harry'
}

person.name = 'Ron'

console.log(person) // { name: 'Ron }
```
But good news, I will show you how to fix it.

We just need to wrap object by 'Object.freeze' from JavaScript standard library.

```js
const person = Object.freeze({
  name: 'Harry'
})

person.name = 'Ron'

console.log(person) // { name: 'Harry' }
```
Now we can't change property of this object. Also, it's good to know that in JavaScript strict mode we get an error if we try to change a frozen object.

```js
'use strict'

const person = Object.freeze({
  name: 'Harry'
})

// Uncaught TypeError: Cannot assign to read only property
person.name = 'Ron'
```

## Deep objects

But what if we have an object with nested structured?

```js
const person = Object.freeze({ 
  city: { name: 'London' } 
})

person.city.name = 'New York'

console.log(person) // { city: { name: 'New York' } }

```

Again we have the same problem. Object.freeze works only for first level properties, not affecting to deeper levels. Good news, that it's easy to fix. We just need to create function which recursively freeze all levels object.

```js
function deepFreeze(obj) {
  Object.freeze(obj);
  Object.getOwnPropertyNames(obj).forEach((prop) => {
    const value = obj[prop];
    if (
      typeof value === 'object' && 
      value !== null && 
      !Object.isFrozen(value)
    ) {
      deepFreeze(value);
    }
  });
  return obj;
}

const person = Object.freeze({ 
  city: { name: 'London' } 
})

// Uncaught TypeError: Cannot assign to read only property
person.city.name = 'New York'
```

Now you can be sure that you create truly const objects.

**P.S.** I attached also version for TypeScript.

```ts
type DeepReadonly<T> = {
    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

function deepFreeze<T>(obj: T): DeepReadonly<T> {
    Object.freeze(obj);
    Object.getOwnPropertyNames(obj).forEach(prop => {
        const value = obj[prop];
        if (typeof value === 'object' && value !== null && !Object.isFrozen(value)) {
            deepFreeze(value);
        }
    });
    return obj as DeepReadonly<T>;
}
```

Subscribe to know more tips about JavaScript and TypeScript.
Week 7 HW
Published: 2023-02-27 01:02:36

1) What is confusing about platforms?

- They create value and generate competitive advantage this causes many people to decide to rewrite to faster platforms to keep their edge agents opponents. This causes confusion when teams have to switch from one platform to another without bringing in team members who are more proficient in the new platform. 

2) How could web components and VanillaJS standards be taught in a way that is more approachable?

- JS could be taught so based more on building blocks sight like stack overflow allows new programmers to grab code snippets and apply them to their products. The down side is stack overflow code is uselessly is connected with the users project if there was a sight that you could see templates for different components and JS someone fresh could build and implement their own variables and elements faster then reverse engineering projects on stack overflow. 

3) What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)

- Vue was the simplest platform to work with the easy read-ability allowed for ez implication of or own cards. Also there are a-lot of videos and forms on Vue and how to start using Vue. 

4) Think back on the tooling. What parts were confusing? What clicked with you immediately?

- I liked using codePen to start out with web development. It was handy to see the html, css, and js separated into 3 different sections. It also allowed for small errors and easy testing because the web page was displayed and showed in real time. VS code is good for exploring how real web developers work but with all the cloning and terminal commands liken npm it would have been very difficult to focuses on learning html, css, and js.  

5) What additional readings did you have to do in order to make sense of things.

- Platforms vs products: https://bootcamp.uxdesign.cc/platforms-are-not-products-fbf457db24d0

- More about platforms:
https://ccecosystems.news/en/platform-confusion-a-spotlight-on-the-concept-of-platforms-and-their-classification-in-the-context-of-business-ecosystems/
Resolvendo problemas no HackerRank: Página por página
Tags: javascript, beginners, programming
Published: 2023-02-27 00:59:17

Olá, seja bem vindo a mais uma etapa do Resolvendo problemas no Hacker-Rank,nessa sessão iremos fazer um algoritmo de leitura de páginas de um livro. Vejamos como separar isso.

**Drawing Book -**

Esse problema é mais simples de se compreender. Vamos movimentar as páginas baseadas na página escolhida de um livro. Começando a virar as páginas pela frente ou pelo verso do livro. Eles sempre viram uma página de cada vez. Quando abrem o livro, a página está sempre do lado direito:

- int n: o número de páginas no livro
- int p: página a chegar

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

Usando o diagrama acima, se o aluno quiser chegar à página 3 ,ele abre o livro na página 1, vira a página e está na página correta. Se eles abrirem o livro na última página, página 5 , eles viram a página e estão na página correta. Retornando 1 .


Vejamos a solução deste caso:

```
function pageCount(n, p) {
  // Write your code here;
  //n=6;p=2 /// pages(3),numberPage(1)
  const pages = Math.floor(n/2); 
  const numberPage = Math.floor(p/2)
    
    //1-0 < 3-1, return 1; else 3-1=2
  if(numberPage-0 < pages - numberPage) return numberPage
  else return pages - numberPage
}
```

Nesse código criamos uma forma de encontrar a página correta não importando de que lado o livro foi aberto. Ele se inicia criando uma função que guarda os valores de n(número de páginas) e p(página exata) como valores de parâmetro.

É criado uma const chamada `pages` que irá pegar o maior número inteiro menor ou igual ao número proposto. Mas nesse caso ainda será divido sobre 2. Assim também será com `numberPage`. Com isso se cria um if onde se o valor da página exata divido por 2 for menor que o número total de páginas divido por 2, prevalecerá o valor o maior número inteiro menor ou igual ao número da página exata. Caso contrário será retornado o valor do total de páginas divido por 2 - a pagina exata divida por 2.

O resultado será:

```
6 //n
2 //p

input = 1
```

Com isso concluímos mais um episódio, e nos vemos na próxima!!!
new developer perspective
Published: 2023-02-27 00:55:26


- What is confusing about platforms?
It was difficult to understand how each of the platforms use a different language and have a different package structure. Finding resources weren't difficult but you had to be pretty specific with your search keywords or you'd get the wrong information.

- How could web components and VanillaJS standards be taught in a way that is more approachable?
Personally, I've only ever learned Java so understanding the differences in use between JS and Java was a little tricky. Also, I couldn't really get a good visualization of how these things would look beforehand, so I wasn't sure what I was working towards. 

- What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)
Creating applications with open-wc was simple compared to the other frameworks. It mirrored Vercel's structure much better than the other frameworks (React, Vue, Angular). 

-Think back on the tooling. What parts were confusing? What clicked with you immediately?
I was absolutely stuck on syncing my GitHub repo with the frameworks. It was also a difficult for me figure out starting the 'localhost' website that reflected VSCode changes. 

-What additional readings did you have to do in order to make sense of things.
I used a lot of Stack Overflow, Mozilla docs, and other helpful tech-related websites to understand examples of how web components work. I utilized W3Schools and Geeksforgeeks a lot, as well.
Week-7 Homework
Published: 2023-02-27 00:53:40

#### What is confusing about platforms?
Platforms are confusing due to all of their unique ways of formatting HTML, CSS, and JS, as well as all of their different syntaxes. They lack a uniform syntax, so learning different platforms essentially requires learning a new programming language, when they all do similar things, making the learning seemingly unnecessary.
#### How could web components and VanillaJS standards be taught in a way that is more approachable?
It would be much easier to learn web components and VanillaJS through a structured, bit-by-bit learning approach. Each fundamental concept should be broken apart and taught individually, rather than all at once. Also, essential methods and syntaxes should be focused on individually, rather than just trial-and-erroring until something works, and even then not completely understanding WHY it works, just that it works in that instance.
#### What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)
I found Vue easiest simply because its layout was the most similar to the original layout of HTML, CSS, and JavaScript. 
#### Think back on the tooling. What parts were confusing? What clicked with you immediately?
Almost everything about the tooling was confusing. I pretty much just banged my head against the wall and googled until I found something that seemed like it worked.
#### What additional readings did you have to do in order to make sense of things.
https://www.hexacta.com/most-popular-development-platforms-based-on-javascript/
My perspective as a new developer
Published: 2023-02-27 00:39:37

Platforms can be confusing at first because the platforms like react, angular, etc. each have their own special syntax/code. When learning a new platform you need to relearn the new code in order to create specific things. 

WC and VanillaJS could be taught in a more approachable way by teaching it in a slow manner. When new developers are interduce it can be very easy to use a platform as its already setup and ready for use. It is smarter for developers to learn vanilla JS before using platforms because they will have a better understanding then.

Personally when using platforms I found React to be very easy in they way as setting up things. I personally did not understand the platform itself but It felt easy and I can see why people might prefer platforms.

When using the platforms it was very easy for me to get my HTML code to work right away, the JavaScript by far was always the confusing part to the process.

When researching the platforms I usually came across people having the same issues I was having. There were always fixes for them which was convenient but if it was made with just Vanilla JS things would be more understandable and the process would be easier.
Week 7
Published: 2023-02-27 00:30:45

##### What is confusing about platforms?
###### There are many things that can make web platforms confusing. One is Compatibility: Web platforms can have varying levels of compatibility with different browsers and devices, which can make it challenging for developers to ensure that their applications work well across all platforms. Another is updates. Web platforms are constantly evolving, with updates and changes being made regularly. This can be challenging for developers, as they must stay up-to-date with the latest changes and ensure that their applications continue to work as expected.
##### How could web components and VanillaJS standards be taught in a way that is more approachable?
###### I think the best way is using real world examples and providing hands-on oppurtunities. Real-world examples can help developers understand how web components and VanillaJS can be used in practical applications. It will help see how these concepts can be used to build interactive and dynamic web applications. Hands-on learning opportunities can help developers apply what they've learned and solidify their understanding of web components and VanillaJS. 
##### What did you find easiest to work with on 1st stab? 
###### I think it's understanding written code. 
##### Think back on the tooling. What parts were confusing? What clicked with you immediately?
###### Parts that were confusing were complex setup and installation processes with tooling and also I think debugging and troubleshooting can be challenging since you can't find the direct issue. I sometimes find compatibility issues with different operating systems or software versions to be a little confusing. Things that clicked were some familiarity with similar tools or technologies. 
##### What additional readings did you have to do in order to make sense of things.
###### Defenitely browsing the internet to find articles that can help. I would look at web forumns such as github and stackoverflow that help new people understand certain code/concepts.
💰 Currency Formatting in JavaScript
Tags: webdev, react, javascript, angular
Published: 2023-02-27 00:30:00

Currency formatting is an essential part of globalizing web applications, and it is crucial to understand the different formatting styles for different countries. Here, we will explore how to format currency using the JavaScript Intl API.

<img src="https://media.giphy.com/media/67ThRZlYBvibtdF9JH/giphy.gif">



## 💰 Different Currency Formats in Countries

Different countries have different ways of representing currency values. Here are some examples of different currency formats:

| Country |Currency|Format|
| --------- |:---------:| -------:|
| United States | US Dollar | $1,000.00 |
| European Union | Euro | €1.000,00 |
| Japan | Japanese Yen | ¥1,000 |


## 🛠️ Utility Function to Handle Currency Formatting
To make currency formatting easier, we can create a utility function that takes a value and a locale as arguments and returns the formatted currency string.

```javascript
function formatCurrency(amount, countryCode) {
  const formatter = new Intl.NumberFormat(countryCode, {
    style: 'currency',
    currency: getCurrencyCode(countryCode),
  });

  return formatter.format(amount);
}

function getCurrencyCode(countryCode) {
  switch (countryCode) {
    case 'US':
      return 'USD';
    case 'GB':
      return 'GBP';
    case 'JP':
      return 'JPY';
    case 'DE':
      return 'EUR';
    default:
      return 'USD';
  }
}
```


The getCurrencyCode function creates a formatter with the style option set to currency, formats the value 1, and returns the currency code from the resulting formatted string.


## 💰 Example
Let's see an example of how we can use this utility function in a React component. We'll create a simple form that allows the user to enter a value and select a currency.

```jsx
import React, { useState } from "react";
import { formatCurrency } from "./utils";

const CurrencyConverter = () => {
  const [value, setValue] = useState("");
  const [formattedValue, setFormattedValue] = useState("");

  const handleValueChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);
    setFormattedValue(formatCurrency(inputValue));
  };

  return (
    <div>
      <label htmlFor="currency-input">Enter a value in your currency:</label>
      <input
        id="currency-input"
        type="number"
        value={value}
        onChange={handleValueChange}
      />
      <p>The value in your currency: {formattedValue}</p>
    </div>
  );
};

export default CurrencyConverter;
```
🎉 Congratulations, you have now learned how to handle currency formats in JavaScript using the Intl API.

Here is the stackblitz: https://stackblitz.com/edit/react-ts-fhuzpd?file=App.tsx
How to create an Accordion with pure HTML, CSS no JavaScript
Tags: webdev, beginners, programming, html
Published: 2023-02-26 23:54:17

## Introduction

Have you ever wondered if you can create an accordion without writing very long codes? 

With HTML5 and a little bit of CSS you can achieve this

## The `<details>` tag

The `<details>` tag is used to define extra information that a user can open and close on demand. By default it is closed and when open, it expands the contents.

The `<summary>` is usually used alongside the `<details>` element to define a heading for the content.

Let us see how this works

``` HTML
<body>
<details>
  <summary>Accordion</summary> 
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>
</details>
</body>
```

This is the basic structure but we can decide to add some additional style for example:

``` CSS
body{
  background-color: lightblue;
}

details {
  background-color: white;
  padding-block: 10px;
  padding-inline: 10px;
  border-radius: 5px;
  width: 50%;
  margin-inline: auto;
}
summary {
  text-transform: capitalize;
}
p{
  color: gray;
}
```

The output should look some thing like
{% codepen https://codepen.io/clement1kalu-okereke/pen/oNPYzeO %}

## Conclusion

Creating accordions with JavaScript makes your work neater, smaller in size and easier to read and understand .
Introducing the new JupyterLab Desktop!
Tags: webdev, jupyter
Published: 2023-02-26 23:11:14

**Introducing the new JupyterLab Desktop!
**
the devs announced the major update to JupyterLab Desktop which adds many new features with main focus on the user experience.

JupyterLab Desktop is the cross-platform desktop application for JupyterLab and it is the quickest and easiest way to get started with Jupyter notebooks on your personal computer.

see more: https://blog.jupyter.org/introducing-the-new-jupyterlab-desktop-bca1982bdb23
Day 2: Leetcode | 72. Edit Distance
Tags: javascript, webdev, algorithms, leetcode
Published: 2023-02-26 23:06:40

> Difficulty: Hard Language: JavaScript

## Problem Description

Given two strings word1 and word2, return the minimum number of operations required to convert word1 to word2.

You have the following three operations permitted on a word:

Insert a character

Delete a character

Replace a character


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

## Solution
 
The smaller the edit distance of two strings, the more similar they are .If two strings are equal, their edit distance is 0.

Set two pointers i and j for word1 and word2 respectively, traverse the two strings respectively, and only perform the following three operations during the traversal process:

Insert a character

Delete a character

Replace a character: skip if the characters of the two string comparisons are the same

matrix[i][j] indicates the edit distance between the word1 starting from the 0th character to the i-th character and the word2 starting from the 0th character to the j-th character.


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

This solution works great!

Source Code :) https://github.com/codeXXripper/Leetcode-JSLeetcode Problems


Follow me for more

linkedin.com/in/israel-fitsum
As a new developer in the field...
Published: 2023-02-26 22:21:58

Q: What is confusing about platforms?
A: I think the most confusing aspect of working with different platforms is the numerous ways a user has to learn to complete the same task. 
Q: How could web components and VanillaJS standards be taught in a way that is more approachable?
A: I think the best way to teach beginners about web components and VanillaJS is to start with the basics of HTML, CSS, JS and understanding how these work together. Another important method would be to allow beginners to experiment on their own with the settings and the syntax. Showing live examples and uses of web components could also be beneficial. 

Q: What did you find easiest to work with on 1st stab? 
A: When I first started to work in JS, I found the syntax and the layout of the code to be very similar to Java, which I had previous experience in. 


Q: What additional readings did you have to do in order to make sense of things.
A: I remember looking up a lot of the differences between the libraries and frameworks. The MDN web docs also provided valuable information about some key concepts such as Shadow DOM.