teleren/devto huggingface dataset:
[1] JavaScript Data Types
Tags: webdev, codenewbie, javascript, career
Published: 2020-10-21 08:23:35

In addition to my main studies, I constantly watch FrontendMasters courses. Those courses are mostly about JavaScript, HTML, CSS, web development in general, and things like that. So in this post, I’ll share some considerations about JavaScript data types.

Well, at first, there are some basic data types, like strings, numbers, and booleans (true vs false):

```
console.log(typeof "Test")
→ string

console.log(typeof 8)
→ number

console.log(typeof true)
→ boolean
```

Then, in the following example, we can see the difference between undefined and undeclared variables. The difference is obvious enough, but at the same time, JavaScript takes both cases as undefined for some reason.

```
let x
console.log(typeof x) 
→ undefined

console.log(typeof y)
→ undefined (hmm... undefined or maybe undeclared?)
```

Next, there is a group of quite different things such as an object, array, and null, that are in practice perceived equally.

```
let x = {}
console.log(typeof x)
→ object

let list = [1, 2, 3]
console.log(typeof list)
→ object (Array is also an object in JS)
```

I guess that the better way to differentiate regular objects from arrays is to use Array.isArray.

```
console.log(typeof null)
→ object (Wait... null is an object? 🧐 It seems to be so.)
```

There were a couple of completely new things to me as well, such as symbol and bigint. They are definitely not the things I used a lot, so I can’t say anything special about them.

```
console.log(typeof Symbol("&"))
→ symbol

console.log(typeof 1n || BigInt(42))
→ bigint
```

Of course, there is also a function, which data type is a function. Yes, it was easy this time.

```
let w = (name) => { console.log(`Hi ${name}`) }
console.log(typeof w)
→ function
```

And finally, there are also several examples not directly related to JavaScript data types, but which seemed interesting to me.

```
console.log(Number("Test"))
→ NaN

let zero = -0
console.log(Object.is(zero, 0))
→ false
console.log(Object.is(zero, -0))
→ true
```

[Original post 15.06.20 @ create-react-app.com](https://create-react-app.com/javascript-data-types/)
Site https://proj.create-react-app.com/
GitHub https://github.com/villivald
Switching to cypress-testing-library
Tags: cypress, vscode, testing, javascript
Published: 2020-10-21 07:49:57

Recently I began using [cypress-testing-library](https://github.com/testing-library/cypress-testing-library) to enhance my cypress tests.

Following [cypress best practices](https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements), I used to add a `data-cy="something"` attribute to any element I wanted to select with cypress.
``` html
<button data-cy="submit" type="submit">Submit</button>
```
And then in my cypress test I would look for the element using
```ts
cy.get('[data-cy="submit"]'); // [...]
```

When I added `cypress-testing-library` to the project, I had two problems to solve:

### 1) Changing the *testId* attribute
The default testId used by cypress-testing-library is `data-testid`, not `data-cy`. Luckily this can be changed as explained in the [documentation](https://github.com/testing-library/cypress-testing-library#usage):
```ts
cy.configureCypressTestingLibrary({
    testIdAttribute: 'data-cy'
});
```

### 2) Replacing every relevant `cy.get` with `cy.findByTestId` among the existing test files

> Note: I'm only covering `cy.get()` to `cy.findByTestId()` conversion, but the same approach would be valid for other cypress/cypress-testing-library commands.


I wanted to replace every
```ts
cy.get('[data-cy="something"]')
```
with
```ts
cy.findByTestId('something')
```

Luckily, `VS Code` search & replace allows using regular expressions & capture groups, and I was able to replace all occurences using the following regex:

*find*:&ensp;&ensp;&ensp;&ensp;&ensp;`cy\.get\('\[data-cy="(\w.+)"\]'`
*replace*:&ensp;&ensp;`cy.findByTestId('$1`'


> Disclaimer: not a regex expert :sweat_smile:

<img src="https://dev-to-uploads.s3.amazonaws.com/i/jk6l8i5ro4b9gnq1wfew.jpg" alt="Boromir meme 'one does not simply REGEX'" width="30%">
Suggestions to Think about while Inputting Amazon MYTV Code | amazon.com/mytv
Published: 2020-10-21 07:36:28

• you have to discover the 5-6 character code at the Amazon Prime Video program in your device.

• The activation code will probably function as a bridge between the Amazon account along with your apparatus.

• It takes less than one minute to finish the entire procedure.

• The activation procedure is made for the apparatus having browsers like cellular or PC.

• Amazon is among the least expensive and effective video streaming programs.


<a href="http://amazoncommytvs.com/">amazon.com/mytv</a>

Amazon.com/mytv is a activation portal site for those users that wish to see Amazon Prime Video in their apparatus. The prime movie members can observe countless shows and movies at no cost on their favourite devices. They just have to obtain the subscription and activate their gadget for immediate video support. They also will need to enroll themselves <a href="https://amazonmytventercode.com/">www.amazon.com/mytv</a> by"Establishing an account".
Install `learnyounode`
Tags: node, beginners
Published: 2020-10-21 01:06:47

## Install `learnyounode` Globally

As per [these directions,](https://github.com/workshopper/learnyounode#installing-learnyounode) `npm install -g learnyounode`

This will use `npm` to _globally_ install `learnyounode`.

Normally, it's not recommended to do `npm install -g` (installing packages globally) due to versioning changes possibly breaking 🤯 things. However, `learnyounode` is a utility that we want to be able to run from anywhere on our system - it's not 'scoped' or 'locked' to a specific version(s) for a specific project.

## Check It ✅

Simply type `learnyounode` and you should get the main menu that looks like this:

![learnyounode main menu](https://camo.githubusercontent.com/17955d1d684a9a0b3fd9d5d863393e6e952cc3b4/68747470733a2f2f7261772e6769746875622e636f6d2f72766167672f6c6561726e796f756e6f64652f6d61737465722f6c6561726e796f756e6f64652e706e67)

## Create a Directory to Organize Our Work

As we work through this series together, we'll be creating multiple files, so you should designate a directory 📁 for them. 

Go to your home directory 📁 by entering `cd` in your terminal.

Then create your directory structure using: `mkdir`. If you need to make nested directories, you could use `-p`. For example: `mkdir -p Code/learnyounode` **(HINT: It's a convention to capitalize directory 📁 names - but 'learnyounode' is a bit different 🤓).
How to Create Simple  Bar Chart In Codeigniter using AmCharts?
Tags: laravel, career, hacktoberfest
Published: 2020-10-21 06:48:10

There are many types of charts provide by AmCharts, like a bar chart, area chart, line chart, pie chart, amcharts line chart, etc. but here we use a bar chart. very easy to create amcharts line chart.

We can easily integrate AmCharts Codeigniter. here In this article, we are using AmCharts version 3. so you can see below the following steps.

**[How to Create Simple  Bar Chart In Codeigniter using AmCharts?](https://www.phpcodingstuff.com/blog/how-to-create-simple--bar-chart-in-codeigniter-using-amcharts.html)**

```
<?php
 
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Amchart extends CI_Controller {
 
    public function __construct() {
        parent::__construct();
    // load model
        $this->load->database();
        $this->load->helper(array('url','html','form'));
    }       
     public function bar_chart() {
      $query =  $this->db->query('SELECT DATE_FORMAT(login_date, "%Y-%m-%d") AS `date`, COUNT(`login_date`) as count FROM login_history WHERE `login_date` >= NOW() - INTERVAL 10 MONTH GROUP BY MONTH(`login_date`) ORDER BY `login_date` ASC'); 
      $records = $query->result_array();
      $data = [];
      foreach($records as $row) {
		$data[] = ['date' => date('Y-m-t',strtotime($row['date'])), 'count' =>$row['count']];
      }
      $data['chart_data'] = json_encode($data);
      $this->load->view('bar_chart',$data);
    }   
}
?>
```
My Hacktoberfest Journey
Tags: hacktoberfest
Published: 2020-10-21 07:11:55

## What I Learned From Hacktoberfest

I came to know about the open-source community from my senior during this September and I was really curious to explore it. Before hacktoberfest I had contributed to a few open-source projects of my college. But as we all know, it needs continuous motivation to keep work on, and so this fest provides me with the motivation to learn and explore more the open-source.

## What hacktoberfest provided me?
- It gives me the motivation to continue open-source programming.
- Helped me to improve my communication skills as well as developing skills.
- Helped me to improve my patience level while working with a large community.
- Reward which it provides is so valuable that makes me feel so good and proud and gradually boost my confidence to do more. 

** I hope my journey with open-source will continue.**

Thanks a lot, Digital Ocean for this opportunity!

My Contributions are:
[pycontributors](https://github.com/Py-Contributors/py-contributors.github.io)
[AwesomeScript](https://github.com/DedSecInside/Awesome-Scripts)
[MetaKgp](https://github.com/metakgp/chillzone-frontend)
Hubot script for corona stats
Tags: coffescript, rocketchat, hubot, germany
Published: 2020-10-21 07:03:49

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ovncvp9opmrtfnfjjb5.png)

Today I hacked together a small script for my company hubot to show employees a small statistic about the actual corona statistics for our city.

Currently, this script consumes an API that is only able to fetch data for the german region. But i would like to share it because may some one need it.

If youre interested in give your hubot a new ability feel free to take the script which you can found here:

https://github.com/Atomzwieback/hubot-corona-stats
How should I conduct an interview for a graduate software developer?
Published: 2020-10-21 06:58:40

I have been "volunteered" to help interview graduates for an entry level software developer position. I have some scope to re-structure the interview and I am keen to hear any ideas that can help us find a good fit for our organisation.

So if you are a graduate, tell me what would help you shine in an interview? 

If you are an experienced dev, what have you seen that helped to find good grads? If you have any advice based on bad experiences then I am keen to learn from those stories too!
DB Insert | Summernote Image Upload With Example Laravel 8
Tags: linux, hacktoberfest, codenewbie
Published: 2020-10-21 06:53:23

Summernote Wysiwyg is a very simple editor. If you use simply use textarea and you require to make more tools like bold, italic, or image upload, Then you have to choose Summernote plugin.

In this example, I am going to use summernote with bootstrap your choice to use any. So you can simply use summernote text editor. If You need summernote editor with image upload in laravel 8.

Here I will give you a full example for laravel summernote text editor with image upload and summernote insert image URL.
**[DB Insert | Summernote Image Upload With Example Laravel 8](https://www.phpcodingstuff.com/blog/summernote-image-upload-with-example-laravel-8.html)**

```
<html>
<head>
    <title>Summernote Image Upload With Example Laravel 8 - phpcodingstuff.com</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <!-- include summernote css/js-->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.4/summernote.js"></script>
</head>
<body>
    <div class="row" style="margin-top: 50px;">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4>Summernote Image Upload With Example Laravel 8 - phpcodingstuff.com</h4>
                </div>
                <div class="panel-body">
                    <form method="POST" action="{{ route('summernote..image.upload') }}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <strong>Description:</strong>
                            <textarea class="form-control summernote" name="description"></textarea>
                        </div>
                        <button type="submit" class="btn btn-success">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
         $('.summernote').summernote({
               height: 300,
          });
       });
    </script>
</body>
</html>
```
How to get the [ IP, location ...etc ] of anyone visit your site in React/JavaScript
Tags: react, javascript
Published: 2020-10-21 06:49:16

### My First Simple article at DEV Community :)

i wrote a simple [Covid-19 Tracker], when you open it will give you the information of your country accord to your location.

You can check my so simple project [Covid-19 Tracker] 
Github: https://github.com/moamlrh/covid-tracker/tree/master

####* NOTE : this article for absolute beginner:)

It's easy, i don't wanna waste your time.

## First Of All :
 
 we'll create a file called App.js :

![App.js](https://dev-to-uploads.s3.amazonaws.com/i/tl0b7ejj4y2cej3vuin4.png)

## Request and API 
  Then make get request to https://ip.nf/me.json
we'll use fetch to make request but you can use whatever you want [try with Axios]

The response will Looks like :
![response](https://dev-to-uploads.s3.amazonaws.com/i/jmjmbz0pa21zwak863vk.png)

Your information => IP, Country, Country Code, City,ASN etc...

## Finally,
 we can use it with React Hooks [useState, useEffect]:

![code](https://dev-to-uploads.s3.amazonaws.com/i/nbde27smrmhuakgt50ka.png)   

## The Final result :
  country name, code, city, latitude & longitude

##### * latitude & longitude you can use it in your project if you use map or do whatever you want 


I hope you benefit from this article, 
Thanks for spend some time to learn new simple things.

" LEARN & NEVER STOP "
Completeing Hacktoberfest!
Tags: hacktoberfest
Published: 2020-10-21 06:44:19

## What I Learned From Hacktoberfest

This was the first time I had participated in Hacktoberfest. As a fresher who has just started this was a really educational journey. I learned so much about Git, git hub and open source. I absolutely loved partaking in it. Looking forward to next year as well!
Hacktoberfest_2020
Tags: hacktoberfest, opensource, github, devops
Published: 2020-10-21 06:20:17

## What I Learned From Hacktoberfest 2020



I am new to open source and learning programming and new technology.
I have made various projects which are hosted on [Github](https://github.com/flyingsonu122). 

This year I have participated in **hacktoberfest** and contributed to many open source projects.

1. First of all, check the repos with hacktoberfest topics   
2. check issues and contributing guidelines 
3. ask maintainers to work on a particular issue
4. solve the issue and open a PR
5. Do not spam.

that's it.


### Projects on which I contributed

[See here](https://github.com/pulls?q=is%3Apr+author%3Aflyingsonu122+archived%3Afalse+is%3Aclosed)

and many more ...

### Contribute to one of my projects

{% github https://github.com/flyingsonu122/JSON/issues/1 %}

It was really a good experience; I learnt a lot of new things
in open source from [Hacktoberfest] (https://hacktoberfest.digitalocean.com).

**Thank you**


[![Sonu kumar kushwaha](https://img.shields.io/twitter/follow/sonukumarkush12?label=Follow&style=social)](https://twitter.com/sonukumarkush12)
How DevOps Online training is useful ?
Tags: devops
Published: 2020-10-21 06:08:35

After taking the [DevOps Online training](https://www.igmguru.com/cloud-computing/devops-certification-training/) you will be able to support your industry by speeding up the entire delivery system and eliminating risks. The industry will benefit from you immensely as:

The deployment frequency will improve
The risk rate of failures of new releases will be minor which provide more reliable releases
There is early recovery or the current system will be disabled in case of a crash of new releases 
Less time will be required for fixation
More and quick time to market
The efficiency and productivity of the manufacturing will improve
Skica.me - A skincare app I'm making in Flutter!
Tags: flutter, android, showdev, startup
Published: 2020-10-21 06:06:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x3xzy8zh53k59xkvk2q3.png)

## Skincare in an App!
Skica.me is a new project I have begun working on with my girlfriend (business) and her best friend Khanh (graphic designer). We are a remote team of 3 people, working across the world with each other from the United States and Vietnam!

On this project, I am the only developer. Meaning I am in charge of all the technical work from building and maintaining the mobile app and website to managing the servers. All of my favorite stuff!

## Experience thus far...
This project is being built with the Dart language and Flutter framework, my first experience with both of them. I found it to be a bit frustrating at first as it reminded me a lot of JavaScript in many ways and the Flutter framework can be a bit intimidating at first. But, now that I've gotten used to it, I actually find it quite enjoyable! It's also pretty amazing how quickly you can now develop a cross-platform mobile application with this setup!

My favorite part about the Dart/Flutter setup is their debugging and testing environment. I'm a VS Code guy and Flutter has developed an awesome plugin for VS that can run both Android and iOS emulators right from the IDE! This makes the developer experience with Flutter very enjoyable.

Earlier I said that Dart reminded me a lot of JavaScript. But, after working with it for awhile, I've found Dart to be a lot more enjoyable. I've always found static typing to be more favorable to work with which is a big plus in Dart's favor. I have a HUGE hate for JS. I probably have no real reason to. I just find JS code to be super messy (Dart seems cleaner, imo), hard to read, and the ecosystem to be a nightmare to work with. But, I digress.

Now, more about the Skica app! Below is a list of planned features as of the writing of this post:

### App Features
- Create your own custom skincare routines.
- Select from our pre-made routines.
- Timers built into the routines.
- Search products to add to routine(s).
- Track your daily progress.
- Set daily notification reminders.
- Various skincare challenges.
- Earn points and rewards for activity.
- And more coming soon!


**Website:** https://skica.me/
**Github Repo:** https://github.com/nolyoi/skica_app
**Original Blog:** https://nolanm.dev/posts/18-skica-me-mobile-skincare-application/edit
Auto-focus a form control with an Angular directive
Tags: angular
Published: 2020-10-21 05:26:19

---
title: Auto-focus a form control with an Angular directive
description: Give auto-focus to form controls with just a few lines of code
tags: angular
cover_image: https://timdeschryver.dev/blog/auto-focus-a-form-control-with-an-angular-directive/images/banner.jpg
canonical_url: https://timdeschryver.dev/blog/auto-focus-a-form-control-with-an-angular-directive
published: true
---

Follow me on Twitter at [@tim_deschryver](https://timdeschryver.dev/twitter) | Subscribe to the [Newsletter](https://timdeschryver.dev/newsletter) | Originally published on [timdeschryver.dev](https://timdeschryver.dev/blog/auto-focus-a-form-control-with-an-angular-directive).

-------



In an application that has a lot of CRUD forms, it can be useful for users to give focus to a form control.
It's a small thing that can improve the user experience by a lot.
For example, when a modal opens and the user has to move the mouse towards the form control and click it, instead, the user can just start to type when the model is opened.

While it's possible to focus an element with the [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attribute, I found that creating an [Angular Directive](https://angular.io/guide/attribute-directives) is more convenient.

When the directive's `selector` is set to `form`, every form in the application will automatically focus the first form control.
The directive below also gives focus to the form control that's invalid when the form is submitted.

**Keep in mind, that giving a control auto-focus isn't always good for your users as it [reduces usability and accessibility](https://dequeuniversity.com/rules/axe-linter/1.0/no-autofocus).**

```ts
import {
  Directive,
  ElementRef,
  HostListener,
  AfterViewInit,
} from '@angular/core'

@Directive({
  selector: 'form',
})
export class FormFocusDirective implements AfterViewInit {
  focusables = ['input', 'select', 'textarea']

  constructor(private element: ElementRef) {}

  ngAfterViewInit() {
    const input = this.element.nativeElement.querySelector(
      this.focusables.join(','),
    )
    if (input) {
      input.focus()
    }
  }

  @HostListener('submit')
  submit() {
    const input = this.element.nativeElement.querySelector(
      this.focusables.map((x) => `${x}.ng-invalid`).join(','),
    )
    if (input) {
      input.focus()
    }
  }
}
```

<iframe src="https://stackblitz.com/edit/angular-j9pkwh?ctl=1&embed=1&file=src/app/form-focus.directive.ts" title="auto-focus" loading="lazy"></iframe>


-------

Follow me on Twitter at [@tim_deschryver](https://timdeschryver.dev/twitter) | Subscribe to the [Newsletter](https://timdeschryver.dev/newsletter) | Originally published on [timdeschryver.dev](https://timdeschryver.dev/blog/auto-focus-a-form-control-with-an-angular-directive).