teleren/devto huggingface dataset:
Porque dei um tempo nas novidades em tecnologia
Tags: career, braziliandevs, beginners
Published: 2022-09-27 10:01:44

Não, não é clickbait este título: eu realmente dei um tempo nas novidades de tecnologia e sim, **fortemente recomendo** para todos os **iniciantes**, **juniors **e, as vezes, _até plenos que acabaram de chegar nesta etapa_- Esqueçam, **neste momento**, as novidades de tecnologia.

Não é de hoje que temos aquela _piada _"Quando eu durmo, sempre acordo com mais 4 bibliotecas e 2 novas linguagens". Agora vamos pensar: Um iniciante na área, que está a **engatinhar **nas bases das linguagens, consumindo todo aquele novo conteúdo diariamente (_e que muda constantemente_), o que acontece com ele? Vejo ele se tornando um dev que é inteiramente raso em tudo, ou uma pessoa com crises de ansiedade e alto sabotagem.

Não estou dizendo que existe um momento correto para realizar essas atualizações, e nem que **você deve estar completamente fora de novidades**. Estou dizendo para você **focar nas bases**. Conheço diversos devs front-end que dizem que "fazem tudo e mais um pouco" mas até hoje não sabem centralizar uma div no html e css. A etapa base de conhecimento é o que diferencia os "fantasticos" dos "rasos".

Por anos eu fui vítima da minha **auto-sabotagem**. Me comparava aos novos devs chegando na área dizendo coisas sobre props e arrays e eu ali, destrinchando css-flex e debatendo o peso das imagens na renderização das páginas. Me sentia um lixo, a ponto de cogitar mudar de área, pois estava velha para isso.

Pois, com a pandemia, tive tempo para **analisar tudo isso**. O que faltava em mim como dev front-end? Era saber de todas as bibliotecas novas ou entender a base e conseguir atuar de maneira mais concreta nos projetos? Optei pela segunda opção.

Abandonei todas as novidades e **criei um fluxo de estudo**, intenso, mas da minha maneira. A cada dia, um passo. As vezes pequeno, as vezes enorme. Comecei a entender a base. A base de pre-processadores, a base de html, a base de JS. Por meses eu não consumi nada novo.

Hoje, eu me sinto segura para esse passo dois. Agora aquelas bibliotecas que antes me assombravam algumas nem existem mais, outras perderam a força, poucas ficaram - e são essas que eu firmo meus pés. **Ler a documentação ficou mais fácil**.

Então, cuidem-se. Não se comparem com os outros, acreditem em si mesmos, e **cuidem da sua base**, sempre.
Close button with animation - tutorial
Tags: css, html, webdev, tutorial
Published: 2022-09-27 09:59:18


![Close button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14fld0rpdvsylo93ceyr.png)

## <u>HTML</u>
For HTML, we need a container with two div elements and a span element with text "CLOSE".

```html
<div class="container">
    <div></div>
    <div></div>
    <span>CLOSE</span>
</div>
```
      

## <u>CSS</u>
For CSS, first we'll style the container. We'll set width and height to 80x30 pixels.

We'll set position to relative because of div child elements, which will be positioned absolute, these two elements will create X sign.

And, we'll position the text in center using flexbox and set cursor to pointer.

```css
.container {
    width: 80px;
    height: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
```
      
Now we'll style those two div elements inside of container.

As mentioned before, we'll set position to absolute, with top, bottom, left and right properties set to 0, which means that these two elements will be the same width and height as it's parent, and at the same position.

We'll set background color to light grey, a little border radius and transition.

```css
.container div {
    position: absolute;
    background-color: rgb(186, 186, 186);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .3s;
    border-radius: 3px;
}
```
      
As for the text element, we'll set z-index to 1, so that this element appears on top of these two div elements that we just styled above.

We'll set font size to 10 pixels, a little transition and font weight to 600.

```css
span {
    z-index: 1;
    font-size: 10px;
    transition: .3s;
    font-weight: 600;
}
```
      
On hover, we'll set text color to white and add a little transition.

```css
.container:hover span {
    color: #fff;
    transition: .3s;
}
```
      
For div elements, on hover, we'll set background color to red and add a little transition.

```css
.container:hover div {
    background-color: rgb(211, 66, 37);
    transition: .3s;
}
```
      
Also, we'll rotate div elements, so that they form an X sign.

To achieve this, we'll rotate one element for 45 degrees, and the other for -45 degrees.

```css
.container:hover div:first-child {
    transform: rotate(45deg);
}
.container:hover div:nth-child(2) {
    transform: rotate(-45deg);
}
```
      
And that's it it. Simple, huh?

You can find video tutorial with full code [here](https://designyff.com/code/close_animation).

Thant you for reading. ❤️
Understanding Micro Front-ends !!
Tags: javascript, microservices, programming
Published: 2022-09-27 09:31:26

🔷 The idea behind Micro Front-ends is to think 
about a website or web app as a composition of features which are owned by independent teams.

🔷 A team is cross functional and develops its features end-to-end, from database to user interface.

🔷 A team is cross functional and develops its features end-to-end, from database to user interface.

For More Such Amazing Posts
Follow @devkshitij7  
Save for Future...
Create resume by markdown, print to PDF and available online
Tags: markdown, resume, html, css
Published: 2022-09-27 08:58:45

It is quite annoying to maintain resume in multiple format, MS Word, PDF, TXT as well as wanna to have an HTML format online. It will be great to keep a easy editable single source for PDF/HTML as long as online resume available. 

[casual-markdown-cv](https://github.com/casualwriter/casual-markdown-cv) is a minimal way to create markdown resume and host on github (or other static web hosting)

Github markdown is very good for edit/preview. Here is a sample template: [resume.md](https://github.com/casualwriter/casual-markdown-cv/blob/main/resume.md)

Just add a little code as below, it transform to [resume.html](https://github.com/casualwriter/casual-markdown-cv/blob/main/resume.html) with nice [layout](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume.html) (self-host at github).

then may print to PDF format, and share the url. (for github, it can accessed by raw.githack.com naturally)


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



## Themes

The following themes are available.

* Default theme: [resume.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume.html)
* Show QR code of url: [resume-qrcode.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume-qrcode.html)
* Dark theme: [resume-dark.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume-dark.html)
* Warm theme: [resume-warm.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume-warm.html)
* Blue theme: [resume-blue.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume-blue.html)
* Sample for web developer: [resume-web.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/resume-web.html)

And it is not limit for resume. for example,

* Project Plan:  [project-plan.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/project-plan.html)
* Documentation: [document.html](https://raw.githack.com/casualwriter/casual-markdown-cv/main/document.html)

for more details, please visit github-repo: https://github.com/casualwriter/casual-markdown-cv

hope you find it useful.

cheers,
Algorithm part-2 : Brackets Validation
Tags: java, algorithms, problem, solution
Published: 2022-09-27 08:58:32

Hello guys, Let's continue our algorithm series...
 Today i am going to show you how to solve valid Brackets problem. Let's discuss this problem first.

In this problem we are given brackets in form of String.We have to find out if they are valid or not.

Example
```
{([])}    : Valid
{(}}      : Invalid
{(}       : Invalid
{         : Invalid
}         : Invalid
{([)]}    : Invalid 
```
Let's see the solution.

```java 
 public boolean validBrackets(String brackets) {
        char[] arr = brackets.toCharArray();

        Stack<Character> stack = new Stack<>();
        for (Character ch : arr) {
            if (ch == '(' || ch == '{' || ch == '[') {
                stack.push(ch);
            } else {
                if (stack.isEmpty()) {
                    return false;
                } else {
                    if (
                       ch == ')' && stack.peek() == '(' || 
                       ch == '}' && stack.peek() == '{' || 
                       ch == ']' && stack.peek() == '['
                      ){
                        stack.pop();
                    }else{
                        return false;
                    }
                }
            }

        }
        return stack.isEmpty();
    }
```
Hope this post was useful. Thank you ❤.
Algorithm part-1 : Next Greater Element Algorithm
Tags: java, algorithms, problem, solution
Published: 2022-09-27 08:50:42

Today i am going to start a new series about algorithms and problem solving. I'll be posting about various problems with their solution. I am going to use java as programming language.

Today i am going to show you How to solve next greater element problem in java.

Let's discuss this problem. In this problem we are given an integer array. We have to find exactly next greater element of each array element. If there is no greater element we will sit -1 at that position.

Example
```
We are given : [4,5,1,7,3,6,9]
Answer       : [5,7,7,9,6,9,-1]
```

Let's see the solution...

```java
public int[] nextGreater(int[] arr){
        int[] result=new int[arr.length];
        
        for(int i=0;i<arr.length;i++){
            int j=i+1;
            int value=arr[i];
            boolean got=false;
            while(j<=arr.length-1){
                if(arr[j] > value){
                    got=true;
                    result[i]=arr[j];
                    break;
                }                
                j++;
                
            }
            if(!got){
                result[i]=-1;
            }
        }
        
        
        return result;
    }
```
Hope this algorithm works. Thank you ❤.
Cara Membuat Bilangan Fibonacci Dengan PHP
Tags: php, tutorial
Published: 2022-09-27 08:47:21

**[Cara Membuat Bilangan Fibonacci Dengan PHP](https://ruangkoding.id/cara-membuat-deret-fibonacci-dengan-php/) -** Fibonacci adalah sebuah deret angka dimana dua angka sebelumnya ditambahkan untuk mendapatkan angka berikutnya, dimulai dengan 0 dan 1. Pada artikel ini, kita akan belajar tentang cara membuat deret Fibonacci di PHP dengan dua cara yaitu dengan menggunakan cara iteratif dan rekursif.

Pada contoh kasus, kita memiliki angka n, kita perlu mencari bilangan Fibonacci hingga suku ke-n.

Contoh :
```
Input : 10
Output : 0 1  1 2 3 5 8 13 21 34

Input : 15
Output : 0 1 1 2 3 5 8 13 21 34 55 89 144 233 377
```

## 1. Membuat deret Fibonacci dengan cara rekursif
Cara rekursif adalah cara di mana kita berulang kali memanggil fungsi yang sama sampai kondisi dasar cocok untuk mengakhiri rekursi.

```
<?php  
function Fibonacci($number){
    if ($number == 0)
        return 0;    
    else if ($number == 1)
        return 1;    
    else
        return (Fibonacci($number-1) + 
                Fibonacci($number-2));
}

$number = 10;
for ($counter = 0; $counter < $number; $counter++){  
    echo Fibonacci($counter),' ';
}
?>
```
Kode diatas akan menghasilkan output seperti berikut

```
0 1  1 2 3 5 8 13 21 34
```

## 2. Membuat deret Fibonacci dengan cara iteratif
Pada cara ini, kita menginisialisasi angka pertama dan kedua menjadi 0 dan 1. Setelah itu, kita mencetak angka pertama dan kedua. Kemudian kita mengirimkan aliran ke loop while secara berulang di mana kita mendapatkan nomor berikutnya dengan menambahkan dua nomor sebelumnya dan secara bersamaan kita menukar nomor pertama dengan yang kedua dan yang kedua dengan yang ketiga.

```
<?php
function Fibonacci($n){
    $num1 = 0;
    $num2 = 1;
  
    $counter = 0;
    while ($counter < $n){
        echo ' '.$num1;
        $num3 = $num2 + $num1;
        $num1 = $num2;
        $num2 = $num3;
        $counter = $counter + 1;
    }
}
$n = 10;
Fibonacci($n);
?>
```

Kode diatas akan menghasilkan output seperti berikut :
```
0 1  1 2 3 5 8 13 21 34
```

Itulah cara membuat bilangan Fibonacci dengan menggunakan cara rekursif dan iteratif. Jangan lupa kunjungi [Ruang Koding](https://ruangkoding.id) untuk update terbaru lainnya. Selamat mencoba & semoga bermanfaat!
Vite + Module Federation: yes, we can
Published: 2022-09-27 08:31:01

[Microservices](https://martinfowler.com/articles/microservices.html) nowadays is a well-known concept and maybe you are using it in your current company.
Do you know that now you can apply similar ideas on the Frontend?

With [Module Federation](https://blog.logrocket.com/building-micro-frontends-webpacks-module-federation/#:~:text=Module%20federation%20is%20a%20JavaScript,between%20two%20different%20application%20codebases.) you can load separately compiled and deployed code into a unique application. This particular task allows you to create a [Microfrontend](https://martinfowler.com/articles/micro-frontends.html) architecture.  

Until recently, this task was only a [Webpack](https://webpack.js.org/concepts/module-federation/) feature, but now there is a [plugin](https://www.npmjs.com/package/@gioboa/vite-module-federation) to support Module Federation inside Vite.

[Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's the de facto standard for new projects and framework starters.

---

To understand better the paradigm and the configurations I created a working example of a host that loads a remote application at runtime. 

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

This is a simple Microfrontend architecture with Svelte, you can find the code [here](https://github.com/gioboa/svelte-microfrontend-demo)

----

You can [follow me on Twitter](https://twitter.com/giorgio_boa), where I'm posting or retweeting interesting articles.

I hope this plugin can helps the Microfrontend adoption, thanks for your attention, bye 👋

{% embed https://dev.to/gioboa %}

_Special thanks to [Manfred Steyer](https://twitter.com/manfredsteyer) for his contribution in this plugin._
System Design Principles!
Tags: systems, design, programming, tutorial
Published: 2022-09-27 08:28:45

( There is a video version of this blog, check it [here](https://youtu.be/G3b4Kc7EfHE) )
### What Is System Design?
There are tons of different definitions( that all have the same meaning) of **System Design**. The most comprehensible would be:

> System Design is the process of designing the architecture, components, and interfaces for a system so that it meets the end-user requirements.

> via/ [geeksforgeeks.org](https://www.geeksforgeeks.org/system-design-tutorial/)

In other words, System Design is just defining every feature of a system( Website, App, etc.).

I talk a lot about making a plan and following a structure when coding, well System Design is that!

And, well today I'm going to show you, 5 tips that will help you design the **BEST** Systems!

---

### 1. Think For The Now
You're building a system, that will function now. Something that will solve a problem your users have now.

Yeah, it's very good to think ahead, but you can easily get lost in doing so. Instead, try to solve and think about the problems you( or your users) have now.

---

### 2. Scalability
This, contradicts the 1st tip, but _not really_, the name of the game here is:

> Think For The Now, Make Room For The Future

Yeah, solving the problems you have now should be your priority. But keep in mind that tomorrow is inevitable( unless the world is ending, ha-ha, jk).

You have to make sure you can still be up and running tomorrow.
Or, maybe you find a lot of success.

You won't be able to do either of those two things if you don't make room for the future.

**Again**, so we're clear about one thing.

> Solve the problems you have now, while not bottlenecking yourself in the future!


---

### 3. Flexibility
Make sure you are not rigid in your approach. Make sure everything is flexible and can change based on requirements.

The **worst** thing you can do is to have a design where you cant innovate!

Today chat apps work a certain way. Maybe tomorrow, the trend is completely different. Maybe tomorrow we send encrypted messages, and the user isn't shown! **_Who knows?!???_**

---

### 4. Reusable
This is something more on the coding aspect. Make sure, your code isn't rigid( otherwise known as hard coding).

Make sure your code is **fluid**.

Don't make specific functions that do only one thing, make broad or general-purpose functions.

Use loops when necessary, define global rules( for example, your theme), etc.

**In other words:**

> Make sure your code can be reused.

Also known as, **D.R.Y.** ( **D**on't **R**epeat **Y**ourself)

---

### 5. Don't Go Into Detail Prematurely, and K.I.S.S.
Don't dive into your design head first.

Take your time. Relook at things twice, thrice, ten times.
Don't overthink it. If something looks more complicated than it should be, it probably is.

Don't focus on one specific thing, take a step back and look at the whole problem. And slowly, but surely, go into detail.

**Also**, **K**eep **I**t **S**imple **S**tupid( **K.I.S.S.**)
Learning Big Data - Step by Step
Tags: bigdata, aws, hive, programming
Published: 2022-09-27 08:22:13

## Learning Big Data - Step by Step (Follow the Sequence) 🚀⭐️ 

. 
.
.

📌 Big Data Fundamentals
https://lnkd.in/fWZPWKP

📌 HDFS Architecture
https://lnkd.in/fNP7bf7

📌 Mapreduce Fundamentals
https://lnkd.in/g457Wmv

📌 Hive tutorial for Beginners
https://lnkd.in/gJpDMTfD

📌 Introduction to Apache Spark
https://lnkd.in/gFRpe3-D

📌 Spark Accumulator & Shared Variables
https://lnkd.in/geZQaV3Y

📌 Big Data on AWS Cloud
https://lnkd.in/fBMf6Ac

📌 Big Data Project Use case
https://lnkd.in/gFRpe3-D

----------------------------------

## Interview Questions -

📌 partitioning vs bucketing
https://lnkd.in/gmbiKf3r

📌 ORC vs Parquet file format
https://lnkd.in/gM2Q8Egg

📌 Avro vs Parquet
https://lnkd.in/gg-NcyNJ

📌 Avro vs ORC vs Parquet file
https://lnkd.in/gizVx2Kw

📌 what is serde
https://lnkd.in/gxDVFTQJ

📌 Row based vs Column based file formats
https://lnkd.in/gN3vUsb6

📌 Spark Interview Question
https://lnkd.in/fUD6skU

---------------------------------

## Big Data General Concepts -

📌 5 Tips to prepare for Big Data Interviews
https://lnkd.in/gVcEjskn

📌 Scalability vs Availability & Low Latency vs High Latency
https://lnkd.in/gFkXxKns

📌 what is the future of Big Data
https://lnkd.in/gcJ6xSqW

📌 Difference between Database vs Data lake vs Warehouse
https://lnkd.in/gS4kWruJ

-------------------------------------

## Big Data Mock Interviews -

📌 9 Big Data Mock Interviews Playlist
https://lnkd.in/g78x9KCa

📌 Link to Subscribe to Sumit's youtube channel
https://lnkd.in/geJt-sMS

credit: [Sumit Mittal](https://www.linkedin.com/in/bigdatabysumit/)
Install homebrew on MacOS Monterey - Apple M2
Tags: homebrew, macos, m2, zsh
Published: 2022-09-27 08:20:34

---
title: Install homebrew on MacOS Monterey - Apple M2
published: true
description: How to install homebrew on MacOS Apple M2
tags: #homebrew #macos #M2 #zsh
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
When you begin using a MacOS most life-saving package manager will always be [Homebrew](https://en.wikipedia.org/wiki/Homebrew_(package_manager)). As it is not installed by default on a Mac laptop, the below documentation will go through simple steps to install and configure it.

## What is Homebrew?
Homebrew is an [opensource](https://en.wikipedia.org/wiki/Open-source_software) package management system for MacOS(also Linux).

## What has changed?
* Apple replaced the default [bash](https://en.wikipedia.org/wiki/Bash_(Unix_shell)) terminal to [zsh](https://en.wikipedia.org/wiki/Z_shell) in macOs Catalina.
* The installation path of homebrew on Apple silicon (M1 chip and above) is `/opt/` which is not part of default $PATH. The earlier versions would install under the path `/usr/local/`

## Install Homebrew
1. Open terminal and run, 
````
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
2. Authenticate when prompted.
3. Be patient...! (it might take 1 to 15 minutes to complete the installation)

## Set path in .zprofile
Set environment for login shells by running below commands:
```
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/<User>/.zprofile
```
*Replace `<User>` with your username* 
```
eval "$(/opt/homebrew/bin/brew shellenv)"
```
## Test
Run `brew help` you should be able to see different options brew offers.
How do I explain to my friends what I do?
Tags: webdev, discuss
Published: 2022-09-27 08:16:21

My friends, who don't code, sometimes ask me what I do for a living, and I usually answer that I build websites.

That is usually not a good enough explanation, so I need to elaborate more by saying that I build a user interface part of the website. If that is not enough, I tell them I put color to sites and build components like header or footer. Here is where the discussion mostly ends (possibly because people often lose interest at this point).

In some sporadic cases, I need to elaborate even more. Then I explain the database, the backend code, and how **I don't do** any of that stuff anymore. I also try to explain web applications and how **I don't do** any of that stuff anymore. Finally, I open a web browser and show how the web page consists of different components, like navigation, hero section, cards, etc. I explain how I am responsible for making all these components work in other browsers and devices. That usually does it.

Then, after a few months, these friends ask me all these questions again. And then, I tell them that I build websites. Sometimes, when I am amused by this question, I add that I do it with my magic fingers and brain.


## Conclusion


![I do CSS and HTML for a living sticker.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz6ubz51qyty9r533smc.jpg)

I like my Smashing Magazine sticker that says it nicely: I do HTML and CSS for a living. I wish everyone knows what it means.
Meme meme meme
Tags: community
Published: 2022-09-27 08:12:27

Here are few memes to cheer you up 😎


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


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


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

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


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

POST MORE MEMES IN THE COMMENT SECTION AND CHEER UP OTHERS😁😁

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90