teleren/devto huggingface dataset:
Criando uma conta e configurando um projeto no CodeMagic
Tags: kotlin, codemagic, fastlane
Published: 2022-12-07 20:17:19

## Contexto

A ideia desse artigo é compartilhar um passo a passo de como configurar o deploy dentro do CodeMagic.

Vamos usar como exemplo o deploy do projeto [Kotlin Library Sample](https://github.com/viniciusalvesmello/kotlinlibrarysample).

Dentro desse projeto temos 2 arquivos que facilitam todo esse processo:
- Configuração do Fastlane disponível no arquivo `/fastlane/Fastfile`;
- Configuração do CodeMagic, que fica no arquivo `codemagic.yaml`.

## Passo a passo

### Criar conta

Clique em `Sign up`.

![Step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzv1b99xqmvmmw48oiir.png)

No nosso caso desse projeto selecionamos o `GitHub`.

![Step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k5ax007vvpbntkuku15.png)

Clique em `Get start`

![Step 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d4plo1g37pk23fud6lm.png)


Selecione `GitHub` e clique em `Next: Install App`

![4Step ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs6h2uqszqcqjhtcjjkf.png)

### Conectando ao repositório do GitHub

Selecione sua conta no GitHub.

![Step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nglb0b4zzm4lrdnfq0yg.png)

Autorize o acesso aos repositórios

![Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/liuzd4x1a8jbg8i7qwqe.png)

### Criar o projeto

Selecione o repositório e informe o tipo do projeto.

![Step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcpcfyppjltj0extgd93.png)

### Configurar o projeto

Clique em `Finish build setup`

![Step 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cflzkr02lkf1fey025d7.png)

Configure as variáveis de ambiente

![Step 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ysyak4ckv1mim6d1rsh.png)

### Configure o Webhook

Clique em `Update webhook`.

![Webhook - 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzhkq5eh0pbincfwe2gi.png)

Verifique se o mesmo aparece no GitHub, ou adicione manualmente.

![Webhook - 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uiktv7yu7n0vcmt624s.png)

## Execução da pipeline

### Pipeline do Merge Request

Execução da pipeline no GitHub e no CodeMagic

![Pipeline - 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oiroiwxqz5j5xrz1p9bh.png)

![Pipeline - 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ga0gqy6ql4h8lxgsm7od.png)

![Pipeline - 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s44fjlxxmxdtmtb6ys10.png)

### Pipeline após a criação da tag no GitHub

![Pipeline - 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdvm9ccy82p16lj1wrjl.png)

### Resultado da publicação no Artifactory

![Pipeline - 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e9d8v3wjuyj0itsqeys.png)
Nexths 13 static site generation
Tags: nextjs
Published: 2022-12-07 19:39:02

hi all experts,

I am new to nextjs react mui development.

I want to create a simple dashboard. There is no server componenets.

I am confused with nextjs 13 documents. I mean app directory is server component. Then it talks about layout inside app directory. Layout is graphical component. What gives?

I used mui button and i have to use "use client" directive. 

What i want is this. I just want to create Flat html static site generation for my dashboard. Then i customize some part for dynamic data fetching ( x-datagrid)

Guide me on how to get static site generation for dashboard layout.

thanks much!.
State of CSS 2022 Survey
Tags: css, webdev, devjournal
Published: 2022-12-07 19:21:31

I always get a little excited each time the annual State of CSS survey rolls around because I can feel validated in what I know, and I can also discover new things I haven't heard about so I can learn them in the future. I took the 2022 survey almost immediately when it was released this year and my personal results made me feel demoralized:

![My State of CSS Survey results showing a 33% knowledge score (18 out of 54 features mentioned) ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45ennp9a6xbbcdpj5b0a.png)

I'd been scoring 70+% each time I'd taken previous surveys so I was surprised how low I scored this time. But there are a couple things going on here. First is the rapid speed in which new CSS features are rolling out to browsers now, which is a great thing. We won't have to wait for a "CSS4" spec; individual features are able to be implemented in browsers. 

The second factor is how web development requires constant learning. Hopefully you are able to keep up with at least some of the new features in your job, but I've worked in roles where this wasn't prioritized and it required personal time to keep up. It can also feel overwhelming even if you do have time to learn at work just on account of how many new features there are and where to start, and whether those new features have practical uses for what you're working on.

In the past few months I've been more proactive about my career and focusing more on CSS, so I'll be making a series specifically on features from this survey so I can learn and hopefully help you to learn as well. These will not be in any particular order, and there may be multiple articles about the same feature depending on the functionality. Overall I'm pretty excited to explore all these new CSS features. Let's do this!
Establish an SSH connection using AWS EC2 instance
Tags: ssh, cloud, aws, beginners
Published: 2022-12-07 18:50:04

# Introduction
- Before starting, see my previous post from [here](https://dev.to/aws-builders/start-a-jupyter-notebook-server-ke4)
- SSH tunnels allow you to connect to ports on a remote server through the encrypted SSH channel.
- This allows you to securely connect to ports on the remote server that you otherwise wouldn't be able to because of system firewall, or security group rules.
- In this post, you will establish an SSH connection with a tunnel from port 8000 to port 8888 on the remote server.
- This tunnel will allow you to connect from instance public IP to the Jupyter notebook server.


# Establish an SSH connection
### Step 1

Connect to your EC2 Instance:

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


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

### Step 2
Enter the following command and press Enter:

```
ssh -i key.pem ubuntu@localhost -fN -L 0.0.0.0:8000:127.0.0.1:8888
```

The -fN creates the tunnel in the background and the 0.0.0.0 tells it to listen on all interfaces instead of only 127.0.0.1/localhost so you can connect from the public IP

### Step 3
Enter yes to establish the connection:


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

Now, you connected to the remote server and established an SSH tunnel to forward a port on the remote server.


<br>
[GitHub](https://github.com/a00ayad00)
[LinkedIn](https://www.linkedin.com/in/a00ayad00)
[Facebook](https://m.facebook.com/a00ayad00)
[Medium](https://a00ayad00.medium.com/)
BlogsNark Provide best free guest posting service
Tags: guest, postin
Published: 2022-12-07 18:34:58

If you are looking for blog posting website, which offers guest posting for free, BlogsNark is the best choice for you. [BlogsNark Blogs Provide best guest posting](https://blogsnark.us/) opportunity for new websites, also for old one.

Its U.S based website. BlogsNark is the best and outmost choice for everyone. It will help you to do SEO of you website and help you to rank higher on google search results.
Quickest JS string generator
Tags: javascript, webdev
Published: 2022-12-07 17:44:45

If you need a string of a certain length but don't care so much about the content, this one-line function is just what you are looking for!

```javascript
const generateString = length => ''.padEnd(length, 'ABC123')
```

And you can create strings of any length without directly pasting a huge string.

```javascript
generateString(200)
'ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123ABC123AB'
```
Imposter Syndrome
Published: 2022-12-07 18:01:05

I have some doubts that plague me every day!
I've been studying for two years now, actually I started studying systematically this year... That said, I seem to be familiar with _html, css, js_ and some frameworks. I've been building projects on tutorials like _codecademy_ for example. But this week I came across something really disheartening. When I try to build something from scratch, with my knowledge, it seems that I can't move forward, it's like I know what's missing, but I don't know how to code... And that's very frustrating, when you were in that learning moment, you went through it? Or am I really less intelligent?
How to create a temporary PHP container for test
Published: 2022-12-07 17:55:24

**Requeriments**

- Must have docker installed.

**You can use the following tutorial to install docker**

[How to install docker on Ubuntu](https://cloudcone.com/docs/article/how-to-install-docker-on-ubuntu-22-04-20-04/)

**Open terminal and type de following code**

`docker run --rm -it php:8.1 /bin/bash`

**Or, if you would like to move files into the container use:**

`docker run --rm -it -v /origin_path_name/file_name.extension:/destination_path_name/file_name.extension php:8.1 /bin/bash`

**After that, you can find your file and execute it by typing:**

`php file_name`
Easiest way to add HMR in your chrome extension
Tags: javascript, webdev, hmr, chromeextensions
Published: 2022-12-07 17:48:09

When we try to build chrome extension,we notice that 
chrome don't auto-reload our extension.
We need to reload our extension and also tab.
In popup window, we need to close popup window then
re-open window to view change.
This is time consuming and frustrating job.
We,developer don't want to do repeatable job.

I found some plugins that attach with vite or webpack.
When i debug these plugins, i found that they just 
reload whole chrome extension for just small style change.
If i change some css property, these plugins reload injected page,
background page and popup window. I also need to re-open popup manually.

I have two options left:

1. Wait for somebody that create npm package for me. or,
2. Write own npm package.

I hate waiting so i decide to write own library and 
publish on npm to share with communities.

NPM package for HMR in chrome extension is:
[**Crx-hmr**](https://github.com/anilkumarum/crx-hmr)

This is not another plugin. It is standlone full HMR library.
It is dependencies-free package.

I will explain how to start with crx-hmr to save our time and system resources.

# what crx-hmr do ??

- Update changed file without reloading page or your extension.
- Support custom elements HMR.
- sass and pug supported (must be globally installed).

# Benefits

With **crx-hmr**, we don't need to do

- Manual reload chrome extension.
- Close and reopen popup window to view change.
- Need to refresh tab to view change.

# Scaffolding your first chrome extension with crx-hmr

### Tools You Will Need:

- Node installed on your computer. You can download Node at nodejs.org.
- A package manager called npm. It is automatically included in your installation of Node.
- A good code editor to work with our project files. I highly recommend using the editor Visual Studio Code. You can grab it at **code.visualstudio.com**.

First create project directory (folder).
Open terminal in this directory.
If window os, open vs-code or open git-bash.
Run this command

> npm create crx-hmr@latest

Once we run this command, Initial project structure will generated.

Now, install crx-hmr package: `npm install`.
For start server, run `npm start`.

Open chromium browser e.g chrome,brave,edge or vivaldi
Go to extensions page: `chrome://extensions`
Activate developer mode and click on **Load unpacked** button.
Pick this project directory and
Now start building extension.

# From source

crx-hmr has zero dependencies,It work without npm or package.json.
Grab client.js and server.js file from github [crx-hmr](https://github.com/anilkumarum/crx-hmr) 
then add client.js on chrome extension page.
rename server.js to server.mjs
For start server, run `npm start`


For contribute or create new issues, visit github page [crx-hmr](https://github.com/anilkumarum/crx-hmr).
Thanks for reading
Advent of Code 2022 - Day 7
Published: 2022-12-07 17:39:43

---
title: Advent of Code 2022 - Day 7
published: true
description: I'm trying to solve all the Advent of Code puzzles in this video series.
tags:
cover_image: https://i.ytimg.com/vi/RLYeKOTbEUI/maxresdefault.jpg
---

{% youtube RLYeKOTbEUI %}

I'm trying to solve all the Advent of Code puzzles in this video series.
React Components
Tags: beginners, programming
Published: 2022-12-07 17:38:45

Today we'll be talking about components built from react.
React is a library built for javascript and is very useful when it comes to building out web applications. 

A component built from react looks like this

```
const ReactComponent = () => {
return(
<div>
<p>Hello World</p>
</div>
)
}
```
It looks really simple and it is. This is useful because previously in javaScript you would have to write it all out individually telling it what the text content is and where to append it to. This way is faster and much easier to read than basic javaScript. Each component doesn't have to be that simple you can pass down props from the parent and use that to show data to the screen or for forms you can use callback functions to go up to the parent. You can also have what is called useState which can keep track of data from the user and update the web page based on that data.
React is very useful to everyone once you get to know it. React components
Useful beginner friendly hotkeys/commands
Published: 2022-12-07 17:28:00

What are Hotkeys ?
Also known as keyboard shortcuts, hotkeys are a combination of keys that carries out a function making it more efficient to type.

Why use Hotkeys ?

- You can increase your productivity and accomplish more tasks by using the keyboard instead of mouse
- Extensive mouse usage is associated with R.S.I. (Repetitive Syndrome Injury) much often than the keyboard usage. By alternating mouse and keyboard usage you can reduce the risks of R.S.I. and reduce the fatigue your wrists and fingers.
- When doing a lot of text-editing it is more accurate to handle through keyboard shortcuts


Basics 👍 :

![Basics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ea1lv720u0irjt4wzoa.png)



Useful 👩‍💻 :
![Extra Helpful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/marv891j976j1l4o69xs.png)

Funsies 🥳 :

![For Fun](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bttd13b59lkiaun12rkw.png)

Directory 🗂️ :
![Directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnthr1ij1jxuvua3lgmj.png)
Avoiding Common Pitfalls when Working with React JS 🚫
Tags: javascript, webdev, beginners, react
Published: 2022-12-07 16:39:48

React JS is a powerful and popular JavaScript library for building user interfaces, but like any technology, it has its own set of challenges and potential pitfalls. In this blog post, we'll look at some of the most common mistakes and pitfalls to avoid when working with React JS in order to help you get the most out of this powerful tool. 

## 💻 Using React as a One-Size-Fits-All Solution

One of the most common mistakes that people make when working with React is trying to use it as a one-size-fits-all solution. React is a powerful tool, but it's not suitable for every situation. In particular, React is best suited for building user interfaces, and it's not as well-suited for tasks like data processing or routing. If you try to use React for tasks that it's not well-suited for, you may run into performance issues or other problems. 

## 🧠 Not Understanding How React Works

Another common mistake is trying to use React without a thorough understanding of how it works. React uses a concept called the virtual DOM, which allows it to efficiently update the user interface based on changes in the underlying data. If you don't understand how the virtual DOM works, you may run into problems when trying to manage state or update the user interface. 

## 🔨 Ignoring the Ecosystem of Tools and Libraries

Additionally, many people make the mistake of trying to use React without learning about its ecosystem of tools and libraries. React is just a piece of the puzzle, and in order to build a complete application, you'll need to use a range of tools and libraries like [Redux](https://redux.js.org/) for state management, [React Router](https://reactrouter.com/en/main) for routing, and many others. If you don't take the time to learn about these tools and how to use them properly, you may run into difficulties when building your React applications. 

## 🗂️ Poor Code Organization

Finally, one of the most common pitfalls when working with React is poor code organization. React applications can quickly become complex, with many different components, state changes, and interactions between different parts of the application. If you don't take the time to organize your code and structure it properly, your application can quickly become difficult to maintain and debug. 

In conclusion, React JS is a powerful tool for building user interfaces, but it's important to avoid common pitfalls and mistakes in order to get the most out of it. By understanding the limitations of React, learning about its ecosystem of tools and libraries, and organizing your code properly, you can avoid many of the common problems and challenges when working with this powerful JavaScript library.

---

Thank you fam for reading!!! 
Have a great day 😊
Scary AI, Linux, and Simping For Elon | Casual Coders Podcast
Tags: podcast, programming, ai, linux
Published: 2022-12-07 16:38:16

{% embed https://open.spotify.com/episode/6EXI22si9Ki3RupJWHk0oF?si=scWqmUJzQn-Gf78ABj9kGw %}

This week on the Casual Coders Podcast, we discuss ChatGPT, Linux, Twitter, and Neuralink!

Follow Casual Coders:

Twitter | https://twitter.com/CasualCoders

Facebook| https://www.facebook.com/CasualCodersProjects

TikTok | https://www.tiktok.com/@casualcoders

Twitch | https://www.twitch.tv/casualcoders

Insta | https://www.instagram.com/casualcodersprojects/

YouTube | https://www.youtube.com/channel/UCmkQBj1JyI0x53fn81L-EbA
💡Luos is looking for native testers
Tags: opensource, testing, native, luos
Published: 2022-12-07 16:31:56

We have been working on a Luos native these past couple of months and are looking for embedded developers that would like to test it. 

The native gives you the possibility to compile Luos on your computer and test lines of code natively without needing to plug in any additional boards. 

If that is something that you would like to try, let us know either by commenting on this post or through a discord message on our community [server](https://discord.com/channels/902486791658041364/902486791658041369) in the #general channel!
My Journey for finding a new job (and a new country/home)
Tags: jobsearching, emigrat, webdev
Published: 2022-12-07 16:28:25

_Hi dev.to Community!_

![Beautiful Sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsj4uzdjd8cugaw5rn3b.jpg)
This is my first post for dev, and I am really excited about this step, if this will work now. I am 29 and work now for around 10 Years as Full Stack Developer, Lately specified on consulting real big German companies. 
I was already travelling a lot, especially around South-East Asia, and I actually fell in the love with these beautiful companies, and the people there. So this plan came in my head! 

Since we Dev's are really gifted, in sense of, we can live/work nearly from everywhere and if there is internet and some economy as well is enough for us to work there! Since I really want this to happen I made up some plans, so I hopefully can live soon underneath palms and writing my cloud software :)

Now it's getting Concrete, and I am really looking forward to it finally fulfil my dream, maybe temporary or even live forever in ! Wish me good luck :) Dev are united all over the globe

Here is my [Resume/CE(](https://drive.google.com/file/d/1-G8Z85srYSRppAEDd6sLO7juGN0T_-iW/view?usp=share_link) 🌐
[Blog is currently under construction, soon blog.markuswagner.dev](https://cloudcrusader.blogspot.com/)
[Notion Portfolio 70% done](https://djdiox.notion.site/Smart-Portfolio-c8bab2befcb843d18e0b0cf4f8d4879d)

Hahaha before I forget [LinkedIn](https://www.linkedin.com/in/markus-wagner-ab1348160/?locale=en_US)

Great Regards,
Markus
Web3 Developers, which real-world data oracle would you want?
Tags: web3, blockchain, rust, webdev
Published: 2022-12-07 16:27:58

Chainlink has gone a long way in fueling the DeFi ecosystem, however connecting dApps with [trusted] real-world data can open to much broader opportunities for Web3 developers.

With tools like the W3bstream framework, decentralized computational Layer-2 networks can be created to serve "_proofs of anything_" to the Web3. 

As a Web3 developer, what real-world (**trusted**) data would you like to use when building your next dApp?

- 🗺 Proofs of User's GPS location
- ⛹🏻‍♀️ Proofs of User's health activity
- ⛈ Trusted Weather data contribution 

Please vote on this Twitter poll: 👇https://twitter.com/iotex_dev/status/1600172128548323328?s=20&t=HFesgEOmv8xQPGgtTvYjNQ