teleren/devto huggingface dataset:
Como instalar o Node.js no meu computador?
Tags: node, tutorial, programming, beginners
Published: 2024-02-08 20:31:57

Arregace as mangas 🥭 e vamos começar. O primeiro passo é acessar https://nodejs.org/en. Para Windows e Mac, o processo é o mesmo. Para distribuições Linux, o processo muda um pouco, mas explicarei isso mais adiante. 🏃🏽‍♀️

## Instalando o Node.js no Windows ou MacOS

Uma dúvida comum é sobre as duas opções, LTS e Current. Basicamente, LTS significa Long-Term Support, ou Suporte de Longo Prazo, que é **uma versão mais segura e estável do Node**. A opção Current é a versão mais recente, com recursos mais recentes, mas que pode ainda conter alguns bugs. Eu sempre recomendo baixar a versão mais estável, a LTS.

![Site oficial do Node.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfwp2eyn3o5c8hs7pn0u.png)

Ao abrir o Node.js Setup, o programa de instalação, prossiga e clique em 'Next' com força e depois ‘Install’. Nessas etapas ele instalará o Node.js, adicionará a documentação e o gerenciador de pacotes do Node, o npm, ao Path do seu sistema operacional. Dessa forma, você poderá acessar o Node pela linha de comando. O npm é muito útil aqui para baixar as bibliotecas do Node, por isso vamos instalar ele. E se esta parte não está totalmente clara, os próximos artigos irão esclarecer para você.

![Node.js Setup no Windows, no MacOS é semelhante.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7l4wupiwtfpwx24opmsx.png)

Abra o Prompt de Comando/Terminal do seu computador, digite `node -v` e se aparecer na linha debaixo a versão, significa que tudo deu certo! O Node.js está instalado com sucesso no seu computador. 💃🏾

![v18.15.0 do Node.js indicando no terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4n1cvqwmwue4sehedsq.png)

## Instalando o Node.js para distribuições Linux

Acesse https://nodejs.org/en/download e vá até o final da página e clique na opção 'Installing Node.js via package manager’ como mostra a imagem.


![Página de download do nodejs.org](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqokca66yyfsy0zkaran.png)

Ao acessar esta página, você encontrará diversos tutoriais para vários sistemas operacionais, incluindo distribuições Linux. Ao clicar neles, será apresentado um tutorial específico para instalação.

![Arch Linux, Debian, Ubuntu, openSUSE e diversos outros.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i2y7y12mba70wi286nq.png)

Siga o tutorial adequado para o seu sistema operacional. Acesse o Terminal ou a Linha de Comando do seu computador e, assim como no Windows e MacOS, digite `node -v`. Se a versão aparecer, significa que o Node está instalado com sucesso na sua máquina! 🕺🏼

Qualquer dúvida, manda aqui nos comentários. 💕 Agora que estamos com o Node.js instalado, vamos baixar um bom editor de código e finalmente dar nossos primeiros passos. 🌈
Routing in React
Published: 2024-02-08 20:12:09

Routing refers to the process of navigating between different pages without triggering a full page reload. It allows coders to create dynamic elements in a page, while keeping components that you want in every page like a nav bar or a footer. here is an example of routing:

```
const router = createBrowserRouter([
  {
    path:"/",
    element: <Root/>,
    children:[
      {
        path:"/",
        element: <Welcome/>
      },
      {
      path: "/about",
      element:<About/>
    },
  {
    path:"tea",
    element:<Teas/>
  }]
  }

])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
);
```
In this file we are defining what the url paths look like and what to components(elements) to show when we go to that url. For example the opening page will provide the <welcome/> element signified by the "/" path, while the /about will show the <About/> component when directed to that url. In our root file we define what is static (our Nav bar) throughout the pages and what will change with the <Outlet/> component,

```
import Nav from "../nav"
import { Outlet } from "react-router-dom";
export default function Root() {
  return (
    <div>
      <Nav />
      <Outlet />
    </div>
  );
}
```
Automatic light/dark theme with CSS
Tags: css
Published: 2024-02-08 20:10:23

---
title: Automatic light/dark theme with CSS
published: true
description: how to provide at least two basic color configurations for a web page, a default light set and another for a dark theme.
tags: css
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-02-08 20:08 +0000
---

Nowadays, it is expected that web pages change automatically between a light and a dark theme based on the user's desktop theme. Therefore, we, as developers, should provide at least two basic color configurations, a default light set and another for a dark theme.

One way to accomplish that expectation is by setting the style sheet with variables to define the basic colors used in the web page, and a media selector to detect the user's default desktop theme.  Below, an example of implementing this solution is shown.

**Color variables for the light theme:**

    :root {
        --body-bgcolor: white;
        --body-fgcolor: #333;
        --link-color: #4169E1;
    }

**Alternate color variables for the dark theme:**

This ones are defined inside a media selector.

    @media (prefers-color-scheme: dark) {
        :root {
            --body-bgcolor: #111;
            --body-fgcolor: #ccc;
            --link-color: #B0E0E6;
        }
    }

**Using variable definitions in element and class selectors:**

    body {
        background-color: var(--body-bgcolor);
        color: var(--body-fgcolor);
    }

    a { 
        color: var(--link-color); 
    } 

    input {
        background-color: var(--body-bgcolor);
        color: var(--body-fgcolor);
    }

In the previous example, the light color set has three variables: for the background, the text color, and the link color. The media selector uses the feature `prefers-color-scheme` to detect if the user is using a dark theme. If that is the case, variables are redefined. Finally, element and class selectors are configured using these variables.

Resource:

* MDN Web Docs: [prefers-color-scheme  ](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
Client Side Rendering VS Server Side Rendering
Published: 2024-02-08 19:50:03

SSR vs CSR :-

Our browser only understands HTML, CSS, and JavaScript. All the code we write, all the frameworks, libraries, and everything else, are ultimately converted into HTML, CSS, and JavaScript because that is what our browser can understand.

Now, let's examine client-side rendering. When we deploy our website code, it is saved on a server. Whenever we request a web page, the server sends the entire code bundle, which includes HTML, CSS, and JavaScript.
This code bundle is then rendered in our own browser, and the page is shown to us. The gap between the request and the rendered page is a few milliseconds or sometimes even seconds. This delay is not great for SEO.

On the other hand, in Server Side Rendering, when we request a web page, the entire code is first rendered on the server, and then , only HTML and sometimes a few JavaScript codes are sent to our browser. This HTML code is instantly shown on our screen,eliminating the delay between the request and the rendered page.

What's cool with Next.js is that you choose which part of your app renders on the server side and which on the client side. By default, everything is server rendered.If you want something on the client side, just write "use client" at the top of that file.

Here's a quick breakdown of server and client-side components:
Server:
1. Fetching data
2. Accessing the backend
3. API access, etc.

Client:
1. In actions like onClick, onChange, useState, useReducer, useEffect.
2. Involves browser-only APIs, hooks, React class components.
How to run an AWS CIS v3.0 assessment in CloudShell
Tags: turbot, steampipe, aws, cloudsecurity
Published: 2024-02-08 19:42:32

AWS CloudShell makes it easy to spin up a terminal right in your AWS account. Since CloudShell is just like any other terminal, you have the ability to bootstrap other tools without the need to spin up an instance.

In a [prior post](https://dev.to/aws-builders/instantly-query-aws-with-sql-in-cloudshell-hd0) I showed how to install [Steampipe](https://steampipe.io/) in AWS CloudShell to instantly query over 460+ resource types from your AWS APIs using SQL, and [another post](https://dev.to/aws-builders/how-to-perform-a-security-audit-of-your-aws-account-in-aws-cloudshell-2jn1) on how to use the [Steampipe AWS Compliance mod](https://hub.steampipe.io/mods/turbot/aws_compliance) to assess over 25+ security benchmarks across your AWS accounts.

In this post we are going to show how to run the latest [AWS CIS benchmark v3.0](https://steampipe.io/blog/cis-v30-aws-benchmark) in AWS CloudShell.

## How to run an AWS CIS v3.0 assessment

**Here's how to get started:**
If you've already completed steps 1 - 3, skip to step 4:

**1. Install Steampipe**
```
sudo /bin/sh -c "$(curl -fsSL https://raw.githubusercontent.com/turbot/steampipe/main/install.sh)"

```

**2. Install the AWS plugin**
```
steampipe plugin install aws
```

**3. Install the AWS Compliance Mod**
```
git clone https://github.com/turbot/steampipe-mod-aws-compliance
cd steampipe-mod-aws-compliance
```

**4. Run the AWS CIS v3.0 benchmark:**
```
steampipe check aws_compliance.benchmark.cis_v300
```

There are over 60 controls in that benchmark, so the command produces many screenfuls of output, here's the last one:

![Steampipe AWS CIS v3.0 benchmark assessment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k0ttvu8zexqffjh56vqg.png)

## Export and Review the Findings
The summary is helpful, but you may want to digest the full report in varying formats. You can export to `CSV`, `Markdown`, `HTML`. Example of an `HTML` format:

```
steampipe check aws_compliance.benchmark.cis_v300 --export=output.html
```

Using `Files -> Download File` in AWS CloudShell's `Actions` menu, you can download your output file `steampipe-mod-aws-compliance/output.html` and work with it locally. 

Here's what the HTML report looks like:

![Steampipe AWS CIS v3.0 benchmark assessment - HTML Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw1b4vh2nxcx51gl4fr9.png)

## Final Thoughts
I really enjoy using AWS CloudShell + Steampipe for these type of quick win use cases within an AWS account. It's remarkably easy to install your CLI tools like Steampipe, with no configuration required and instant gratification! 

CloudShell is just one place to run Steampipe in AWS, beyond ECS containers, EC2 instances and AWS Workspaces, you can also run Steampipe in [Cloud9](https://steampipe.io/docs/integrations/cloud9) and [CodeBuild](https://steampipe.io/docs/integrations/aws_codebuild).

Try [Steampipe](https://steampipe.io/downloads) for other AWS use cases, and let me know how you go.
O que é o Node.js?
Tags: webdev, javascript, beginners, node
Published: 2024-02-08 19:24:08

Antes de entender o Node.js, precisamos saber o que é **JavaScript**. Essa linguagem de programação faz uma página web ser dinâmica e interativa. Cada navegador tem um interpretador para processar o JavaScript. O Node.js nada mais é que um **interpretador JavaScript**, que permite que o JavaScript seja usado fora do navegador. 😉

Então, o Node.js é uma plataforma que deixa o JavaScript rodar no servidor. Ele usa o motor V8 do Google Chrome para interpretar o JavaScript, que é bem rápido e eficiente. Com o JavaScript funcionando além dos navegadores, ele pode ser usado para construir aplicações web, assim como PHP, C# ou Ruby; permite criar aplicativos para computador, aplicativos de comando, embarcados e aplicativos para celular. Isso só é possível por causa do Node.js, que expandiu o uso do JavaScript. 🤯

## Por que usar o Node.js?

Existem várias razões maravilhosas para usar o Node.js. Primeiramente, o Node.js **torna possível programar tanto o lado do cliente quanto o do servidor usando apenas JavaScript**. Isso pode aumentar a produtividade, pois os desenvolvedores não precisam mudar de linguagem ao mover-se entre o front-end e o back-end. Como sempre fui front-end em toda minha carreira, particularmente foi ótimo para mim ter essa transição mais leve do front para o back-end.

Além disso, o Node.js é conhecido por sua **alta performance**. Como mencionado anteriormente, ele usa o motor V8 do Google Chrome, que é extremamente rápido, está entre uma das tecnologias mais velozes. O Node.js consegue receber 10 vezes mais requisições por segundo, do que a linguagem PHP com as configurações básicas, um máximo né?! O Node.js também é assíncrono e orientado a eventos, o que significa que pode **lidar com muitas conexões simultâneas sem perder velocidade**.

Finalmente, o **Node.js tem uma comunidade de desenvolvedores ativa e vibrante**. 🥳 Isso significa que há muitos recursos disponíveis para ajudar a aprender e resolver problemas, incluindo uma grande quantidade de bibliotecas de software livre disponíveis através do gerenciador de pacotes npm (Node Package Manager).

Resumindo, temos como vantagem:

- ☁️ Muito leve;
- ⚡️ Muito rápido;
- 🌟 Usa JavaScript;
- 🌎 Tem um dos maiores ecossistemas do mundo;
- 👩🏻‍💻 Está sendo utilizado fortemente no mercado.

Agora que você já sabe o porquê desta tecnologia estar na boca do povo, vamos dar os primeiros passos? No próximo artigo vou te ensinar a instalar o Node no Ubuntu, Mac e Windows. GO! 🚀

Ps.: Ah, se você teve interesse em saber sobre qual linguagem é mais rápida em nível de desempenho, recomendo este artigo aqui: [Benchmarks Game](https://benchmarksgame-team.pages.debian.net/benchmarksgame/fastest/javascript.html)
Bybit Web3 Partners UniSat: Integrated Marketplace On BRC-20
Published: 2024-02-08 19:23:52

Bybit, a leading crypto exchange, has announced a strategic partnership with UniSat, a blockchain interoperability pioneer. This collaboration aims to revolutionize the inscription market within the BRC-20 ecosystem. By integrating UniSat's cross-chain technology, Bybit establishes a unified inscription platform, simplifying access to BRC-20 tokens across diverse blockchains. This move enhances liquidity and streamlines the user experience, aligning with Bybit's vision of democratizing inscription opportunities. UniSat's Director, Lorenzo, highlights the partnership's goal of creating a unified marketplace, while Bybit's CEO, Ben Zhou, emphasizes their commitment to empowering users with intuitive inscription solutions. The collaboration signifies a significant advancement towards creating a more accessible and equitable inscription ecosystem.

More Information : https://www.techdogs.com/tech-news/pr-newswire/bybit-web3-announces-strategic-partnership-with-unisat-to-power-integrated-inscription-marketplace-on-brc-20-ecosystem
Streamline Your Small Business Payroll with ZilMoney
Tags: javascript, webdev, python, productivity
Published: 2024-02-08 19:17:24


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h6npi6fgf9ivsykuddr.png)Are you a small business owner looking to streamline your payroll processes and save valuable time and resources? Look no further than ZilMoney – your all-in-one solution for payroll management. In today's fast-paced business world, efficiency and accuracy in payroll processing are essential for maintaining compliance, keeping employees satisfied, and driving overall business success. With ZilMoney, you can simplify payroll management and focus on growing your business.

Why Choose ZilMoney?

ZilMoney offers a wide range of features and benefits tailored to meet the unique needs of small businesses. Here's why we recommend ZilMoney for payroll management:

User-Friendly Interface: ZilMoney's intuitive interface makes it easy for small business owners and administrators to navigate the payroll process with ease. Whether you're a payroll expert or new to payroll management, ZilMoney's user-friendly platform simplifies the entire process, from setting up employee profiles to processing payments.

Time-Saving Automation: Say goodbye to manual payroll processing and tedious paperwork. ZilMoney automates repetitive tasks such as calculating wages, taxes, and deductions, freeing up valuable time for you to focus on growing your business. With ZilMoney, you can schedule payments, set up direct deposits, and generate payroll reports with just a few clicks.

Accuracy and Compliance: Compliance with federal, state, and local tax laws is crucial for small businesses to avoid costly penalties and legal issues. ZilMoney ensures accuracy and compliance by staying up-to-date with the latest regulations and tax rates, reducing the risk of errors and non-compliance.

Cost-Efficiency: As a small business owner, you understand the importance of maximizing your budget. ZilMoney offers affordable pricing plans tailored to fit the needs and budget of small businesses. By streamlining payroll processes and minimizing the risk of errors, ZilMoney helps you save on labor costs and avoid costly mistakes that could impact your bottom line.

Secure Data Management: Protecting sensitive employee information is paramount for small businesses. With ZilMoney, you can rest assured that your payroll data is safe and secure. ZilMoney employs robust security measures to safeguard employee information, including encryption, authentication, and secure data storage.

Get Started with ZilMoney Today!

Ready to take your small business payroll to the next level? Sign up for ZilMoney today and experience the convenience, efficiency, and peace of mind that comes with our comprehensive payroll management solution. 

Whether you have a handful of employees or a growing team, ZilMoney has the tools and features you need to simplify payroll processing and focus on what matters most – growing your business.

Don't let payroll headaches hold you back. Choose ZilMoney and streamline your small business payroll today!
Bloomberg Unveils Automated Basis Trade And Reporting
Published: 2024-02-08 19:13:21

Device Authority, a leading provider of Identity and Access Management for Enterprise IoT ecosystems, secured $7M in Series A funding from Ten Eleven Ventures, specializing in cybersecurity. This investment follows Device Authority's recognition as Microsoft Global Partner of the Year and the launch of its KeyScaler AI solution. With the proliferation of IoT devices and cyber threats, effective identity and access management is crucial. Device Authority's KeyScaler-as-a-Service (KSaaS) platform offers automated device identity security, enabling end-to-end device and data trust. The Series A investment will fuel product expansion and North American growth. Three new board members, including cybersecurity experts Timothy Eades and Dave Palmer, join Device Authority. CEO Darron Antill expressed excitement about the partnership, while Ten Eleven Ventures' Dave Palmer praised Device Authority's approach to IoT device security, emphasizing their commitment to safer products.

More Information : https://www.techdogs.com/tech-news/pr-newswire/bloomberg-launches-first-fully-automated-basis-trade-and-reporting-workflow
Useful tools & ressources for svg
Tags: tools, svg
Published: 2024-02-08 19:09:50

* Remove blank space from around any SVG instantly: https://svgcrop.com/
* Optimize your svg: https://svgomg.net/
* Path editor: https://yqnn.github.io/svg-path-editor/
* Create svg with AI: https://svg.io/
* SVG ↔ URL encoder/decoder: https://codepen.io/sanbec/pen/yLpZgJw, https://svgwiz.com/
* SVG Filters Playground: https://yoksel.github.io/svg-filters
* Other tools: https://css-tricks.com/tools-for-optimizing-svg/
* A curated list of SVG : https://github.com/willianjusten/awesome-svg
Let's Start Networking
Tags: networking, systems, security, cybersecurity
Published: 2024-02-08 19:03:47

Greetings,

Well, well, well. The knowledge gained within the world of security thus far has been great. Understanding how many tools are used is important, but learning networking fundamentals is key to the protection and security ones system. Personally, I've always understood how the internet works, but didn't really have the terminology down pact. Because of this, I am taking time while undergoing cyber studies to also grasp the knowledge of networking. Hopefully while studying I'll be able to gain my networking certification. Not sure which one due to more research, but one that stood out was the CCNA. It's provided through Cisco and they offer many great resources to learn. Well without further or due, let's get into day one of networking concepts I took notes of. More will be added in future post, but this can provide a jump start.

**What is a network:**
A system of interconnected devices that can communicate using some common standards called Internet Protocol Suite (TCP/IP)

**Types of Networks**
Local Area Network (LAN):
Personal Area Network (PAN):
Metropolitan Area Network (MAN):
Wide Area Network (WAN):
Wireless Local Area Network (WLAN):



**Server:** 
A device that provides functions or services for clients

**Client:** 
A device that accesses a service made available by a server

* There are two types of endpoints or end hosts, these are servers and clients.
* The same device can be both depending on the situation.




**What are Switches?**
- Have network interfaces/ ports for end host to connect to (usually 24+)
- Provide connectivity to hosts within the same LAN (Local Area Network)
- Do not provide connectivity between LANs/over the internet.



**What are Routers?**
- Have fewer network interfaces than switches
- are used to provide connectivity between LANs
- used to send data over the internet


**What are Firewalls?**

- monitor and control network traffic based on config rules
- placed outside the router or inside the network protecting the end host (PCs and switches, etc) of the network.


**Network Firewalls:** 
Are hardware devices that filter traffic between networks. One will is a Next Gen Firewall.

**Next Generation Firewall:** 
Combines traditional firewalls feats with more advanced filtering functionalities

**Host based Firewall:**
Are software apps that filter traffic entering and exiting a host machine like a PC. Not a network firewall.




**Resources**

[Basic Knowledge of Networks](https://www.geeksforgeeks.org/basics-computer-networking/)

[What is CCNA?](https://www.cisco.com/c/en/us/training-events/training-certifications/certifications/associate/ccna.html)

[CCNA Online Study Tool](https://study-ccna.com/what-ccna/)
Preload Data::Printer and avoid polluting your code with debug symbols
Tags: perl, debug, dataprinter, dumper
Published: 2024-02-08 19:00:00

When I work, I tend to have a lot of boilerplate. I am a great user of [Data::Printer](https://metacpan.org/pod/Data::Printer) for debugging. There is no way I wouldn't use it, even on the smallest project. Usually, I have this on all my projects:

```perl
use strict;
use warnings;
use Data::Printer;

p $object;
```

Fellow [Peter](https://metacpan.org/author/SYSPETE) coworker saw me doing that once and said I liked typing too much: only `use DDP` was enough.

Later I learned [another solution was provided](https://metacpan.org/pod/Data::Printer#Using-p()-in-some/all-of-your-loaded-modules) in the DDP documentation.

It's possible to call `::p`instead of `p()`: `::p` doesn't require to `use` the module first. 

```perl
use strict;
use warnings;

::p $object;
```
For getting this to work, it's necessary to *preload* the module through command line: 

```shell
perl -MDDP script.pl
```

The good thing is that if we forget debug symbols in a module that is going to reach deployment pipelines or the CPAN (assuming we don't have other tools configured complaining about that), it will trigger a compile-time failure without the `-M` option, making it easier to catch.

Note that it also works well for tests with `Test2::Harness`:

```shell
yath -MDDP 01_test.t
```