teleren/devto huggingface dataset:
How to stay up-to-date with the latest tech and trends
Published: 2023-04-27 15:45:44

Hello community!
I'm new to this great platform, dev.to, and I'm looking forward to your kind help and assistance. This is my first post, and I'm here to exchange opinions with you on how to stay up-to-date with the latest technologies and trends. 
Nowadays, many innovative techniques and new trends emerge from time to time. As an enthusiastic learner and passionate software developer, I want to access every necessary "asset" as soon as possible. 
How can I do that?
BlazeJS v2.6.2 released!
Tags: blazejs, meteor, javascript
Published: 2023-04-27 15:45:24

A patch release for [BlazeJS](https://www.blazejs.org/) has been released.

This is a small patch release fixing two issues and moving TypeScript types into core for more comfort:

* Add TS types to core
* Stop establishing unnecessary reactive dependencies
* Fixes for legacy clients

Many thanks to [Gabriel Grubba](https://github.com/Grubba27), [Denis Perov](https://github.com/imajus) and [Zodern](https://github.com/zodern) for contributing to this release!

Next step is Blaze v3 which is [in works](https://github.com/meteor/blaze/pull/387). Version 3 will follow in MeteorJS transition away from Fibers and supporting async methods while maintaining all the things you love about Blaze. You can also expect updated dependencies and some speed improvements (when it comes fragment parsing). More things are in works, so make sure to check the [Blaze 3.0 milestone](https://github.com/meteor/blaze/milestone/6) for more details.

--------
If you like my work, please support me on [GitHub Sponsors ❤️](https://github.com/sponsors/StorytellerCZ).
Drop-Shadow
Tags: webdeveloperblogs, dropshadow, css, javascript
Published: 2023-04-27 15:36:48

> CSS drop shadows are a popular design technique used to add depth, dimension, and realism to elem...

[
![drop-shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ssr8qstgpfrd5g79y3tj.png)](https://www.webdeveloperblogs.com/2023/04/drop-shadow.html)
How to Increase CSS Class Selector Specificity to Beat the ID Selector Without Using Important
Tags: css, webdev, tip
Published: 2023-04-27 14:53:13

Recently, while working on some legacy code, I had to figure out how to overwrite ID selector styles without using `!important`.

The CSS was similar to this

```html
<div id="parent">
  <div class="child">Content</div>
</div>

<style>
  /* specificity 100 + 10 = 110 */
  #parent .child {
    color: red;
  }

  /* specificity 10 */
  .child {
    color: yellow;
  }
</style>
```

This results in a text with red color, but in my case, I needed to make the text yellow.

Normally, I would just refactor the CSS and HTML, but in this case, I couldn’t change the HTML and order of CSS due to some legacy code.

The easy solution would be to use an infamous `!important` keyword to overwrite everything, but I didn’t want to go that way.

### Using attribute selector

The better way is to change the ID selector to the attribute selector. Instead of `#parent` it's possible to use `[id="parent"]`. This has the same specificity as a class selector.

Now instead of specificity `110`, it is down to `20`.

```css
/* specificity 10 + 10 = 20 */
[id="parent"] .child {
  color: red;
}

/* specificity 10 */
.child {
  color: yellow;
}
```

### Chaining the selector with itself

Now I had to increase the `.child` specificity above 20 to beat the `[id="parent" .child"` selector. One way to achieve that is to **chain the class selector with itself**.

The specificity of `.child` is 10. The specificity of `.child.child.child` is 30.

```html
<div id="parent">
  <div class="child">Content</div>
</div>

<style>
  /* specificity 10 + 10 = 20 */
  [id="parent"] .child {
    color: red;
  }

  /* specificity 10 + 10 + 10 = 30 */
  .child.child.child {
    color: yellow;
  }
</style>
```

This is an easy way to bump up specificity without adding additional classes or knowing about the context where the item will be placed.

I find this better than using `!important`, but it is still a hack. If possible, try to avoid this.
Resolvendo problemas no HackerRank: Trilha de pedras
Tags: javascript, beginners, programming
Published: 2023-04-27 14:42:34

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, vamos ajudar Manasa a achar um tesouro escondido no caminho final a uma trilha de pedras. Vejamos mais informações com a explicação e sua resolução.

**Manasa and Stones -**

Manasa está em uma caminhada com amigos. Ela encontra uma trilha de pedras com números nelas. Ela começa a seguir a trilha e percebe que quaisquer números de duas pedras consecutivas diferem em um dos dois valores. Diz a lenda que existe um tesouro no final da trilha. Se Manasa adivinhar o valor da última pedra, o tesouro será dela.

Exemplo

- n = 2
- a = 2
- b = 3

Ela encontra 2 pedras e suas diferenças são a = 2 ou b = 3. Sabemos que ela começa com uma pedra 0 não incluída em sua contagem. As permutações de diferenças para as duas pedras são [2,2], [2, 3], [3,2] ou [3, 3]. Olhando para cada cenário, as pedras podem ter [2, 4], [2, 5], [3, 5] ou [3, 6] nelas. A última pedra pode ter qualquer um dos 4, 5 ou 6 em sua face.
Calcule todos os números possíveis que podem ocorrer na última pedra dada uma pedra inicial com um 0, um número de pedras adicionais encontradas e as possíveis diferenças entre pedras consecutivas.

Vejamos o código a seguir:

```
function stones(n, a, b) {
    // Write your code here
  const result = new Set();
  
  for (let i = 0; i < n; i++) {
    const max = Math.max(a, b) * (n - 1 - i);
    const min = Math.min(a, b) * i;
    result.add(max + min); 
  }

  return Array.from(result).sort((x, y) => x - y);
}
```
Começamos criando uma variável que terá como recebimento o Set() que irá guardar valores únicos de qualquer tipo. Logo em seguida criamos um laço `for`onde o index irá adicionar 1, toda enquanto ele for menor que `n`. Criamos a const max que irá pegar o valor máximo apresentado nos parâmetros `a`e `b` e multiplicar por `n`-1 - o index do momento. Faremos uma const min que irá fazer o contrário mas irá apenar multiplicar pelo index. E por último adicionamos os valores descobertos na variável `result`.

Finalmente retornamos um Array tendo o valor de `result`.

O resultado será:

```
2       T = 2 (test cases)
3       n = 3 (test case 1)
1       a = 1
2       b = 2
4       n = 4 (test case 2)
10      a = 10
100     b = 100
Sample Output

2 3 4 
30 120 210 300 
```

Assim, concluímos mais um _Resolvendo problemas no HackerRank:_ até a próxima.
Developer content can be too approachable
Tags: devrel, marketing
Published: 2023-04-27 14:39:43

Controversial take: Content (especially for developers and sysadmins) can be TOO approachable. 

This might be an uncomfortable idea at first. For most marketers, approachability is a key value and one of the first things they’ll think about when writing a post.

Does it use language a middle school student uses? 

Does it define and explain every term? 

Does

it

have

enough 

line breaks?

But this lens just doesn’t work for some readers. Or at least, you need to bend the lens a little bit. 

I first learned this lesson at TechTarget. There, my role was part writer, part reporter, part content marketer. My target audience was narrow. And I mean *narrow*. 

They weren’t “technical folks” nor “sysadmins” but “sysadmins specializing in the usage of virtual machines” (or even more narrow still, virtual machines from a particular company — VMware). 

The content only worked when the information was as narrow as the target audience. The best example of this in practice was terminology. We had a whitelist of terms we should define and a blacklist of terms we *shouldn’t* define. 

At the top of the blacklist, for my site, was “virtual machine.” I wrote tens of thousands of words about virtual machines at TechTarget and never used the term. Instead, I used the abbreviation our audience used: VM. 

The lesson here, which you can apply beyond abbreviations, is that approachability can actually signal a lack of familiarity, and a lack of familiarity can signal bad content (or at least content that is too superficial or basic). 

I understand the objection: Wouldn’t more approachable content be readable by more people?

Well, no. And also no.

No 1️⃣: If you want to create content for newbies, you’ll only succeed if you do that from the start. If you write content for advanced readers and then explain a bunch of stuff the advanced readers already know, you’ll drive the experts away and likely fail to capture the newbies too.

No 2️⃣: Like it or not, approachable content cues readers — especially already skeptical ones — to bounce. If your content is too approachable, readers won’t skim by the basics; they’ll actually close out the tab. 

And we don’t have to rely on stereotypes of the weird alien developer with an exaggerated hatred for marketing to understand why. 

If you’re a writer and you find an article about advanced writing tips, you are not going to continue reading if the article starts off by defining what an article introduction is. 

If you’re a founder and you find an article about how best to seize on the emerging AI trend, you are not going to continue reading if the article explains what an MVP is. 

If you’re a journalist and you find a guide to interviewing important politicians, you are not going to finish it if the article explains why interviews are important. 

It will feel bad at first. Even wasteful. But I promise a shorter article that’s based on research you’ve done but not explained will connect better with an advanced, technical audience.
Apache AGE Installation Guide (Linux)
Tags: postgres, apache, age
Published: 2023-04-27 13:59:19

This is a guide divided into multiple parts aimed at setting up Apache AGE and PostgreSQL on your Linux OS using the source code. 

## Establishing Directories and Installing Dependencies
Create directories to save and install AGE and PostgreSQL.

```
mkdir age_installation
cd age_installation
mkdir pg
cd pg
```

## Dependencies
Dependencies are resolved before the installation is to be commenced.

```
sudo apt-get install build-essential libreadline-dev zlib1g-dev flex bison
```

Development files for PostgreSQL server-side programming are also installed.

```
sudo apt install postgresql-server-dev-11
```

## Installing PostgreSQL From Source
An AGE-compatible version of Postgres i.e postgres 11 and 12 are downloaded and extracted in the working directory.

```
wget https://ftp.postgresql.org/pub/source/v11.18/postgresql-11.18.tar.gz && tar -xvf postgresql-11.18.tar.gz && rm -f postgresql-11.18.tar.gz
```

Once the download is complete, PostgreSQL is installed.

```
cd postgresql-11.18

# configure by setting flags
./configure --enable-debug --enable-cassert --prefix=$(pwd) CFLAGS="-ggdb -Og -fno-omit-frame-pointer"

# now install
make install

# go back
cd ../../
```

## Installing AGE
AGE is downloaded and installed from the Apache AGE GitHub repository.

```
git clone https://github.com/apache/age.git
```

```
cd age/

# install
sudo make PG_CONFIG=/home/tukl/age_installation/pg/postgresql-11.18/bin/pg_config install

# install check
make PG_CONFIG=/home/tukl/age_installation/pg/postgresql-11.18/bin/pg_config installcheck
```
PG_CONFIG requires the path to the pg_config file. Give the path from the recently installed PostgreSQL.

## Concluding Remarks
Apache AGE and PostgreSQL has been successfully installed from source on your Linux machine.
Construindo uma Aplicação Multilíngue em React Native.
Tags: reactnative, mobile
Published: 2023-04-27 13:55:55

**Desenvolvendo Aplicativos Multilíngues em React Native**

Atualmente, é comum a necessidade de desenvolver aplicativos móveis multilíngues em diversos projetos. Neste artigo, vamos explorar como criar uma aplicação multilíngue utilizando o framework React Native. Utilizaremos bibliotecas populares, como react-i18next e i18n-js, para gerenciar as traduções e permitir a alternância entre diferentes idiomas.

**Pré-requisitos**

Antes de começar, é importante garantir que o ambiente do React Native esteja configurado corretamente em seu sistema. Isso inclui a instalação dos seguintes componentes:

- Node.js
- React Native CLI
- Android Studio

**Configurando o Projeto**

Vamos começar criando um novo projeto React Native. Abra o terminal e execute o seguinte comando:

```
npx react-native init MultiLanguageApp
```

**Instalando as Dependências**

Agora, vamos instalar as dependências necessárias para o suporte multilíngue. No terminal, execute o seguinte comando:

```
npm install i18n-js react-i18next
```

Essas bibliotecas nos ajudarão a gerenciar as traduções e fornecerão os recursos necessários para alternar entre diferentes idiomas em nosso aplicativo.

**Configurando as Traduções**

Crie uma nova pasta chamada "locales" na raiz do projeto. Dentro dessa pasta, crie um arquivo "en.json" para as traduções em inglês e um arquivo "pt.json" para as traduções em português. Adicione o seguinte conteúdo aos arquivos:

**en.json:**

```
{
  "welcome": "Welcome to MultiLanguageApp!",
  "greeting": "Hello, {{name}}!"
}
```

**pt.json:**

```
{
  "welcome": "Bem-vindo ao MultiLanguageApp!",
  "greeting": "Olá, {{name}}!"
}
```

**Configurando o Arquivo de Configuração de Tradução**

Crie um novo arquivo chamado "i18n.js" na raiz do projeto. Adicione o seguinte conteúdo ao arquivo:

```javascript
import i18n from 'i18n-js';

import en from './locales/en.json';
import pt from './locales/pt.json';

i18n.defaultLocale = 'en';
i18n.locale = 'en';
i18n.fallbacks = true;
i18n.translations = { en, pt };

export default i18n;
```

**Configurando a Interface do Usuário**

Dentro do componente funcional `App`, importamos o hook `useTranslation` da biblioteca `react-i18next`. Esse hook nos permite acessar as funcionalidades de tradução em nosso aplicativo.

Em seguida, definimos uma variável de estado `name` usando o hook `useState`. Essa variável será utilizada para armazenar o nome inserido pelo usuário.

Dentro do componente, utilizamos o hook `useTranslation` para obter acesso às funções de tradução `t` e `i18n`. A função `t` é utilizada para traduzir as mensagens com base no idioma atualmente selecionado.

A seguir, temos dois componentes `Text` que exibem a mensagem de boas-vindas e o cumprimento. As mensagens são passadas para a função `t` para ser
You can't build a Dapp without creating a Smart Contract, right? Wrong!
Tags: blockchain, solidity, web3, ethereum
Published: 2023-04-27 13:55:18

We all know that building Dapps and writing Smart Contracts is a slow and costly process. It also requires in-depth Solidity expertise...well, that's all a myth!

How about winning $30,000 in prizes while demystifying that notion?

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

[Kirobo](kirobo.io) has created a framework that allows you to launch any Dapp in minutes, not months... we'll show you how at the Kirobo Hackathon in Lisbon, May 11 2023. 
We've developed the Future Conditional Transactions (FCT) solution, which clears the way for you to create anything you can imagine on the blockchain. And the best part? You don't even need to develop, deploy or audit a single Smart Contract!

Apply for our ETH Global Lisbon Hackathon and get the chance to build a mini-Dapp using Kirobo's SDK system framework. 🚀


**Details** 👇
✅[Sign up link](https://share-eu1.hsforms.com/1bcT2br11Q1iuhR0zDPqHbQfc8j3)
💻Who: Full stack Web3 & Solidity devs
📆When: May 11 2023 - an ETH Global pre-event
📍Where: [42 Lisboa](https://goo.gl/maps/FRcnwXT8jXtFnqUy7)
💻Who: [Kirobo](http://kirobo.io/)

For any question, please contact adam@kirobo.io 🚀🔥

Don't forget to join our Discord community and Telegram Group!

See you there!
Manage and Assigning a Specific role To a Resource group in Azure
Tags: webdev, azure, microsoftcloud
Published: 2023-04-27 13:48:44

**Manage and Assigning a Specific role prevents an authenticated user from gaining and unauthorized job role is an azure Account It allows the authenticated User to access only specific role he/she is assigned to in order to perform their job  **




**Step 1**

Go to search bar, Search and Click on Resource Group


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

**Step 2**

Select and Click on the desire Resource Group you would like to lock


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

**Step 3**

To the left side of the screen click and Select **Access Control**


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



**Step 4**

Click and Select Add

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

**Step 5**

Select and Click on Assign Role 


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

**Step 6**

Select Job function and Click on Next


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


**Step 7**

Pick or Search for your suited  Assign Role and Click next

*In my case i´ll be showing **Virtual Machine Contributor**


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



**Step 8**

Click on Select members and on the right slide pop up window add member with Email then click Select

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

**Step 9**

Click and Select Review + Assign


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

**Step 10**

Congratulations

Your role has been Assigned now the assigned user will only be able work within his job bracket

**NOTE**: 
That will be the end Make sure to always delete Azure Resource when they are not in use

**Enjoy!!!!!**
System Design Interviews: A step-by-step guide
Tags: webdev, programming, systemdesign, systems
Published: 2023-04-27 13:48:14


System Design Interview is unstructured in which people are asked to answer open-ended design questions.
What could be a good strategy to answer a system design question? Follow these seven steps:

➡ **Step 1: Requirements clarifications**
1) Make sure you know the exact scope of the system by asking questions.
2) Start the interview by asking a few questions.
3) Not all things can be clarified at the beginning; keep asking clarifying questions throughout the interview.

➡ **Step 2: Back-of-the-envelope Estimation**
1) Establish a reasonable estimate of the size of the system you wish to design.
2) Try estimating the resources (storage, CPU, memory, network, etc.) required to build the system.
3) Later, this will help when you focus on scaling, partitioning, load balancing, caching, etc.

➡ **Step 3: System Interface Definition**
1) Describe the interfaces of the system.
2) Define what APIs are expected from the system.
3) This will not only establish the exact contract expected from the system but also ensure that you have not gotten any requirements wrong.

➡ **Step 4: Define Data Model**
1) Define the data model, what tables the system will have and what fields each table will contain.
2) Defining the data model will also clarify how data will flow between different components.
3) Later, this will guide the partitioning and management of data.

➡ **Step 5: High-level Design**
1) Draw a block diagram with 5–6 boxes representing the core components of your system.
2) Identify enough components that are needed to solve the design problem from end to end.

➡ **Step 6: Detailed Design**
1) Dig deeper into 2–3 major components.
2) Interviewer’s feedback should always guide you towards which parts of the system you should explain further.
3) Describe various options, their pros and cons, and why you chose one over the other.

➡ **Step 7: Identifying and Resolving Bottlenecks**
1) Identify and discuss as many bottlenecks as possible.
2) A few examples of bottlenecks are the single point of failure, network transfer rate, I/O rate, CPU and memory limits, etc.
3) Describe different ways to mitigate the bottlenecks.
Install wails on linux
Tags: apacheage, go, wails, installation
Published: 2023-04-27 13:39:49

to install wails you need to install Go first

if you have not installed you can install using following commands.

```
sudo apt update
sudo apt install golang-go
```

if you face difficulty while installing Go you can refer to this tutorial: 
[How to install go on ubnuntu](https://dev.to/farooquememon385/install-go-language-on-ubuntu-4ojh)

check go installation:

`go version`

_if go version 1.18 or greater is installed then move forward._

Linux requires the standard **_gcc_** build tools plus _**libgtk3**_ and _**libwebkit**_

if these are not installed in your system you can install using following commands:

```
sudo apt-get update
sudo apt-get install gcc libgtk-3-dev libwebkit2gtk-4.0-dev
```

## Installing Wails

now run the following command:

`go install github.com/wailsapp/wails/v2/cmd/wails@latest`

**go version should be 1.18+**

## System Check

Running `wails doctor` will check if you have the correct dependencies installed. If not, it will advise on what is missing and help on how to rectify any problems.

## installation check
to check the installation or version run the following command in terminal.

`wails version`

it will display the version of wails

## The wails command appears to be missing?

If your system is reporting that the wails command is missing or giving the error _command 'wails' not found_ the it is probably due to go/bin directory is not added in the PATH variable

**if you don't get this error you can skip this section.**

to add that first you need to know in which directory the Go is installed in

_to find that you can run the following command in the terminal._

`go env GOPATH`

it will display the path where Go is installed in

let say the path in home/[username]/go

follow these steps to home/[username]/go/bin/ in PATH environment

1. opened the terminal

2. open the ~/.bashrc file
  `nano ~/.bashrc`

3. go to bottom of the file and add following line

   `export PATH=$PATH:/home/[username]/go/bin/`

_**you should use the actual path of go/bin folder where the go is installed**_

don't forget to add / at the end

4. Press Ctrl + X to exit nano editor, and type "Y" to save changes.

5. Finally run the following command

   `source ~/.bashrc`

PATH is successfully added

now you can check the installation using the command
`wails version`

I hope it will work correctly.

## Apache AGE
Apache AGE uses Go and its framework wails in **[AGE Viewer Desktop (Go)](https://github.com/apache/age/tree/ageviewer_go) Project**

**visit Apache AGE:**

[Official Site](https://age.apache.org/)

[Apache AGE Github](https://github.com/apache/age/)
Creare Magazin Online
Published: 2023-04-27 13:38:51

În era digitală în care trăim astăzi, afacerile trebuie să fie prezente pe internet dacă doresc să supraviețuiască și să crească. Acest lucru este valabil și pentru companiile din Timișoara, care trebuie să fie la fel de competitive ca și celelalte afaceri din țară și din străinătate. [Crearea unui magazin online](https://rocketweb.ro/creare-magazin-online/) este o modalitate esențială prin care aceste companii pot atrage noi clienți și își pot extinde afacerile.