teleren/devto huggingface dataset:
Dynamic typing in Javascript
Tags: dynamictyping, javascript
Published: 2021-06-22 18:50:15

## what is dynamic typing ?

![Dynamic typing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw7mb172d4s3f3m7ojn1.png)

Javascript is a dynamic typing language. When you declare a variable, you do not need to specify what type this variable is. Javascript engine infers what type this variable is based on the value assigned to at run time.

example:

let name= "bob";
console.log(typoeof name);

name=5

console.log(typeof name);


firstly, the variable was a string and now it is of number datatype.
same thing can be done with null and undefined as well nd amongst any datatypes for that matter of fact.

## Pros and Cons of Dynamic typing in JavaScript

###Pros:

1.Deals naturally with certain types of self-describing data.
2.Code can be use polymorphically without programmer decoration.
3.Tends to reduce unnecessary clutter and duplication/repetition in code.

###Cons:

1.More errors detected later in development and in maintenance.
2.More errors at runtime and in shipped code.
3.Tends to prohibit compilation and yields poor performing code.
4.Need to write entirely mechanical tests for type correctness.
View code snippets in fullscreen mode
Tags: productivity, angular, opensource, codever
Published: 2021-06-22 18:40:36

You can now view the code snippets in fullscreen mode if they are too long or some of the lines too wide:

![Enter full screen mode from snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkmnt4m4tf1tdey0jo1q.gif)

For the implementation in frontend with Angular I used screenfull.js[^1], which is a simple wrapper for cross-browser usage of the JavaScript Fullscreen API[^2].

[^1]: <https://github.com/sindresorhus/screenfull.js/>
[^2]: <https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API>

> :point_right: See [How to display an element in full screen in Angular with screenfull.js](https://www.codepedia.org/ama/how-to-display-element-in-fullscreen-in-angular) for complete details about the implementation

<hr/>

> :point_right: The whole source code of the project is available on [Github](https://github.com/codeverland/codever)
Values and Variables in JavaScript
Tags: variables, javascript
Published: 2021-06-22 18:40:25

![variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrezaipbkretx5xl1q61.jpg)


## Variables in JavaScript

There are 3 ways to declare a JavaScript variable:

1.Using var

2.Using let

3.Using const

Variables are containers for storing data (values).

In this example, x, y, and z, are variables, declared with the var keyword:

Example
var x = 5;
var y = 6;
var z = x + y;

From the example above, you can expect:

x stores the value 5

y stores the value 6

z stores the value 11

example 2:

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

In programming, just like in algebra, we use variables (like price1) to hold values.

In programming, just like in algebra, we use variables in expressions (total = price1 + price2).

From the example above, you can calculate the total to be 11.

the let and const ways of declaring variables are used and var is comparitively an old way of declaring variables in javascript.

## Naming Conventions for variables and constants in JavaScript


![Naming conventions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0ni4olembuumpzs3vwj.jpg)


1.reserved keywords cannot be used as variable names
   let new=27;
   let function = 'fun'; //error as function cannot be a name
 
2.variable names can start with $ or underscores and alphabets 
  only.
    let$function = 3; // this is allowed
 
3.conventionally variables must not start with caps until its a 
  class or constant
  let Person = 'Jonas'; 
 
4.constants are writtern with upper case
    let PI = 3.1233; 
 
5.naming conventions that involve elaborate wordings are prefered 
  over including numbers in the declaration.
   
    let myFirstJob = "programmer";
    let myCurrentJob = "teacher";

    let country = "India";
    let continent = "Asia";
    let population = 565756767687;
 
    let job1="programmer";
    let job2="teacher";
 
## More Examples on using variables 
    1.declaring a variable and assigning a value to the variable
       let js = 'amazing';

    2. console.log() is used whenever we need to output something 
       to the browser

       console.log(40*8+23-10);
       console.log("Jonas");
       console.log(23);
 
       let firstName = "Jonas";  //first_name notation isalso used
       console.log(firstName);
 
  3.camel case is used when more than one words are used
   
    let 3years=7;//variable name cannot start with a number 
    let first_name ="aishwarya";

    let jonas$natella ='JN'// error as we can have only 
     numbers,letters,and underscores
easy way to create a navbar and toggle icon (hamburger menu)in bootstrap
Tags: html, vscode, bootstrap
Published: 2021-06-22 18:39:03

using bootstrap is very simple by this you can create navbar + menu bar when it hits smaller screen(568px) or medium screen(768px) then the menu bar appear and bootstrap is more responsive then css

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

output:
![pic 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekp4s5fwamj3gtxc03ml.png)
The most common problem in React code
Tags: react, state
Published: 2021-06-22 18:38:43

I started playing with React about 5 years ago. The most common problem I've seen in React code is **duplicate state**.

Duplicate state always leads to problems.

So what do I mean with duplicate state?

Let's say we have a component that displays blogposts:

```jsx
function Blogposts({ blogposts }) {
  return <ul>{blogposts.map(blogpost => ...)}</ul>
}
```

If we want to add a search to this list of blogposts:

```jsx
function Blogposts({ blogposts }) {
  const [filtered, setFiltered] = useState(blogposts)
  const [search, setSearch] = useState("")

  return (
    <div>
      <input
        type="text"
        onChange={e => {
          setSearch(e.target.value)
          setFiltered(
            blogposts.filter(
              blogpost => e.target.value === "" || blogpost.title.includes(e.target.value))
            )
          )
        }}
        value={search}
        placeholder="Search"
      />
      <ul>{filtered.map(blogpost => ...)}</ul>
    </div>
  )
}
```

Note: We want to show all blogposts if the search is empty (`e.target.value === ""`)

This will work but there are some flaws with this approach:
* If `blogposts` changes, we'll need to make sure that the `filtered` list is updated
* If we want to persist the `search` parameter across pages (e.g. using a query parameter) we'll need to make sure the `filtered` list is initialised correctly
* The component is hard to reason about

We'll have to make sure `filtered` is always up-to-date.

This becomes a lot harder with bigger components.

How can we fix this?

In this case we can calculate the `filtered` list if we have `blogposts` and `search`:

```jsx
function Blogposts({ blogposts }) {
  const [search, setSearch] = useState("")

  return (
    <div>
      <input
        type="text"
        onChange={e => setSearch(e.target.value)}
        value={search}
        placeholder="Search"
      />
      <ul>
       {blogposts
         .filter(
           blogpost => search === "" || blogpost.title.includes(search)
         )
         .map(blogpost => ...)
       }
      </ul>
    </div>
  )
}
```

We calculate the filtered list as part of the render cycle of the component.

Whenever the state changes, the component will re-render.

This means that we no longer have to keep `filtered` up-to-date:
* We free our minds from having to think about `filtered`
* The filtered list will always be correct
* The component is easier to reason about

So here's my personal rule:

Always derive from the state if possible.

What about performance?

In most cases it's negligible because JavaScript is fast (unless you're computing heavy stuff).

You can use [`useMemo`](https://reactjs.org/docs/hooks-reference.html#usememo) if you need too.

Let me know if this blogpost was helpful! 😊
Focus-visible: The Unsung Hero
Tags: css, webdev, codenewbie
Published: 2021-06-22 18:22:04

You find a lot of edge cases building UI's. Accessibly opening a modal, scroll-lock, strange focus states, etc..., and the solution to those edge cases aren't always apparent.

Well, I just found one that I already knew the answer too but forgot- so I'm writing this article to cement in my head and share the knowledge with all of you!

## What is :focus-visible?
According the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible), `:focus-visible` is a pseudo-class that applies while an element matches the `:focus` pseudo-class and determines vie heuristics that the focus should be made evident on the element.

In human speak? The browser determines if the `:focus` came from a click event or keyboard event and applies the styles accordingly. In most cases, that means that it won't apply the `:focus` styles from a click event.

That means that you give your keyboard users the focus styles they may want/need/desire without having a potentially jarring user experience for your mouse users.

## What was the problem?
The issue I ran into was that I needed an element to have focus styles for accessibility's sake- but I didn't need some of those focus styles to apply when it was clicked. 

To be even more clear, the hover and focus styles are the same. I wanted the hover styles to apply on hover but I didn't need the focus styles to linger after the element was clicked.

```css
.logo-link:hover,
.logo-link:focus,
.initial-display {
  .logo-text {
    @apply translate-y-0;
  }
  .logo-type {
    @apply opacity-100;
  }
  .logo-tagline {
    @apply opacity-80;
  }
}
```

You can see there wasn't much to the styles, but the client was adamant about this user experience.

## The Solution
The answer to this problem was only 8 characters long!

Adding `-visible` to the end of the `:focus` pseudo-class was all it took. 

```css
.logo-link:hover,
.logo-link:focus-visible,
.initial-display {
  .logo-text {
    @apply translate-y-0;
  }
  .logo-type {
    @apply opacity-100;
  }
  .logo-tagline {
    @apply opacity-80;
  }
}
```

## Now I can see clearly
I was absolutely ready to go town with javascript by using a click event to force `.blur()` and be as strong-handed as I needed to be to make it work.

I mentioned earlier that I knew this answer, but that I didn't come to this solution on my own. A co-worker suggested `:focus-visible` and it immediately came rushing back.

I ran into this exact problem a couple of months and the fix was the exact same thing!

## Can I Use
There is one caveat to `:focus-visible`, and that is that it doesn't have full browser support yet.

You can see in the image below that it has decent coverage of around 70%, but it has 0 support in Safari, so you'll have to be sure to cover all of your bases and add in some [polyfills](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill).

![A chart showing browser support for the pseudo-class focus-visible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouorq3mk4tu56nwf9qfo.png)
Composition of type validators in TypeScript
Tags: typescript, javascript, tutorial
Published: 2021-06-22 18:14:13

In this article, You can find some type validation techniques.

Let's start with simple function

Assume, our function argument should be always some CSS value. For example: 100px, 10rem, 50% etc ...

First of all we should check if value ends with some allowed measure units:
```typescript
type Units = 'px' | 'rem' | '%';
```
Now, we should be able to split our measure units into two parts: number and unit

```typescript

type Units = 'px' | 'rem' | '%';

type IsValidCSS<T extends string> = T extends `${number}${Units}` ? true : false;

type Result = IsValidCSS<'10px'> // true
type Result2 = IsValidCSS<'10p'> // false
```
Lets write generic validator:

```typescript
type Units = 'px' | 'rem' | '%';

type IsValidCSS<T extends string> = T extends `${number}${Units}` ? true : false;

type Validator<T extends boolean> = T extends true ? [] : [never];

type Test = Validator<IsValidCSS<'10px'>> // []
```
Please, give me a minute, I will explain why we need an array as a return type from Validator

Let's try it
```typescript
const foo = <T,>(arg: T, ...validation: Validator<IsValidCSS<T>>) => {}

foo('10px'); // error
```

Still does not work, because argument is infered to string instead of literal `10px`.

In order to fix it, we should apply additional constraints to the generic type:
```typescript
const foo = <T extends string>(arg: T, ...validation: Validator<IsValidCSS<T>>) => {}

foo('10px'); // ok
foo('10%'); // ok
foo('10p'); // error
```

Is it possible to apply several validators?

Assume, we are not allowed to use `99` in our CSS

```typescript
type Units = 'px' | 'rem' | '%';

type IsValidCSS<T> = T extends `${number}${Units}` ? true : false;

type StringNumber<T extends number> = `${T}`;

type IsAllowedNumber<T> = 
  T extends `${infer Num}${Units}` 
  ? Num extends StringNumber<99> 
  ? false 
  : true 
  : false;

type Validator<T extends boolean> = 
  T extends true 
  ? [] 
  : ['Dear developer, please use valid CSS values'];

const foo = <T extends string>
  (
    arg: T,
    ...validation: [...Validator<IsValidCSS<T>>, ...Validator<IsAllowedNumber<T>>]
  ) => { }

foo('100px'); // ok
foo('99px'); // expected error
```

Each time, when `Validator` fails, it returns `[never]` and because we are using rest operator it evaluates to `never`.

So if `Validator` has failed, TS expects second argument which is `never`.

That's all.
Introduction to JavaScript
Tags: javascript
Published: 2021-06-22 18:11:57

![Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scx37bddb257xm8gn3pi.png)


## What is Javascript?
javascript is a high-level object oriented multi-paradigm programming language.breaking down the description everyone has an intiuition on what is a programming language.object oriented programming languages deal with OOP concepts.Object-oriented language uses an object-oriented programming technique that binds related data and functions into an object and encourages reuse of these objects within the same and other programs. languages such as C++,Java,Python are some of the well known programming languages.The idea of a multiparadigm language is to provide a framework in which programmers can work in a variety of styles, freely intermixing constructs from different paradigms.

[explore more on object oriented programming](https://www.geeksforgeeks.org/introduction-object-oriented-programming-javascript/)

[explore more on programming paradigms](https://www.geeksforgeeks.org/introduction-object-oriented-programming-javascript/)

## Where is JavaScript beign used?
JavaScript is mainly used for web-based applications and web browsers. But JavaScript is also used beyond the Web in software, servers and embedded hardware controls. Here are some basic things JavaScript is used for:

1.Adding interactive behavior to web pages
JavaScript allows users to interact with web pages. There are almost no limits to the things you can do with JavaScript on a web page 

2.Creating web and mobile apps
Developers can use various JavaScript frameworks for developing and building web and mobile apps. 

3.Building web servers and developing server applications

4.Game development

 
## Role of JavaScript in Web development

![JavaScript and WebDev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x26mr77zc5zvab5uh3lp.png)

In frontend development html,css and javascript is used. html acts like a noun it says what the text is example <p></p>is a paragraph. the css aspect of the page acts like an adjective describing the html eg. the paragraph is red. and the javascript acts like an verb saying the action on what is to be done with it eg. hide the paragraph.

## How to integrate JavaScript with html files?
   We can use google chrom console to execute basci Javascript 
   expressions but its not always what we want to!. so,how to 
   integrate html and css code with javascript?. this is usually 
   done in the index.html file itself by including the path to the
   javascript file.
The Utmost Importance of CRM Analytics  
Tags: crm, analytics
Published: 2021-06-22 13:33:26

Businesses need to manage their relationship with customers efficiently to make a positive impact on their brand. Irrespective of your company type, size, or sector, it is crucial to maintain a loyal, honest and sustainable relationship with your customers. Bygone are those days when simple marketing, advertising, and sales strategy would help you close the deal. The market and consumer demands are evolving, and it crucial to suffice and exceed them.   

The consumer today has become more intelligent and does not fall for poor marketing campaigns; they need more transparency and truth. Social media is a robust tool to spread negative or positive words; also, they can tag the brand to point fingers directly. Additionally, the businesses can track the digital footprint of their clients to understand their preferences and deliver a customized shopping experience.   

  

What is the influence of CRM analytics on your business?  

   

Customer relationship management analytics can impact your business in multiple aspects. This software helps to get detailed, accurate, and real-time information on your overall business processes. The following points of CRM analytics will help your business and make it more efficient:  

Customer distribution:    

Profit margin analytics:   

Interactive and intuitive customer experience:   

Optimize all the marketing and sales campaigns:   

Bridge the gap between the market needs and sales:  

Accurate predictions:    

Integrate all the team's tasks:  
  
Read more https://technologycounter.com/crm-software
  

Conclusion:  

The CRM software is a robust tool for any business that helps with analytics; that is essential for your business to grow. This software will provide accurate, detailed, and precise analytics for your business that will enrich your business and deliver top-notch customer service.
Layout Responsivo
Tags: css, html, programming, javascript
Published: 2021-06-22 18:05:01

 Eae Dev olha só essa **DICA** que vai te **ajudar** muito **!!!**

**Primeiro passo é abrir seu navegador**
*Depois pesquisar a extensão "window resizer"*
*Para facilitar aqui está o link da extensão https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=pt-BR*

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66qoyf4h374ld8jw0chm.png)
*Agora vamos instalar ela, é bem simples e rápido* 
basta clicar em ***"usar no chrome"***
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg3rhlggpbzblbs8w5nh.png)
**Depois de instalada a extensão** *observe ela lá em cima*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8yzvng3cjzvaruouids.jpg)
***SIM*** ! *Você pode seu projeto em múltiplas dimensões*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmh5ps1j1jfxw0qo0cx4.jpg)
*depois de selecionar a resolução clique na tecla "P" do seu teclado , assim vai facilitar a sua visualização*
![uod3svmwxahwurb2eehb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxhx4351x91khg8oxnq5.jpg)
 
 Eai gostou dessa dica ? caso algo não ficou claro para você deixe seu feedback !
Venha ser uma pessoa Senior Engineering Manager na SumUp!
Tags: engineering, fintech, techdevelopment
Published: 2021-06-22 18:03:40

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n20t6kekx4tpapi8ns1d.jpg)

<b>VAGA DESTAQUE DO DIA!<b>


Estamos buscando uma pessoa Senior Engineering Manager pra tribo de Acquisition! 


O que a gente precisa:


➡Experiência com Desenvolvimento de Software;

➡Experiência com people management/liderança de pessoas;

➡Fera no inglês;


Já trabalhou ou conhece alguém que traz esse conhecimento? Inscreva-se neste link: https://bit.ly/3vRziwm ou compartilhe essa oportunidade na sua rede.
PatchNote du 08/06/2021
Tags: news, minecraft, pofacraft
Published: 2021-06-22 17:59:24

Bienvenue sur le PatchNote du **mardi 22 juin 2021**.

Ce mardi 22 juin à 14h30 (UTC+2), Pofacraft a effectué une petite mise à jour avec des corrections de bugs et des petits ajouts.
**On vous en dit plus juste ici 👇**
![PatchNotesAjouts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbp97wh54p8943fxtjxq.png)
#Sheep-Wars
Il était enfin temps😅
Nous ajoutons le mouton **Fly** qui lui sera multicolore.🏳‍🌈
Un ajout qui nous permettras de nous différencier des autres ce sont les **pouvoirs**.😎 
Nous allons commencer a les leaks dans nos patchnotes.😀
Et nous ajouterons un message dans le chat quand un pouvoir sera débloqué

#Discord
Nous ajoutons des emojis et des events (giveaway et plein d'autre) sur le discord ce qui le rendra beaucoup plus actif et ce qui vous donnera envie de rester ! 

#Recrutements Rédacteur
Nous cherchons actuellement des rédacteurs pour nous aider sur la rédaction des patchnotes et d'autre surprise en cours n'hésitez pas a venir voir sur discord !"  $leepaiiFX#0667 qui vous donnera plus d'informations sur la chose

Encore une fois merci d'avoir lu ce document en espérant qu'il vous aura plu.😋

Nous attendons votre avis avec impatience en commentaire 🥰

`this.setWriter("SleepaiiFX")
this.setDevlopper("SleepaiiFX")
this.setCorrection("yani")`
How to Disable Users from Login in Laravel
Tags: laravel, programming, php, tutorial
Published: 2021-06-22 17:51:56

Laravel 8 does not include the auth system by default now, You can Read [Laravel 8 Authentication](https://dev.to/techtoolindia/laravel-8-authentication-n40).

The common feature of ban or suspend any user from authentication is major missing in Laravel. 

Here is What the login form Will looks like after banning any user from the application.
![Suspended User](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5nnru53lge41sa8tzya.png)

# Steps To Achieve the outcome

##Step 1 - Add New Column 'status' in the users table

Create a migration by running the command below

```php
php artisan make:migration add_status_to_users_table
```
After Migration File created update the following code in the up() function.

```php
Schema::table('users', function (Blueprint $table) {
    $table->integer('status')->default(1);
});
```
Add 'status' in Fillable in app\Models\User.php

```php
protected $fillable = [
        'name',
        'email',
        'password',
        'status'
];
```

##Step 2 - Create a Middleware - CheckBanned

Create a middleware by running the command below.

```php
php artisan make:middleware CheckBanned
```

Replace the handle method in app/Http/CheckBanned.php

```php
public function handle(Request $request, Closure $next)
{
    if(auth()->check() && (auth()->user()->status == 0)){
            Auth::logout();

            $request->session()->invalidate();

            $request->session()->regenerateToken();

            return redirect()->route('login')->with('error', 'Your Account is suspended, please contact Admin.');

    }
        
    return $next($request);
}
```

##Step 3 - Register the Middleware - app/Http/Kernel.php

IN 'web' Middleware group register the CheckBanned Middleware by putting the code below.

```php
\App\Http\Middleware\CheckBanned::class,
```
##Step 4 - Display The Error on the log in page.

Open login blade 'resources/views/auth/login.blade.php'

Add The following code to display the error message.

```php
@if (session('error'))
   <div class="alert alert-danger">
        {{ session('error') }}
   </div>
@endif
```

You can watch the video for complete Explanation and implementation.

{% youtube MY6BcDW8zwo %}

Thank You for Reading

Reach Out To me.
[Twitter](https://twitter.com/techtoolindia)
[Instagram](https://www.instagram.com/techtoolindia/)
[TechToolIndia](https://youtube.com/techtoolindia)