teleren/devto huggingface dataset:
What is UTF-8 in html head?
Tags: javascript, beginners, webdev, html
Published: 2020-07-14 09:01:07

Do you see `<meta charset="UTF-8">` in html heads. If you know what this charset does then don't read further but if you don't you will learn something new.

When you write some text in your html code, to show exactly the same text, browser must know the charset of the document.
Let me make it easy for you. Just make an html file and add `<meta charset="ISO-8859-1">` in your html head. So now we are using charset ISO-8859-1 which was used earlier before utf-8.
Now in your html file add `<p>हर्ष</p>`. "हर्ष" is my name written in hindi language(language spoken in India). Now open the file in your browser. What do you see?? hahaha... you see something like "à¤œà¥ˆà¤¸à¤¾". Why is this so?? This is because the charset "ISO-8859-1" does not support hindi characters. That's why instead of my name some random characters appear in the browser. However if you change your charset to "utf-8" it will show you exactly the same you wrote in your code.

"utf-8" is the default character encoding for html5, meaning even if you don't declare the charset, browser will consider utf-8.

I hope that now you have the confidence to answer to the question "What is utf-8 or charset?".
Hey guys today I am going to tell you how to setup flutter and flutter web on windows 10
Tags: flutter, flutterweb, setup
Published: 2020-07-14 08:07:28

Before zooming in I would like to tell you the system requirments and apps required to setup and run flutter, flutter web.
####System Requirments
* windows 7 or later
* 64 bit
* 2 GB diskspace

####App Requirments
* powershell 5.0 (preinstalled with windows 10)
* git for windows
* Visual Studio Code
* Chrome

## Start by typing the following code:
        git clone https://github.com/flutter/flutter.git -b stable
Update your path
If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

* From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
* Under User variables check if there is an entry called Path:
* If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
* If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.
You have to close and reopen any existing console windows for these changes to take effect.

##Web setup

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

#### Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:
       flutter channel beta
       flutter upgrade
       flutter config --enable-web
<!-- This won't show up in the content! -->

#### Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.
       flutter devices

#### It should show you the following 
2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome     • chrome     • web-javascript • Google Chrome 81.0.4044.129


####To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

        flutter create myapp
        cd myapp

####To run your flutter app on web type the following command:

        flutter run -d chrome

#### It should show you this:

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vayxvk2sa9jnx9u0x10d.gif)
#### Now if you want to edit code then open your File Manager
right click on the folder you want to edit there you will see an option open with code click on that option and if you want to change or edit code go to lib folder and there you can add files and wright code remember your main application folder is "lib"

#### after changing code go to your powershell and type:
        r
####
####If you want to add packages go to pubspec.yaml file under


        flutter:sdk

add your package(pub.dev) after you add dependencies paste the package in your main.dart file and you are done.

https://github.com/neev123dev
https://dev.to/neev123dev
Learning is Work, Too
Tags: career, motivation
Published: 2020-07-14 08:05:12

So you go to college (or trade school, or an apprenticeship, or internship) and you learn the skills you need for your chosen profession.

Then, once you’ve finished learning, you start doing the job.
That’s how it works, right?
Wrong. Totally wrong.

In today’s work culture, we have this misconception that the path toward a career is a linear one: Learning first, then the job — once you’ve learned enough to be qualified for it.
That’s especially true for engineers.

Technology is such a rapidly and constantly changing field, there’s always more to learn. That’s why the idea that learning comes before work begins is completely backward. In reality, learning is a continuous process, and the best engineers are the ones who treat learning new skills as a part of their job — and never stop learning.

Engineers should take learning so seriously, it’s a part of their everyday work. Here’s why, and some strategies you can use to make sure you always keep learning.
 
### Work == Learning && Learning == Work

Why is it so important to keep learning throughout your career?
There are a lot of reasons.

For one, no matter your job experience and educational background, you probably aren’t immediately qualified for any role. Also, your field and job responsibilities aren’t going to stay static forever. Industries change. Technology changes. Job roles evolve. If you don’t learn new skills and technologies as they become relevant to your job, you’ll just get left behind by engineers who do take learning seriously.

Whether you’re motivated by wanting to be better at your job, or any of the myriad other benefits, it’s clear that lifelong learning is an important practice that all people should make a priority. Professionals need to find time to pursue learning on a regular basis. 

The landscape of technology and tech jobs is changing all the time. The only way to stay responsive to all those changes is by always being open to learning, and by striving to learn new things as often as possible.
4 Important Parts Of An Analytics Interview
Tags: beginners, productivity, career, learning
Published: 2020-07-14 08:03:52

#Key components of an Analytics Interview:

##1. 👶 Introduce Yourself

You have to ace this section. You can speak about anything and everything. **From the beginning of your life, until today, whatever you have done, try to explain how it helped you reach your decision of diving into analytics.**

##2. 👾 🤖 The "What Is Analytics" Section

Data Science, ML Engineer, BI Developer, Product Analyst, etc. have to usually face this part. **It revolves around concepts related to data science in general**, and this is where they get to understand your profile, and **dive deeper into your previous roles, academic achievements, and extra-curricular achievements** that are relevant to the role. They can dive deeper into an algorithm of your choice, and/or discuss your most recent project.

##3. 🤯 Statistics And Its Applications

**This is the make or break section** if you're going for a highly technical role. This is where pure statistical concepts are asked to be explained, and they try to understand how you'll apply that knowledge to their business. This is usually where it **starts getting highly technical in the interview, and a mix-up of concepts also happens**, so make sure to keep track of everything being asked, and answer accordingly.

##4. 👨‍🎓 👩‍🎓 Business Case

This is another important section, where **your approach needs to be domain-based**, i.e. before your interview, you have to thoroughly research the domain in which the company is working, and what are their most productive projects. You have to answer in this section, **using your inherent knowledge and the research that you do before the interview.**

Growing is a slow process sometimes. **Do not get disappointed if you don't crack an interview. You'll always have more chances.**

Just keep learning from experiences. And adapt accordingly.
Reuse navbar & footer using jquery error
Tags: help, html, javascript, jquery
Published: 2020-07-14 07:48:55

I was trying to reuse Navbar to all html page, so i try this code:

$(function(){
$('header').load('navbar.html');
});

And it was a success!

So i try to add navbar and footer at the same page then i try this:

$(function(){
$('header').load('navbar.html');
$('footer').load('footer.html');
});

But the only thing i see is the footer.

Can you help me to solve this?

I was trying to create my first project.
Github new profile feature with markdown tutorial
Tags: github, markdown, programming, youtube
Published: 2020-07-14 07:35:55

Hey Developers,
* I have created a tutorial for markdown files.
{% youtube x0Boemw9teU %}
* Cloned medium post is also created!
{% medium https://medium.com/@selvakumardhivakar/github-new-profile-feature-with-markdown-tutorial-90930dad8329 %}

## Content
---
* Markdown files are used to document about the projects that we have created. For Example. Github!
* Blogs sites like **Medium** and **Dev** are using it to create blogs.
* Documentation frameworks also using markdown files to create the entire documentation about any projects or frameworks. For Example, gitbook, docusaurus, etc.

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

* If you have already know "HTML", then you may know about h1 to h6 tags. Like that, we can create headings in markdown file also.
Use hash symbol before the heading text and you can change the size by adding hash symbols from 1 to 6 repeatedly.
* Normal text will be added by just typing it.
* Bold text can be created by enclosing double stars or underscores before and after the text.
* For italics, use single underscore before and after the text.
* To strike a text, use double tildo symbol before and after the text.
* Note: Don't give any spaces between the symbols and text.
* In markdown file, ordered list and unordered list can be created. Unordered lists can be created using star as well as dash symbol. Ordered lists or numbered list can be created using any starting number. 
* Use Greater than symbol (>) to create highlighted text.
* Horizontal line can be created using three underscores or dashes.
* In markdown file, **tables** can also be created using the following syntax. Use pipe symbol to specify each columns and dashes for dividers.
* Program code can be inserted into the markdown file. Code like css, javascript or bash commands! Three backquotes are used before and after the code! Css code can also used inside this area!
* A link can be directly pasted in the markdown editor, instead we can make it like a anchor tag in html.
* Inside a square brackets, the text will be placed and inside the braces, the link will be placed.
* Placing the image inside the anchor tage is also possible.
* Note: Make sure that you have given a correct image url, else alt text will be displaced with broken image thumbnail.
## Github new feature
---
* GitHub has recently released a feature that allows users to create a profile-level README to display on their GitHub profile.

* For Example, If you see my github profile page, you can see that profile-level README about me!

* If you like this video, make sure that you have subscribed to vuelancer! 

~ Thank You.

### Support Me
* [Youtube - Vuelancer](https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ)

* [Github - Vuelancer](https://github.com/vuelancer)

* [Scrimba](https://scrimba.com/@selvakumardhivakar)

* [Vuelancer - Patreon](https://patreon.com/vuelancer)
Vanilla JavaScript toggleAttribute
Tags: javascript
Published: 2020-07-14 07:26:13

In todays article we are going to look into the `JavaScript` `toggleAttribute()` method. This method is pretty self explaining, but it can be used to toggle a boolean attribute value.

What kind of attributes? We can think about a readonly value, required value, for instance.

In today's topic, we will look into toggling the readonly and required values of an input.

## HTML Structure

```html
<label
  >Required + ! ReadOnly
  <input id="inp-01" value="fuu" required />
</label>
<br /><br />
<label
  >! Required + ReadOnly
  <input id="inp-02" value="bar" readonly />
</label>
<br /><br />
<button onclick="toggleRequired()">Toggle Required</button>
<button onclick="toggleReadOnly()">Toggle ReadOnly</button>
```

So, we are having two inputs. One will be default required but not readonly and two will be the other way around.
Then we'll add two buttons which will toggle Required and Readonly attributes.

## JavaScript toggleAttribute Method

For the JavaScript we first get the two inputs and then define our two functions:

```js
var input01 = document.getElementById('inp-01');
var input02 = document.getElementById('inp-02');

function toggleRequired() {
  input01.toggleAttribute('required');
  input02.toggleAttribute('required');
}

function toggleReadOnly() {
  input01.toggleAttribute('readonly');
  input02.toggleAttribute('readonly');
}
```

There we go, we can now toggle the attributes on these inputs!

View it in action on Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="mdVjxeq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript toggleAttribute">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/mdVjxeq">
  Vanilla JavaScript toggleAttribute</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

The method is not supported in IE (😞), but we can use a [Polyfill](https://gist.github.com/rebelchris/365f26f95d7e9f432f64f21886d9b9ef) for it!

[View on CanIUse](https://caniuse.com/#feat=mdn-api_element_toggleattribute)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Code Reviews Comments Convention
Tags: git, productivity, collaboration
Published: 2020-07-14 07:22:49

A convention to clarify the intention of a comment in a Pull Request (PR) review using prefixes.

![xkcd standards](https://photos.collectednotes.com/photos/63/9be36614-4d0b-4c70-98f7-2ffab8ae783c)

*[Mandatory xkcd](https://xkcd.com/927/)*

Although it is possible to express the intent in the way the comment is written, it is easier to do so with a simple prefix. Not only it requires less words but it is also easier to take a quick look at the comments and understand what is the intention/meaning of each one.

My rule of thumb is, only reviews that include `[req]` and/or `[q]` should _Reject_ the PR. In other cases just make the review a _Comment_ or _Approve_.

## Prefixes

**`[req]` (requested change)**

Reviewer *believes* something should be changed.

**`[nth]` (nice to have)**

Reviewer suggests something better/more thorough/common pattern etc.

**`[pp]` (personal preference *of the reviewer*)**

This shows own opinion on style/unification etc. Might influence the author to apply some changes, but does not provide any benefits (it's not for optimization/better interfaces etc.)

**`[q]` (question)**

Reviewer would like to get some explanation on topic.

**`[fixed]`**

Author fixed/changed based on the comment.

**`[wont-fix]`**

Author declines the request. It should be first discussed with reviewer and explained in comment.

## Credits

To whoever came up with this convention 😅

If you know let me know, so I can credit & thank them! 🙏

---

**Happy and safe coding** ✌️
Dive into PHP8. Part 1 - Constructor Property Promotion
Tags: php, oop
Published: 2020-07-14 07:11:14

A new major version of PHP is set for an official release on **December 3**. Along with numerous bug fixes and small improvements, developers from around the globe will also get some new interesting features. The list isn't closed yet, but, despite that, we may already check what we can expect. I'm going to prepare a series of short articles, and each one will focus on something else. Let's start!

In the first post, I would like to introduce to you **Constructor Property Promotion**. A concept well known in languages such as Hack, Korlin or TypesScript is going to be introduced in PHP 8. How does it work and in what kind of situations can it be useful? Let's look at the example below:

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

Simple Value-Object, right? We deal with classes like these almost every day. Isn't it a little annoying that we must write the whole boilerplate code to set those values from constructor to class properties? Constructor Property Promotion feature will solve that problem for us, and enable writing the kind of code presented above more simply and shortly. Check it out:

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

We can simply add an access modifier before the type declaration of the constructor parameter, and that parameter will be automatically assigned to the class property with the same name. We can say that parameters which have a set access modifier are promoted.

It's possible to mix promoted properties with regular properties declaration. Here is an example:

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

The example provided above is equivalent to the code below:

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

Constructor Property Promotion will be available only for regular classes and traits. We won't be able to promote properties in interfaces and abstract classes (although we can declare __constructor() method in them).

If you use a lot of **Value Object (VO)** or **Data Transfer Object (DTO)** – Constructor Property Promotion will shorten and simplify your code. A similar feature has been requested for comments several times, but only the implementation written by Nikita Popov got enough positive votes and will be merged into the new PHP version. You can read more about it in this RFC.

In the next part of our "Dive into PHP8" series, we will be talking about the implementation of Union Types. Stay tuned!

---
This article was originally published on my company's blog. You can check it [here](https://blog.statscore.com/dive-into-php8-part-1-constructor-properties-promotion/).
Smishing: risks, examples and how to avoid it
Tags: phishing, smishing
Published: 2020-07-20 16:08:40

---
title: Smishing: risks, examples and how to avoid it
published: true
date: 2020-07-14 06:26:18 UTC
tags: phishing, smishing
canonical_url: https://www.ma-no.org/en/security/smishing-risks-examples-and-how-to-avoid-it
---

Do you know what smishing is, what risks it involves and how you can avoid it? The cyber-criminals are betting on the technique known as Smishing when it comes to defrauding users through text messages (SMS). The objective of Smishing is the same as that of other types of scams such as Phishing: to collect confidential data and obtain money illegally.According to a study by Experian, mobile phone users aged between 18 and 24 send more than 2022 texts per month (around 67 per day) and receive 1831 messages.In this article, we will explain the most relevant aspects of SMS… !

[READ MORE](https://www.ma-no.org/en/security/smishing-risks-examples-and-how-to-avoid-it)
New Launch AWS CoPilot
Tags: aws, docker, container, devops
Published: 2020-07-14 05:46:03

AWS has launched copilot, Its a container service integrates with Elastic Container Service. The copilot actually works like, You write a single docker file, and Copilot manages code push, build and launch in ECS. An automatic CI/CD pipeline is created by simply pushing to a Git Repository. By just providing your container Copilot handle high availability deployments and load balancer creation and configuration. And also future upgrades in copilot is Provision storage for your services. 

The Copilot has been focused on 3 main parts like 
 * Application
 * Environment 
 * Service

Follow the steps below to play around with AWS Copilot, 
```bash
curl -Lo /usr/local/bin/copilot https://github.com/aws/copilot-cli/releases/download/v0.1.0/copilot-darwin-v0.1.0 &&
  chmod +x /usr/local/bin/copilot &&
  copilot --help
```
After this, you'll see something like this in your terminal. 
 
![alt text](https://d2908q01vomqb2.cloudfront.net/fe2ef495a1152561572949784c16bf23abb28057/2020/06/24/copilot-help.png)

Then now lets UP a simple Dockerfile which has a Nginx web server in it. 

```DockerFile
FROM nginx:alpine
EXPOSE 80
COPY . /usr/share/nginx/html
```

This is the basic Dockerfile, it says the container to build an image called Nginx from Docker HUB. And expose 80 port for Nginx. Then Copy some basic HTML file to the container.

So when you run `copilot init` you'll something in your terminal like this. 

![alt text](https://d2908q01vomqb2.cloudfront.net/fe2ef495a1152561572949784c16bf23abb28057/2020/06/24/optimized-copilot-init.gif)

So here what happens is like, the CoPilot will find my Dockerfile and prompt for a few questions, That's it, BINGO... 

CoPilot offers a Log section to view what happens in it.
just by typing `copilot svc logs --follow`, This is how it looks like. 

![alt text](https://d2908q01vomqb2.cloudfront.net/fe2ef495a1152561572949784c16bf23abb28057/2020/06/24/copilot-service-logs.png)

> 2 Seconds, That's how long it takes a pit crew in F1 racing to get Four tyres off and on. what's your excuse now? Be productive and save time.
How To Download Instagram Reels Video
Published: 2020-07-14 05:37:09

Instagram recently rolled out reels short video making a feature in India with that you can make a 15-sec short video like TikTok, people start making video and reposting, and for reposting you need to download Instagram reels video, for that in this article I am going to explain how to download Instagram reels video, also this method allows you download Instagram Post, IGTV, Story so now with further ado let get started

How to Download Reels Video On Android 

Step.1 Go to Instagram open any reels video and click on below-given three-dot copy URL

Step.2 Download <a href="https://play.google.com/store/apps/details?id=photodownloader.videodownloader.storydownloader">Instagram Reels Downloader App</a>, open it and past copied URL and click on download button

Step.3 Check gallery, now you can see downloaded video available here
YouTube Video | Create a twitch clone using React -7
Tags: youtube, react, webdev, showdev
Published: 2020-07-14 05:37:02

This video is from my YouTube channel — **The Web Dev**. 

Here, we will create a clone of the popular streaming service [https://www.twitch.tv/](https://www.twitch.tv/) using ReactJS.

In the final part ,  We will create RTMP server and also connect through the open-source software OBS and begin live streaming.

{% youtube JCpnIVv77TQ %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | Create a twitch clone using React -6
Tags: youtube, react, webdev, showdev
Published: 2020-07-14 05:34:47

This video is from my YouTube channel — **The Web Dev**. 

Here, we will create a clone of the popular streaming service [https://www.twitch.tv/](https://www.twitch.tv/) using ReactJS.

In this part ,  We will next create our Delete component. We are going to show a modal to the delete the stream.

{% youtube sIPtflmcSL0 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.