teleren/devto huggingface dataset:
Building a Mircofrontend...
Published: 2023-04-10 16:52:19

### Final Article!

After a few weeks of blood, sweat, and tears we have finally finished building our mircofrontend! 

#### Final Look 

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNjU0YWM5OWE5Yzg5OThjYTk1OGZiNGYwYTExMzNmMWU0NWEwOTYyMiZjdD1n/Axd3ZdW4kEbO2lodBm/giphy.gif">

####Link to mircofrontend: https://project2-micro-frontend.vercel.app/


#### Q&A: 
 **Q.** How many elements did you end up going with? Why did you break it up that way?
**A.** The three main elements of this mircofrontend are: 
* Badge-Card: Carves out the layout and content of a single badge. Sort of a template for our badges. 
* Badge-List: This is where the main portion of the search and render aspect is located. This creates the top box used for search and bottom box used to display the badges.  
* Search-Widget: This creates the search symbol and input field that holds the value of the user search. 

All of these work together to create, search, fetch, and display our badges from the backend API.

**Q.** What was the hardest aspect of this?
**A.** Some hard aspects were 
* Learning how to get the search input from the user, to then fetch the data from the backend to render it on the frontend. It took a lot of trial and error to figure out the search functionality. 
* Aligning the contents of the divs in the badge card to line up as we wanted them to. 
* Trying to figure out how to not have all the badges from the backend displayed on the frontend. 

**Q.**What part of this project was easier than you expected?
**A.**One part of the mircofrontend that was easier than expected was getting the badges from the API backend to render on the frontend. We believed that that was going to be the hardest part of the project, but it was easier than expected.
Overcoming Azure Cloud Resume Challenges: A Journey of Adaptation and Growth
Tags: azure, resume, terraform, python
Published: 2023-06-02 18:20:04



## **Introduction:**
Embarking on the Azure Cloud journey to create a captivating resume presents its own set of challenges. However, with a mix of prior experience, a willingness to learn, and the right tools, it becomes an exciting opportunity to showcase one's skills and expertise. In this post, we explore the challenges faced while building a static website, storing it securely, implementing visitor count functionality, and automating the deployment process using Azure Cloud services.

## **1) Building a Static Website:**
Transitioning from GCP and AWS to Azure Cloud can be initially daunting, but leveraging prior experience simplifies the process. By utilizing a website framework familiar from previous challenges, one can quickly set up a static website on Azure. This familiarity not only accelerates development but also allows for efficient code migration and utilization of existing knowledge.

## **2) Storing the Website Securely:**
Azure Storage Accounts offer a reliable solution for storing website content securely. By creating a storage account and integrating it with Azure Front Door CDN, it becomes possible to distribute content globally while maintaining optimal performance. This combination ensures that the website is accessible, fast, and can handle increased traffic with ease.

## **3) Implementing Visitor Count Functionality:**
To track visitor count, leveraging Azure Functions proves to be a valuable approach. By creating a function app and connecting it to Cosmos DB, it becomes possible to store and retrieve visitor data efficiently. The trigger link generated by the function app can then be integrated into the website, enabling real-time tracking and analysis of visitor activity.

## **4) Automation and CI/CD with GitHub Actions and Terraform:**
Streamlining the deployment process is crucial for maintaining a seamless workflow. By utilizing GitHub Actions and Terraform, automation becomes a reality. While frontend automation is already implemented, the backend automation process is currently underway. This approach ensures that changes made to the codebase are automatically deployed to Azure, reducing manual effort and enabling rapid iteration.

## **Conclusion:**
Building an impressive Azure Cloud resume involves overcoming various challenges and adapting to new tools and services. By leveraging prior experience, embracing Azure's offerings, and utilizing automation tools like GitHub Actions and Terraform, one can successfully navigate the complexities of Azure Cloud development. This journey not only showcases technical proficiency but also highlights the ability to adapt and grow in the ever-evolving world of cloud computing.

[CLICK HERE TO VIEW THE SITE](https://azure.spshan.com/)
Reconnecting in the dev.to Community
Tags: beginners, devto, discuss
Published: 2023-06-02 17:57:38

Today 02 June 2023 🧐,

Hi everyone! I'm **Pranesh**, and after years of being away, I'm finally back on this platform. It feels great to reconnect with all of you here on Dev.to! 🎉

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

Hopefully, I will be the new active member. Just a fun post in the first approach😅. I'm ready to dive headfirst into discussions, share my experiences, and learn from fellow developers. 

Thanks for reading 💖

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hwuf5t9f87xqrc6sln3.jpg)
TECHNICAL WRITING — INSTRUCTION MANUAL. (TEMPLATE)
Tags: writing, technical, documentation
Published: 2023-06-02 17:49:19

If this were to be the usual technical article, you would need to give an introduction, however, seeing that this is a user manual, and the reader must have bought the equipment needed and is at the point of setting it up would have to go straight to the point, you need to keep everything simple, and straightforward. So here is an example — how to set up a home wifi, taking starlink as the case study.

Open the Starlink kit box: The Starlink dish, a power wire, a Wi-Fi router, and a mounting tripod are all included.

Locate a Good Spot: Find a spot with a clear view of the sky on your land, especially away from any obstacles like trees or high structures. An unobstructed line of sight to the satellites is necessary for Starlink.

Assemble the Dish: To assemble the satellite dish and tripod mount, refer to the instructions included in the Starlink Kit. Make sure the tripod is firmly linked to the dish.

Place the Dish in the Selected Location: Place the tripod-mounted dish there. To align the dish with the satellites, change its angle and orientation. By offering real-time feedback on the signal strength, the Starlink app or website may assist you with this procedure.

Connect the power to your Starlink dish. Connect the dish to an electrical outlet using the power cord.

Connect the dish to your Starlink router. Connect the router and dish together using the Ethernet cable.

Activate the Starlink router. The router will launch immediately and start looking for satellites.

Get the Starlink application. Both iOS and Android phones and tablets can download the Starlink app.
Launch the Starlink app, then log in. You must register for an account and fill up your Starlink account details.
To complete the setup process, adhere to the instructions in the Starlink app. You may use the app to get instructions on setting up your Wi-Fi network and connecting your devices to the internet.

_Alternatively, you can get the images of the procedures(and put the following accordingly) to make the instructional manual more precise and simpler._

-Set up equipment (Starlink, WiFi router, power supply, cables, and base.)

-Download app (play store or app store)

-Set up the app

-Let it configure itself

-Set wifi name and password

**THE KIWI WRITER.**
Crossposting Hashnode to DEV
Tags: writing
Published: 2023-06-02 17:26:29

If you're like me, you might have multiple blogs. Medium, Hashnode, and DEV are all super popular choices to blog under, and I'm a fan of all of them for different reasons.

I own accounts on all three platforms, but I only really consistently use two - DEV and Hashnode. DEV because I've accumulated quite the following (800+ followers) and Hashnode because, well, the markdown editor looks cool.

Think I make different content for both blogs? Think again. I don't have the time or interest to keep two completely separate blogs up and running.

Instead, I use some of the really useful features form each platform to quickly and efficiently cross-post on each platform. In this article, I'll walk you through how to publish articles from Hashnode to DEV and vice versa.

## Hashnode to DEV

This is my preferred method, only because it looks nicer to write in their editor, wrapped in with the fact that I personally think their system for storing drafts looks cleaner and nicer than DEV's.

So you've written your article, published it on Hashnode, and are ready to post it to DEV? Here's a handy list of how to do it super easily.

* Start by copying the markdown from the article using Hashnode's **copy markdown** feature, found in the menu bar above your article.
    

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

* Create a new post on DEV.
    
* Paste the markdown from Hashnode into your DEV post.
    
* Copy and paste your title into the article where it belongs and add associated tags for maximum exposure.
    
* Add the canonical URL to the DEV post from your Hashnode article to show that it was originally published there if you wish.
    
![canonical url](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0o1tnonyezdes8twrfx.png)

* You're done!
    

### Header Images

Recommended ratio dimensions for header images do vary between platforms.

* Hashnode recommends a 1600 to 840 ratio.
    
* DEV recommends a 100 to 42 ratio (1600 to 672).
    

I'd recommend a tool like Figma for making custom thumbnails so you can easily change size, but for an easier and just as good-looking experience you can just go with a free image from [Unsplash](https://unsplash.com).

## DEV to Hashnode

To go from the other way around (DEV to Hashnode), you can follow this handy list.

* Copy all of the markdown (Ctrl-A when the editor is selected, Ctrl-C) from the DEV article and paste it in a new Hashnode draft.
    
* Copy and paste the title into the title area, then hit publish to add some article details before you officially publish the article.
    
* Optionally include the DEV link in the canonical URL section.
    

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

* Add any tags and finalize the publishing.
    
* You're done!
    

## Fin.

Hope you enjoyed! Don't forget to drop a follow and a like if you like my posts. 👋
[PHP] - Desafio Alura - 7 Days of Code - Dia 2
Tags: php, challenge
Published: 2023-06-02 17:08:41

No post anterior, falamos um pouco sobre a iniciativa **7 Days of Code** e também foi dada uma visão geral sobre o desafio de PHP, bem como a estrutura geral do projeto com o qual estamos trabalhando.

Por enquanto, o código não está grande, porém, se não tomarmos cuidado, ele terá cada vez mais dívidas técnicas, causadas pela falta de boas práticas. Devemos nos atentar a isso, além de cumprir o desafio do dia. Dito isso...

**Bora pro segundo dia!**

Nossa segunda tarefa é bem simples: criar uma função que salve os dados dos usuários vindos do formulário de registro.

Os usuários cadastrados ficarão salvos em **data/users.json**. A extensão do arquivo já nos dá uma dica de funções que serão úteis para persistirmos os dados, como [`json_encode`](https://www.php.net/manual/en/function.json-encode.php) e [`json_decode`](https://www.php.net/manual/en/function.json-decode.php).

Para isso, um novo arquivo foi criado: **crud.php**. Nele, implementei duas funções: a primeira, pega os dados vindos da requisição POST, insere no registro de usuários e grava os dados no arquivo.

A segunda função serve apenas para retornar a lista de usuários devidamente formatada (como array) para que possamos manipula-la mais facilmente, e também por ser uma funcionalidade que, provavelmente, será utilizada mais vezes. Dessa forma, evitamos a repetição de código.

```php
crud.php

<?php

function crudCreate($user) {
    $usersList = getUsersList();

    $usersList[] = $user;

    $usersList = json_encode($usersList);

    file_put_contents(DATA_LOCATION, $usersList);
}

function getUsersList(): array {
    return json_decode(file_get_contents(DATA_LOCATION));
}
```

Outra alteração necessária foi no **controller.php**, mais especificamente na função `doRegister()`. Nele, eu precisei criar uma verificação para quando chegasse uma requisição via POST. Neste caso, o sistema deve realizar o registro do usuário e voltar para a tela de login. Caso contrário, ou seja, se for uma requisição via GET, deve apenas exibir a tela de registro.

```php
function doRegister() {
    if (isset($_POST['person'])) {
        crudCreate($_POST['person']);
        header('Location: /?page=login');
    }

    renderView('register');
}
```

Com isso, finalizamos o segundo dia do desafio! Até a próxima!
Stringify and Parse Errors in JavaScript
Tags: javascript, webdev, tutorial, typescript
Published: 2023-06-02 16:17:21

The `Error` object in JavaScript doesn't serialize to JSON with all its properties by default. That's because the `Error.prototype` (from which all error objects inherit) doesn't have a `toJSON` method defined. Consequently, if you attempt to serialize an error using `JSON.stringify`, you'll only get an empty object:


```js
const error = new Error("My error message");
const jsonError = JSON.stringify(error);

//> prints "{}"
console.log(jsonError); 
```

One way to capture the details of an error is by providing `JSON.stringify` with a replacer function or an array of property names to serialize. For an `Error` object, we're often interested in the `message` and `stack` properties. Here's how to stringify an `Error` object, capturing these properties:

```js
const serializedError = JSON.stringify(error, 
  Object.getOwnPropertyNames(error)
);

//> prints "{"message":"My error message","stack":"..."}"
console.log(serializedError); 
```

The challenge now is to reconstruct the error object from the serialized data. Simply parsing the JSON would give us a plain JavaScript object, but we want a real `Error` object:

```js
const deserializedError = Object.assign(new Error(), 
  JSON.parse(serializedError)
);

//> prints "Error: My error message"
console.log(deserializedError); 
```

First, `JSON.parse` transforms the JSON string back into a JavaScript object. Then, `Object.assign` is used to copy all properties from the parsed object to a new Error object.

This approach provides a simple way to serialize Error objects and then reconstruct them. However, it's important to note that there are other Error subclasses like [TypeError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError),  [ReferenceError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError), or custom errors from libraries. Information about these specific error types will not be preserved when reconstructing the Error in this way.

---

I hope you found this post helpful. If you have any questions or comments, feel free to leave them below. If you'd like to connect with me, you can find me on [LinkedIn](https://www.linkedin.com/in/christian-zirkel/) or [GitHub](https://github.com/zirkelc). Thanks for reading!
TEACH yourself JAVA in 21 days!
Tags: java, learning, leetcode, monk
Published: 2023-06-02 16:25:20

HEY GEEKS SOMETHING NEW FOR YOU :-
**let's start your day TODAY !!!!!!!** 
DAY : 1 INTRDUCTION
DAY : 2 OOP AND JAVA
DAY : 3 JAVA BASICS
DAY : 4 WORKING WITH OBJECTS
DAY : 5 ARRAY ,CONDITIONALS,LOOPS
DAY : 6 CREATING CLASSES AND APPLICATIONS
DAY : 7 METHODS
DAY : 8 APPLETS
DAY : 9 GRAPHICS FONT COLORS
DAY : 10 ANIMATION AND THREAD
DAY : 11 IMAGES AND SOUND
DAY : 12 EVENTS
DAY : 13 AWT ABSTRACT WINDOW TOOLKIT
DAY : 14 WINDOW ,NETWORKING
DAY : 15 MODIFIER
DAY : 16 PACKAGES
DAY : 17 EXCEPTIONS
DAY : 18 MULTITHREADING
DAY : 19 STREAMS
DAY : 20 METHOD AND LIBRARIES
DAY : 21 UNDER THE HOOD

**EBOOK LINK** [HURRY](https://www.cs.cmu.edu/afs/cs.cmu.edu/user/gchen/www/download/java/LearnJava.pdf)

**THANKS ME LATER GEEKS !!!**
VanJS and Vite a perfect Match
Tags: vanjs
Published: 2023-06-02 16:08:34

The lightness of VanJS makes it a perfect choice for a vast amount of applications, after all, many of us are not creating a Facebook like app...

Look at this page [VanJSVite](https://vanjs-vite.surge.sh/), open the developper tools, I would be glad to ear what you think about it...

Many thanks to FredericHeem for this template.
You can play with it here : [van-playground](https://github.com/FredericHeem/van-playground)
2703. LeetCode's Return Length of Arguments Passed - Extremely LOGICAL JS Solution Beats 83% in Memory Usage ✨
Tags: beginners, programming, tutorial, leetcode
Published: 2023-06-02 16:06:08

# Intuition
The problem is to find the length of the arguments passed to a function. A possible way to solve this problem is to use the rest parameter syntax (…args) to collect all the arguments into an array and then return the length of the array.

# Approach
To implement this approach, we define a function named argumentsLength that takes any number of arguments using the rest parameter syntax. Inside the function, we simply return args.length, which is the length of the array that contains all the arguments.

# Complexity
- Time complexity: $$O(1)$$

- Space complexity: $$O(n)$$

# Code
```javascript
/**
 * @return {number}
 */
var argumentsLength = function(...args) {
    return args.length;
};

/**
 * argumentsLength(1, 2, 3); // 3
 */
```
Introduction to the DEV Content Framework
Tags: developer, startup, devjournal
Published: 2023-06-02 16:04:16

In 2020, Adam '@adamd' DuVander, previously writer at [ProgrammableWeb](https://www.programmableweb.com/) and content strategist at [Zapier](https://zapier.com/), introduced the DEV Content Framework in his book ‘[Developer Marketing Doesn’t Exist](https://everydeveloper.com/developer-marketing/book/).’

**This post is an introduction to the framework with real-world examples to help you leverage it for your developer-first product.**

# introducing the DEV Content Framework

TL,DR: `DEV` stands for:

- Discovery, 
- Education, and 
- Viewpoint.

## `D` stands for Discovery

> The more accessible your product and docs are, the better.

It should be straightforward for developers to access the data they need and get started with your product. The first-time experience is vital. Take Stripe. From the homepage, you can access the API documentation and recent product updates. Sign in, and you can start playing with the API. It’s simple.

{% embed https://speakerdeck.com/fmerian/stripe %}

## `E` stands for Education

> Make your content helpful, educative, and inspiring.

It takes time to master an API, a new library, or a framework. Your content should help developers embrace its full potential by educating and inspiring them. Take Liveblocks. The team wrote in-depth case studies, full of live examples. It makes you want to use the product because it feels like the team puts lots of thinking and hard work into them.

{% embed https://liveblocks.io/blog/how-to-animate-multiplayer-cursors %}

## `V` stands for Viewpoint

> Have an opinion. Stand for how things should work.

Last but not least, you should have an opinion. By default, technology enables you to build whatever you want. Why would developers even care about your product if they can build it by themselves? Stand for how things should work. Take Linear. Many software helps you track issues. Linear wants you to enjoy doing it. “Software should feel magical,” they say.

{% embed https://linear.app/method %}

# wrapping up
Thanks for reading!

Over to you! Have you implemented the DEV content framework in your team? How do you apply it to your own content strategy? What are your best practices?

I’m eager to learn how you leverage this framework.

**And if you enjoyed this story, [please do share](https://twitter.com/fmerian/status/1623738752966479873?s=20)!**
How Would I Explain React to a kid
Tags: react, webdev, beginners
Published: 2023-06-02 16:00:00

Like everything else, You should invest time, discipline and motivation learning and understanding how React works. 

But what if a kid suddenly asked you what it is, Of course, you cannot simply throw a college book definition, and let him digest it himself.

For me, in order to understand something, I need to simplify it like I was five years old. 

**How React Works**

React used to build interactive components. It adheres to component-based approach, which allows you to make reusable User Interface elements.

**Think of it like a lego block**. You can build any figure of any kind by stacking up lego pieces.

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

That's the mindset behind React's approach. 

Lego blocks are just these UI components, when put together, you can build web apps made up of components.


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


I just want to keep this short and simple. That's it.

Hope this makes sense!
💻ES6 tutorial: let in javascript
Tags: javascript, webdev, beginners, tutorial
Published: 2023-06-02 15:52:45

In ES5, we used to declare a variable using `var`. ES6 provides a new way of declaring a variable by using the `let` keyword.

But there are some differences between `let` and `var`. Let’s understand some concepts related to `let`.

## Block Scope: 
Variables declared with let are block-scoped. In JavaScript, blocks are denoted by curly braces {}. Variables declared inside the { } block cannot be accessed from outside. For example, the if, if...else, do...while and for loop statements create blocks.
```
let age = 10;
  if (age === 10) {
    let age = 20;
    console.log(age);
    // Expected output: 20
  }
console.log(age);
// Expected output: 10
```
Explanation: There are two `let` one is inside if condition (block scope )and another is outside of the block. 

The first **`console.log(age)`** statement inside the **`if`** block will output **`20`** because it refers to the inner **`age`** variable declared within that block.

The second **`console.log(age)`** statement outside the **`if`** block will output **`10`** because it refers to the outer **`age`** variable declared at the beginning of the code.

## Declaring Variables:
Variables declared with let cannot be redeclared within the same block or same scope.

```
let a = 5;
let a = 3; // error

OUTPUT: Uncaught SyntaxError: Identifier 'a' has already been declared
```
Redeclaring a variable with let in a different scope or block treats that variable as a different variable. And the value of a variable outside does not change.

```
let a = 5;
{
    let a = 3;
    console.log(a); //Output: 3
}
console.log(a); //Output: 5
```

## Hoisting:
the let keyword in JavaScript does not allow hoisting. When you declare a variable using let, it is not hoisted to the top of its containing scope.

```
console.log(a);
let a; // ReferenceError: a is not defined
```

---
👉 Follow my IG for regular frontend tips: [Rafi Kadir](https://www.instagram.com/i_am_rafikadir/)
👉 Make a connection on Linkedin: [Rafi Kadir](https://www.linkedin.com/in/rafikadir/)