teleren/devto huggingface dataset:
Instalando o Node.JS 🛠️
Tags: javascript, node, tutorial
Published: 2022-04-25 05:09:43

## Instalação no Windows
Durante o curso eu vou utilizar o Node.JS em ambiente MacOS. Como a maioria dos usuários utiliza Windows, a instrução de instalação será apenas para instalar o Node.JS no Windows.

**1) Vá até a página oficial do nodejs.org.**

**2) Clique na versão LTS para baixar. **
A versão LTS é a mais estável, então a não ser que precisemos de alguma funcionalidade nova e mais atual do NodeJs, a versão LTS é a que devemos usar. Após baixar o instalador, basta executar e seguir os passos:

**Quando chegar na tela a seguir, tenha a garantia de que pelo menos as opções Node.js runtime, npm package manager e Add to PATH estejam selecionadas.**

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

Na próxima tela, o instalador vai perguntar se você gostaria de instalar outras ferramentas. Selecione a opção que vai instalar automaticamente essas ferramentas. É muito importante selecionar essa opção no Windows, porque alguns pacotes do npm não conseguem rodar nativamente no Windows sem algum tipo de compilação. Essas ferramentas vão cuidar da compatibilidade com o Windows.

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

Depois disso, é só concluir a instalação. Algumas janelas de terminal se abrirão automaticamente indicando o progresso da instalação.

Após terminar a instalação, eu recomendo reiniciar a máquina, nem sempre é necessário, mas é uma garantia de que o Node.JS foi escrito corretamente no caminho do PATH do Windows.

Depois de todo esse processo, vamos rodar os seguintes comandos para garantir a instalação do NodeJS e do npm:

**node --version** e **npm --version**

Ao usar este comando você verá a versão instalada do Node.JS e do Gerenciador de Pacotes (NPM). Agora você vai precisar de um editor, eu estou usando o Visual Studio Code (VSCode). Pode utilizar o que já utiliza ou se ainda não tem o VSCode, recomendo o seu uso.
Learn More about the customized design for the website
Tags: websitedevelopment, webdev, softwaredevelopment
Published: 2022-04-25 04:52:42



Marketing The Expression website layout is Knowledgeable about. It's been at the usage of over length of time, therefore individuals are utilized for its own application. Another brand new expression Is Now diluted using all the aforementioned word - Custom web design. However, what basically is the term referred to as? The custom web design is some thing that has been made Which will be simple to become customized with the customers. They are able to produce the customization depending on their requirement and advantage. Understand What habit Layouts are Even though Discussing the Custom Made layout, do not confuse it together with Templates are designed by the web. They truly have been separate which can be readily accessible free online. 
In fact custom web design must be launched out of one scrape. What is the requirement of the customization? Custom web design Toronto has Popularity lately. However, so much recognition? **_[Software Development Company in Oman](https://codeares.com/software-development-company-in-oman/)_** , Exactly why the Customized layout Is critical foryou personally? The personalization is actually just really a significant measure which ought to be accomplished. The absolute most essential rationale is it is semi and fast automated procedure. From the tailored websites, the majority of the codes have been redeemed around different stages of its own application. The stability upgrades are made by This for upgraded together with the way that is more recent.

 The upgrades have been achieved within a less difficult manner compared to one alternatives. More over the website might be manufactured simpler for everyone to utilize it. These solutions Are Being Supplied from the internet designers in A exact reasonable pace. **_[Software Development Company in Oma](https://codeares.com/software-development-company-in-oman/)_**n , Therefore it's advisable to choose the most useful options with all the very reasonably priced pace. Those artists That Are communicating the Custom Made internet page, begins Having a site that is clean and also perform it based on the requirement of these customers. The website will be designed focusing mostly upon your customer's requirement along with also ease. Thus Start Looking in These choices Even Though You Want the internet designers. They provide an outstanding bargain for your own organization with development.
Google scraping for dummies :-)
Published: 2022-04-25 04:59:28

We get a lot of requests at proxiesapi.com to scrape Google and we have had to turn them away because it's just so difficult for even an experienced programmer to overcome Google's defences. So we decided to do it ourselves. Very excited. We hope big things will come off it. Watch this space in the next few days. Sorry for this post. I just had to tell someone.
Google scraping for dummies :-)
Published: 2022-04-25 04:58:04

We get a lot of requests at proxiesapi.com to scrape Google and we have had to turn them away because it's just so difficult for even an experienced programmer to overcome Google's defences. So we decided to do it ourselves. Very excited. We hope big things will come off it. Watch this space in the next few days. Sorry for this post. I just had to tell someone.
How to Design a Call History UI Using the React ListView Component
Tags: react, webdev
Published: 2022-04-25 04:30:37

Learn how to customize Syncfusion [React List view](https://www.syncfusion.com/react-ui-components/react-listview) items with icons or images using the template property. I have explained a few built-in classes to customize the template content like an avatar with multiple lines in each list item. And showed you how to customize the list header using the headerTemplate property. I also enabled the group header and customized the group title using the groupTemplate property. 

**Product Overview**: https://www.syncfusion.com/react-ui-components/react-listview

**Download an example from GitHub**: https://github.com/SyncfusionExamples/customize-the-react-listview-using-templates

**Refer to the following documentation for the Syncfusion React ListView Templates**: https://ej2.syncfusion.com/react/documentation/listview/customizing-templates/

{% youtube JTtZAZdPwhU %}
Steps to 👨🏿‍💻👨🏿‍💻👨🏿‍💻 part 2
Published: 2022-04-25 04:11:05


![walking down a road](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6s9tznbofmcn7yp86svt.jpeg)

I just finished coding my first game. Even though it was something I could have finished in a shorter amount of time. I really wanted to grasp the concepts of this process. 

![slow snail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hrciusnrz1fn2218u5b.jpeg)

In a world where we hear phrases like "Time is money" and in a  "New York minute". I think we lose the value of the process and can sometime do ourselves more harm than good. This could have been a three day process but I took the time to enjoy the experience and learn as much as I could. Here are some of the things I did along the way:
 
1. Map out the structure of the game. 
2. Research some new methods and function I was using. 
3. Test, Test and Test some more, which lead to some debugging. 

Now by doing that I feel like I have added more to the tool box. Which I can say I feel confident using in the future for other projects. 

![Process on Chalkboard ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrld92038dxme646nyvk.jpeg)

As I was going through building this game. I made sure to take notes on new things I was learning and looking for other examples of how they were used to help my understanding. Here are some tips I use along the way.
 
1. Use documentation and example found in them to help you.
2. Write it out in your own words or try to explain it to someone. 
3. Play around with it in a repel(Depending on the method).
4. Comment it in your code and use variables to help you define it until you don't need the comment anymore to understand what it does. 

I hope these tips help. I hope to continue to add more as I learn more on this journey to share with others. 

Until next time Happy Coding 👨🏿‍💻👨🏻‍💻👩‍💻🧑🏾‍💻
C C++ C#
Tags: beginners
Published: 2022-04-25 04:07:13


**C Programming Language**
C is a general-purpose computer programming language. It was designed to be compiled to a machine language (a low-level computer language), so it is fast. Learning C helps us understand a foundation of programming such as an operating system or other programming languages because many of them build off of it.

What Can You Do With C ?
Operating systems
Embedded system applications
etc

**C++**
C++ was developed as an extension of the C programming language. Its advantage is the feature of object-oriented programming, which allows code to be reusable and makes a program more reliable.

What Can You Do With C++ ?
Operating systems
Web browsers
Games
GUI based applications
Database software
etc

**C#**
C# is a high-level, object-oriented programming language created based on C++ and Java. Since it was created by Microsoft, it is string at builing Windows applications and games.

What Can You Do With C++ ?
Game development using Unity
[Example] Microsoft official website, Skype website
My First Dev Blog Post
Tags: beginners
Published: 2022-04-25 04:06:34


Hi 👋, I'm Bao
Full Stack Developer

🔭 I’m currently working on Construction Monitoring Website

🌱 I’m currently learning ASP.NET and C#

👨‍💻 All of my projects are available at pgbnguyen.com

📫 How to reach me pgbnguyen@gmail.com

⚡ Fun fact I do powerlifting part-time and lifting up project full-time

Working as Full Stack Developer based in Toronto, Canada with 3 years of experience in the software industry and more than 1 year of experience web production using ReactJS/NodeJS and  ASP. Net C# platform. Working as Collaborative Full Stack Engineer at BKG Group, building both backend and frontend for monitoring bridge construction data websites. Bonus experience with Agile, version control (Git), code review, cloud server (Azure ) and unit testing.
HOW TO MAKE A SIMPLE CARD DESIGN
Tags: html, css, web3, beginners
Published: 2022-04-25 03:47:01


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxbqo0au9o0gy1ppezyn.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxo6nuykbdhwiiy80td0.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2tsiwezr727scj949uw.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fqzf4f0reaxhij023ki.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8q3km16tpguq8e7cx6y.jpg)
What is Express.js?
Tags: javascript, express, node
Published: 2022-04-25 03:19:31

Express is a nodejs framework built on top of the http module and is middleware based. Express has the ability to funnel requests coming through a uri chain and do stuff with it.

When the request comes through, express is able to perform actions, get data, check user auth, send status codes etc.

A basic get request looks like this:

```JavaScript
const express = require('express');
const app = express();
const port = 4001;

const products = [
  { name: 'iPhone', price: 800 },
  { name: 'iPad', price: 650 },
  { name: 'iWatch', price: 750 }
]

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`)
})

app.get('/', (req, res) => {
  res.send("Hello World!")
}

// GET request for all products
app.get('/api/v1/products', (req, res) => {
  res.json(products);
}
```

To get this server running, use `node index.js`

Information can be sent back and forth between the routes and pages for the site.

```JavaScript
const findId = (id, list) => {
  return list.find((el) => {
    return el.id === Number(id)
  })
}

app.get('/api/v1/products/:id', (req, res) => {
  const product = findId(
    req.params.id,
    products
  )
  // If the product is found
  if (product) {
    res.send(foundExpression)
  } else {
    res.status(404).send()
  }
})

```

Full CRUD functionality can be configured right from express routes and help to control the smaller functions of the site further increasing the separation of concerns.

```JavaScript
const getIndexById = (id, list) => {
  return list.findIndex((el) => {
    return el.id === Number(id);
  });
};

const updateElement = (id, query, list) => {
  const index = getIndexById(id, list);
  if (index === -1) {
    throw new Error ('must have a valid id');
  }
  if (query.id) {
    query.id = Number(query.id);
  } 
  
  Object.assign(list[index], query);
  return list[index]
}

// Update
app.put('/api/v1/products/:id', (req, res) => {
  const productIndex = getIndexById(req.params.id, products)
  if (productIndex !== -1) {
    updateElement(req.params.id, req.query, products)
    res.send(products[productIndex])
  } else {
    // respond with 404 not found code
    res.status(404).send();
  }
})
```

To finish, we can add a delete request

```JavaScript
app.delete('/api/v1/products/:id', (req, res) => {
  const productIndex = getIndexById(req.params.id, products);

  if (productIndex !== -1) {
    products.splice(productIndex, 1);
    res.status(204).send();
  } else {
    res.status(404).send();
  }
})
```

All these and more can act as embedded functions that will run with the need for it to exist in the frontend source project while still be able to handle API requests without blocking down the backend source, or to give more customization to the frontend control.
Setup Rspec and Simplecov for Rails project on Docker
Tags: docker, rails, tutorial, rspec
Published: 2022-04-25 03:08:29

- Rspec is a testing software for Ruby on Rails as a alternative to Minitest
- Simplecov is a code coverage analysis tool for Ruby

_Fot this example `Jiffy` is the name of our project_

## **Requirements**

- Git ([https://git-scm.com/](https://git-scm.com/)).
- Docker ([https://www.docker.com/get-started](https://www.docker.com/get-started)).
- docker-compose ([https://docs.docker.com/compose/](https://docs.docker.com/compose/)).
- A rails project.

### Step 1: Clone Repo

```bash
# Clone git repo
git clone git@github.com:brayvasq/jiffy.git

# Move to the repo directory
cd jiffy/
```

### Step 2: Add and install gems

- Add rspec and simplecov gems on test environment

```ruby
# Gemfile
group :test do
  gem 'rspec-rails', '~> 4.1.0'
  gem 'simplecov', require: false
end
```

And rebuild our custom image again.

```bash
docker-compose build web
```

Generate boilerplate config files to rspec docker-compose exec web rails generate rspec:install

```bash
# Run container in background
docker-compose up -d

# Install basic config files to rspec
docker-compose exec web rails generate rspec:install
```

Now we can run tests:

```bash
# Run tests
docker-compose exec web rspec spec
```

![Run rspec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd7fjn3wvqizz4w8vqcn.png)
 

### Step 3: Setup simplecov

When installing simplecov gem, coverage folder is created. We can add it to the .gitignore

```bash
docker-compose exec web echo "coverage" >> .gitignore
```

Initialiaze simplecov. Add the following lines in the first two lines of spec_helper file

```ruby
# spec/spec_helper
require 'simplecov'
SimpleCov.start 'rails'
```

Example output. Run tests and then:

```bash
# Run tests
docker-compose exec web rspec spec

# Open coverage output
open coverage/index.html
```

Or open manually coverage/index.html

![Coverage report](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iis724ditqvd0bqfjk6c.png)

_Note: This guide can be used as a base for any gem_

# Final
Any questions or comments are welcome, I'll share more content in following posts.

Thanks for reading!
React Router
Published: 2022-04-25 03:05:22

Navigation is important in single page applications. One of the important libraries in React is the router library that allows us to switch between components in our application.

First thing first, I need to install the router dom:

```
 npm install react-router-dom@5
```

After, I need to import BrowserRouter to index.js:
`import { BrowserRouter } from 'react-router-dom';`

If a module error about react router dom not found, I will need to install:
`npm install react-router-dom --save`

Then I need to wrap up the root component with a BrowserRouter tag:

```
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
```

Next, in the root component, I will import:
`import { Switch, Route } from "react-router-dom"`

Then I can setup the root component after the return():

```
function App() {

  return (
    <div className="App">
      <NavBar onChangePage={setPage} />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/project">
          <Project />
        </Route>
        <Route path="*">
          <h1>404 not found</h1>
        </Route>
      </Switch>
    </div>
  );
}
```
The "exact" in exact path makes it so that the path needs to be exactly what it is in order for it to switch pages. Notice how it is only in the home "/" part. `<Routh path="*">` is a wildcard path.

Next, I need to setup the Nav component with an import:
`import { Link } from "react-router-dom"`
Under the hood, Link performs such as with the "a" anchor tag and onClick event listener to trigger a state change on the path route. 

Then there is also:
`import { NavLink } from "react-router-dom"` 
and with NavLink I can also set up css to indicate a link change if it is active:

```
nav a.active {
  background-color: aquamarine;
  color: red;
}
```

The return setup in the Nav component follows:

```
 return (
        <nav> 
            <NavLink exact to="/">Home </NavLink>
            <NavLink to="/about">About </NavLink>
            <NavLink to="/project">Project </NavLink>
        </nav>
    )
```
and voila! a working Navigation bar.
Before start with Flutter — Flutter Programming — Part 1
Tags: flutter, dart, mobile, beginners
Published: 2022-04-25 02:36:24

Hello guys. So i've finished first series about [Dart Basic Programming](https://dev.to/hoangnguyen0403/series/17737). Next i'll write about [Flutter Basic Programming](https://hoangnguyen0403.medium.com/list/flutter-basic-programming-a264438d45bc) in Medium. Hope this series will help newbie familiar with Flutter. Please follow my lastest story about [Flutter Overview](https://hoangnguyen0403.medium.com/before-start-with-flutter-flutter-programming-part-1-7226567f785e) in Medium. Thanks for reading!
Script to check if docker booted for Github Actions
Tags: docker, dockercompose, githubactions
Published: 2022-04-25 02:33:43

# Background
I use Docker (docker-compose) to built system for my local development and testing on Github Actions. In my local, I can check by my eyes if my containers have booted. However, in Github Actions, I need a way to make sure that my docker containers have booted and run test for the containers after their boot. Simply I came up with the following Github Actions setting. But usually that does not work because the completion of `docker-compose up -d` does not mean the program / servers in the containers are ready.

```yaml
jobs:
  all:
    name: My test
    runs-on: ubuntu-18.04
    steps:
      - name: Docker compose up
        run: docker-compose up -d
      - name: Test
        # run test for my containers. e.g. Access API servers
        run: ...
```

# Solution: Script to check health

I wrote the following bash script to check my target container health status. My docker-compose has healthcheck setting (see [this article](https://dev.to/ku6ryo/frequently-used-2-healthcheck-recipes-for-docker-compose-dependency-resolution-2ad9) to learn how to setup). It checks the health every second and finishes its process after the container gets healthy. If the program did not get healthy within the timeout, the script exits with 1.

```bash
# Name of the target container to check
container_name="$1"
# Timeout in seconds. Default: 60
timeout=$((${2:-60}));

if [ -z $container_name ]; then
  echo "No container name specified";
  exit 1;
fi

echo "Container: $container_name";
echo "Timeout: $timeout sec";

try=0;
is_healthy="false";
while [ $is_healthy != "true" ];
do
  try=$(($try + 1));
  printf "■";
  is_healthy=$(docker inspect --format='{{json .State.Health}}' $container_name | jq '.Status == "healthy"');
  sleep 1;
  if [[ $try -eq $timeout ]]; then
    echo " Container did not boot within timeout";
    exit 1;
  fi
done
```

This is the command to run the script.
```
healthcheck.sh <container_id|name> <timeout_in_sec>
```

A realistic command should be like this. Waits `120` seconds or less until `api` container gets ready. Then run `test.sh` (Please change whatever command you want).
```
healthcheck.sh api 120 && test.sh
```

Finally, my Github Actions got the form like this.

```yaml
jobs:
  all:
    name: My test
    runs-on: ubuntu-18.04
    steps:
      - name: Docker compose up
        run: docker-compose up -d
      - name: Test
        run: healthcheck.sh api 120 && test.sh
```

# Appendix: Fix the name of a container
Without an explicit name, docker-compose names a container like `api_1` to fix the name as you want, you must specify a name as `container_name` in `docker-compose.yml`.

```yaml
services:
  api:
    container_name: api
```
Real Estate Glossary
Tags: showdev, webdev, realestate
Published: 2022-04-25 02:31:27

![End result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex5he1i03z50sz9htops.png)
 
I had a wonderful time creating this [real estate glossary](https://firstgalaxyinc.com/glossary.html) for this project. Making the terms populate dynamically meant that I was able to extract the data instead of manually...typing...every...single...word and letter. YAY!

![populate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74fb90tseywsnnls4jhc.png)

The bootstrap modals were a great fit for displaying the definitions and terms. Implementing them in JavaScript was quite simple as well.

![bootstrap modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbv0sxdkh9alhhg7y450.png)

Check out the [LIVE website right here](https://firstgalaxyinc.com/) and let me know what you think in the comments below.

This is a real company, family-owned and close to heart. If you are interested in looking for a new investment, finding a real estate agent, or starting a new career in reality, please reach out to the founder and owner of the company. He would be more than happy to help you with anything you need. And please, let him know I sent you his way.

Happy coding and happy investing!
Digging more into Variables in JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2022-04-25 02:01:58

Now that we have a basic idea about the [variable ](https://dev.to/aryakris/javascript-basics-part-2-1ae7), we need to understand more about what goes inside those variable which are the different DataTypes. 

Everything that we work inside of an application ultimately comes down to Primitive DataTypes.

- Primitive data types include undefined, string, number and boolean

- Undefined variables haven't been assigned values yet.If we put nothing inside a variable it is type of UnDefined. 

```
var myUndefined;
```

- A string is a series of characters and is surrounded by quotes 

```
var myStringWelcome = "Hello World"; 
```

- A number can be either an integer or a decimal 

```
var myNumberInt = 100;
var myNumberDecimal = 100.100;
```

- Booleans have two values: true or false

```
var isMyBooleanTrue = true;
var isMyBooleanFalse = false;
```
JavaScript is loosely typed, so the type is tied to the value held in the variable, not the variable itself!