teleren/devto huggingface dataset:
CyberLearning: Immersive Labs
Tags: cybersecurity, security, learning, cyberlearning
Published: 2020-11-10 06:06:25

![Screen Shot 2020-11-10 at 12.50.05 AM](https://dev-to-uploads.s3.amazonaws.com/i/pnfb8ad7bwrj3rlbokya.png)

Over the weekend, I had a chance to play with another Cybersecurity learning platform, Immersive Labs! It was introduced by Ellis Collins. (Thank you :]) I used the community version they offer. It has many interesting labs, and especially, I really enjoyed the ones with notorious CVEs, such as CVE-2020-1472 (Zerologon) and CVE-2020-5902 (F5 BIG-IP). It was very well thought-out and developed labs. All the labs can also be done with using web browser, which I really liked since I did not have to use any of my local terminal or additional VMs.

If you are interested in trying some quality Cybersecurity learning labs, give it a try: https://immersivelabs.online/
For Loop in JavaScript / ReactJS
Tags: react, javascript
Published: 2020-11-10 06:05:01

A for loop can not be used directly in the JSX block. So we can not use it inside the **return** block.

So we have to make a function for that. The function can either be it the main functional block or the custom function made inside the main function. Here I've used the main **App** function block only.
 
```
export default function App() {
    const items = [];

    for (var i = 0; i < 20; i = i + 3) {
        const itemsArr = [];
        for (var j = i; j < i + 3; j++) {
            itemsArr.push(<span>{j}</span>);
        }
        items.push(<div>{itemsArr}</div>);
    }

    return items;
}
```
Completed Hacktoberfest-2020 successfully
Tags: hacktoberfest
Published: 2020-11-10 05:51:18

I participated hacktoberfest for the first time. It was a great opportunity to more familiarize with github and for the first time I got chance to contribute to open source projects. 

The contributions that I have done for the hacktoberfest-2020 are;

-  Added login_shivanthi folder to PrajjwalDatir/WebsiteTemplates
-  Added RegisterUser_shivanthi-fernando folder to PrajjwalDatir/WebsiteTemplates
-  Added ContactMe_shivanthi-fernando folder to PrajjwalDatir/WebsiteTemplates
-  Added navbar_shivanthi-fernando folder to PrajjwalDatir/WebsiteTemplates
-  Added e-commerce-shivanthi-fernando folder to PrajjwalDatir/WebsiteTemplates

I would like to thank "DigitalOcean" for conducting this event and  specially the maintainers who accepted my PR's. I'm looking forword to participate for the future events of hacktoberfest.
Advance JS Quiz Series (Part-1)
Tags: javascript, quiz, challenge, webdev
Published: 2020-11-10 05:43:58

###### 1. What's the output?

```javascript
let c = { greeting: 'Hey!' };
let d;

d = c;
c.greeting = 'Hello';
console.log(d.greeting);
```

- A: `Hello`
- B: `Hey!`
- C: `undefined`
- D: `ReferenceError`
- E: `TypeError`

####Comment your Answer Below
My Coding journey! - Journal #1
Published: 2020-11-10 05:42:31

Hello, everyone! My name is Filipe Marques and I'm 26 years old. I decided to start this journey catalog to mark my improvements as a Web Developer. I first discovered coding in High School when I joined a Game Dev Program, back when I lived in Brazil, and fell in love with the career ever since. I moved to the United Stats in 2014, and decided to enroll in college and get my programming career started. Unfortunately life got in the way and I had to drop out and dedicate myself to working full-time (and some more) to help and support my family.

Six years here in the United States and now I finally can get back to my dream career and improve my coding skills. I enrolled in online classes and also got myself into a few coding websites, such as CodeCademy and Udemy. So far I've been able to learn everything with ease and I'm halfway through most of my courses. Some say it would be best to stick to just one and learn from it until the end, but I find helpful that what some platforms don't cover completely others do.

Today is a new day this new chapter of my life and I feel great about it. I created the "basic shell" of what will be my portfolio webpage, please check it out and send feedback as it evolves! I'll try to keep posting every week with updates of my learning experiences and on my portfolio. Make sure to follow! Thank you for reading!

Here is the link to my portfolio: https://filipeqm94.github.io/portifolio/

Projects and improvements coming soon!
Why did I decide to learn software engineering?
Published: 2020-11-09 23:48:29

Lets start by saying I was never good in school. I was easily distracted and got average grades even when I tried my best. I started college right out of high school, it did not go so well and I decided it was not for me. I worked as a waitress for years and always knew that it wouldn't last forever. It can be emotionally draining to wait on people every day. After years of feeling beat down and poor, I decided I was only going to succeed with some schooling to back me up. I reluctantly went back to college for a 2 year degree in restaurant management. Surprisingly to me, I did amazing in my classes. I got good grades and really felt smart for the first time. I always thought I was kind of dumb before that. Right out of school I got a management job working in a popular chain restaurant. I tired to be the manager I wish I had all of those years. For a while it was great and I felt accomplished. I had a store that ran great and made me lots of money. About a year ago I moved to be closer to family and my 95 year old grandmother. She has just recently started showing signs of Alzheimer's and I decided to live with her so I could keep an eye on how she was progressing through the disease. I also could not give up this opportunity to make so many new memories while she is still around. I transferred to a new store thinking it would be great as well and it was not. I found myself throwing all of my emotions and energy into a failing store. There was so much to do that I hardly ate during the day, even though I was literally surrounded by food. I was no longer the manager I wanted to be and could not support the store while always running on empty. Then covid hit the United States. So many changes were made and we did our best to adapt and stay safe but four months later, we had employees testing positive for the virus. The company reported this to the county who in turn told them to "deep clean". I could not believe it. I knew I could move out and continue working there or I could leave a job I was already mentally done with. I knew that even a new restaurant would eventually not suit me anymore. I knew it was time for a CHANGE! My mom had always preached about the technology field and coding. I knew if I was ever going to try something this new and this bold it was now. I am channeling that same energy that got me through my 2 year degree and I am ready to apply everything towards this new career. Although it all sounds like gibberish I am taking my notes and pushing through the best I can. Here goes nothing.....
Elixir code template with __using__ macro
Tags: elixir
Published: 2020-11-10 05:00:05

[Macro](https://hexdocs.pm/elixir/Macro.html#content) ใน Elixir เป็นกระบวนการ code transformation คือรับ AST (Abstract Syntax Tree เป็นโครงสร้างแทน source code) เป็น input แล้วสามารถ process บางอย่างเพื่อส่ง AST output ที่อยากได้กลับออกไป

Elixir มี [use/2](https://hexdocs.pm/elixir/Kernel.html#use/2) ซึ่งเป็น macro ที่ติดมากับ Kernel module สำหรับให้เราสร้าง code template แล้วใช้ use เพื่อ inject โค้ดเข้ามาใน module ที่อื่นที่เราต้องการได้

use รับค่า 2 อย่างคือ ชื่อ Module ที่จะเป็นส่วน generate code ที่จะถูก inject เข้ามา กับ option อื่นๆถ้ามี

ส่วน Module ที่ถูก inject เข้ามาสามารถสร้าง code template ได้โดยการสร้าง macro ชื่อ `__using__/1` โดยรับ options เป็น parameter แล้วให้เขียนโค้ดที่ต้องการ inject ไว้ใน macro `__using__` นี่แหละ

ตัวอย่างเช่น เราจะสร้าง module Greeter เพื่อเก็บ template ของ function `say/0` แบบนี้

```elixir
defmodule Greeter do
  defmacro __using__(opts) do
    quote do
      def say do
        opts = unquote(opts)
        name = opts[:name] || "World"
        IO.puts("Hello #{name}")
      end
    end
  end
end
```

เราสามารถ inject function `say/0` เข้าไปใน module อื่นได้โดยใช้ `use` แบบนี้

```elixir
defmodule Hello do
  use Greeter,
    name: "Por"
end
```

ทำให้ module Hello มี method `say` ที่จะ print `Hello Por` แบบนี้

```
iex(4)> Hello.say
Hello Por
:ok
```

นี้คือกลไกการทำงานของ `use/2` ที่แม้ว่าเราอาจจะไม่ได้เขียน module template เอง แต่คงทำให้เข้าใจมากขึ้นเพราะเราจะได้ใช้ `use/2` บ่อยมากๆกับ library อย่าง Phoenix หรือ Ecto
9 Best Online Courses for Computer Vision You Need to Know
Tags: datascience, machinelearning, career
Published: 2020-11-10 04:53:36

Computer vision is the technology that enables the **digital world to interact with the physical world.** So if you are looking for some **best online courses for computer vision**, then give your few minutes to this article. In this article, I have listed the 9 best computer vision online courses.

Computer vision is used for **face recognition, Optical Character Recognition, Object Recognition, 3D imaging, and image-guided surgery, etc**. Computer vision enables **self-driving cars** to make sense of their surroundings. There are lots of other applications of computer vision.


The scope of computer vision is growing fast. According to a report, the market for computer vision is expected to increase from **US$10.9 billion in 2019 to US$17.4 billion by 2024, at a growing CAGR of 7.8%.**

When it comes to learning computer vision, we might get confused, because there are lots of resources available. But I have chosen some best online courses for computer vision. I have filtered these courses on the following criteria-

##**Criteria-**

1. Rating of these Courses.
2. Coverage of Topics.
3. Engaging trainer and Interesting lectures.
4. Number of Students Benefitted.
5. Good Reviews from various aggregators and forums.


So, without further ado, let’s start finding Best Online Courses for Computer Vision.[Click to Continue Reading...](https://www.mltut.com/best-online-courses-for-computer-vision/)
How to reduce the Number of API call requests
Published: 2020-11-10 04:53:34

![Spotify API Vikas Singh](https://dev-to-uploads.s3.amazonaws.com/i/hr276zwrvckhu3u9xudj.png)
What are the ways/strategies you know to reduce the number of API requests(API request call limit)?

__Here is mine!__
To reduce the number of requests, use endpoints that fetch multiple entities in one request. 

For example, you are using SpotifyAPI, so rather than requesting single tracks, albums, or artists,  use endpoints such as Get Several Tracks, Get Several Albums or Get Several Artists, instead.
Project 8 of 100 - Conditional Render Navbar
Tags: react, javascript, 100daysofcode
Published: 2020-11-10 04:49:01

On to project 8 of 100. Today I wanted to practice conditionally rendering a navbar and a page component. It's called a single page application for a reason, right?

This time I did things in the old school way- the .NET way- and just changed the page that was rendering inside of a page container. That means the navbar never leaves and (obviously, it's React) the page itself never refreshes. 

##Design
To accomplish this I build two components- `<Navbar />` and `<PageContainer />`. I also built three pages: components that would live inside the <PageContainer /> div. I cleverly named them Page1, Page2, and Page3.

In the App component's state I created an activePage property that was set to 1 by default. This keeps track of which page we are rendering inside the <PageContainer /> and also tells the <Navbar /> which nav item is selected, so that it appears 'selected' with a darker background color.

Obviously, switching between a couple of pages in pure HTML is child's play. Or at least it's easy and doesn't involve code. In React, doing this is a worthwhile exercise, especially when updating multiple components at the same time given a change in state.

##Challenges
The two challenges I met while creating this project were the following:
1. **The `this` keyword and props** - How annoying is it that when you're passing a state property to a component you can forget the `this` keyword and the entire program crashes? Though it's always a good reality-check about Javascript scope when it happens.
2. **Passing data from a component to App state** - This is a more understandable mistake, as without React Hooks it's hard to share data from a component with the app. 
I solved the problem by reading this [awesome free article](https://www.pluralsight.com/guides/how-to-access-custom-attributes-from-aevent-object-in-react) from Pluralsight and then in the <Navbar /> child component passing each nav item a custom attribute called `item`.
Next, I created a function in the App component to set state based on `e.target.getAttribute("item")`. Pretty cool, eh? I expect there is a more sophisticated way of doing this than literally reading the html attribute from a component- but sometimes it's fun to do it the old school way.

Alright, that's it for today!

*Github repo [here](https://github.com/jwhubert91/100daysofreact/tree/master/day-9-conditional-render-navbar)
*Deployed app [here](https://100-react-projects-day-9-navbar.netlify.app/)

Follow 4 follow me on my new development-only Twitter:
[twitter.com/jwhubert91](https://twitter.com/jwhubert91)
Why CSS :focus-within is amazing
Tags: css
Published: 2020-11-10 04:40:29

This is not a :focus selector, which will highlight when you focus on an element.
But a selector to fire when something within is focussed.

In our case, we'll be focusing on forms (I see what you did there 😏)

The end result will look like this:

![CSS focus-within selector](https://cdn.hashnode.com/res/hashnode/image/upload/v1604594756589/SX71OB4Nt.gif)

## HTML Structure

As for our HTML, we wil create a form with 2 inputs.

```html
<form>
  <label for="username">Username</label>
  <input type="text" name="username" />
  <br /><br />
   <label for="password">Password</label>
  <input type="password" name="username" />
</form>
```

That's all we need for this specific demo.

## CSS focus-within pseudo selector

The :focus-within is a [pseudo-selector](https://daily-dev-tips.com/posts/css-pseudo-elements/), like :before or :after.

Let's first add some basic styling.

```css
body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
form {
  border: 1px dashed #333;
  padding: 25px;
}
```

This will make sure our form is [absolutely centered](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/) on the page and has a small border to showcase our effect later on.

Now we want to draw the users attention to the form, but making it a fancy colour when they focus an input field.

```css
form {
  border: 1px dashed #333;
  padding: 25px;
  transition: background 0.3s ease;
}
form:focus-within {
	background: #f4d35e;
}
``` 

This will change the background of our form to yellow.

You can see this in this Codepen.

{% codepen https://codepen.io/rebelchris/pen/GRqBXxY %}

## Making it more awesome

Yes, we can even make it more awesome by using a box-shadow hack we can create a kind of modal effect!

```css
form {
  border: 1px dashed #333;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
}
form:focus-within {
  background: #f4d35e;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}
```

We create a box-shadow that is 100% of the viewport biggest position (width or height). Initially, this will be at 0 opacity.

When we have a :focus-within we change the opacity to 70%.

The effect is a lightbox-like effect ✨.

{% codepen https://codepen.io/rebelchris/pen/NWrBLjm %}

## Browser Support

The :focus-within selector actually has pretty good support, considering IE is dead already.
 
![CSS focus-within selector browser support](https://caniuse.bitsofco.de/image/css-focus-within.png)

### 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)
Using Open Graph Meta Tags
Tags: opengraphprotocol, webdev, html
Published: 2020-11-10 04:25:37


# og:tags
I use these to customize the content of previews when linking my websites on social media posts. See the image below for an example.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/toodv2coxfjcjjzj7xq0.png)
To change the content of these fields just add these meta tags in your Header. There are more but for this example I included the most common og tags.

```
<meta property='og:title' content='Title of the article'/>

<meta property='og:image' content='image url'/>

<meta property='og:description' content='Description that will show in the preview'/>

<meta property='og:url' content='URL of the content'/>
```

To learn more check out https://ogp.me/
Understanding to Closures 
Tags: javascript
Published: 2020-11-10 04:20:08

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bsjpgnd67x3or47j198e.png)
### What is this?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

### Example: 

```
function sum(x){
  // outer functions scope
  return function(y){
  // inner functions scope
    return x + y
  }
 }
 const addSum = sum(3);
 console.log(addSum(6)) // print 9
```

* In this example, we have defined a function sum(x), that takes a single argument y and returns the sum of x and y.

* The `sum` is a **function factory**. It creates functions that can add a specific value to their argument.

* In the example above, the function factory creates two new functions, one that adds three to its argument.

`addSum` is closure. They share the same function body definition but store different lexical environments. In `addSum` 's lexical environment, `x` is 3.

And then we call `addSum(6)` the function return sum is 9, because `addSum` already have x is 3 (share function body definition) and lexical environment received the argument y is 6 and it's a return sum of 3 and 6.


Reference: 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Why I started writing blog posts in Hindi ?
Tags: blog, hindi
Published: 2020-11-10 03:59:40

---
title: Why I started writing blog posts in Hindi ?
published: true
description: My reason about why I started writing blog posts in Hindi.
tags: blog,hindi
---

**Update:**
I published my first blog at https://hmble.dev
It is translated in both hindi and english. I hope you like it.

Heres the [link](https://hmble.dev/blog/how-to-use-rename-unix-utility-command/) for hindi and [link](https://hmble.dev/en/blog/how-to-use-rename-unix-utility-command/) English translation

---

My native langauge is Hindi and I feel comfortable to share my knowledge in my own native language. I feel less confident when I write blog posts in English. Now that being said, other reason to write blog posts in Hindi is that there are many native prpgrammers like me who don't have a good grasp on English. I want to target those programmers and help them learn programming without the hassle of understanding english first.

There were many times where I lost reading blog posts just because I couldn't understand indentended meaning of sentence written in English. 

There are very less written content in Hindi and most of them are mainly video content. So I thought, why not write a post in Hindi ( Hinglish ) and help those who need Hindi content.

### What do I mean by Hindi(Hinglish) ?

Hindi language is quite tough to write on keyboard. Most of us use Hinglish ( Hindi words spelled in English with no grammer rules ). This makes it easier to write blog posts faster and easier to read because of out habit to read Hinglish in our daily routines.

So what are your thoughts about this idea of writing blogs in Hindi ? Please share in the comment below.

Also will it be okay if I share those blogs here on dev.to ?
Newbie's advice for other development newbies
Tags: beginners
Published: 2020-11-10 03:40:36

I am trying to learn web development since July 2019. The first 3 months I spent many hours learning html, css and javascript. I felt very confident and when I began to see everything that I really needed to learn I believed that I would not be able to achieve it so I stopped studying.

In February of this year I started programming again, I kept learning NodeJS and React but spent a lot of time procrastinating. May part of the quarantine in my country I was procrastinating. I lost a lot of valuable time and just now think about everything I could have learned.

I keep procrastinating but not as much as before, but I have to go back to study to remember what I had learned.

Also I have the feeling that I am not good enough to learn to program. Luckily I found videos that lifted my spirits to move on.

My advice, although I am very new, is DO NOT procrastinate. Start now with what you want to learn.

I leave you some videos that have helped me lately. I consider these youtubers my mentors.

[WebDevSimplified](https://www.youtube.com/watch?v=uIOhRD9J9oU)
[Traversy Media Video 1](https://www.youtube.com/watch?v=Ght0sqn52JY&t=211s)
[Traversy Media Video 2](https://www.youtube.com/watch?v=LwbhBz9jx-M)
[Traversy Media Video 3](https://www.youtube.com/watch?v=66mKajonqro)
[DevEd Video 1](https://www.youtube.com/watch?v=vTldPFPx6zQ)
[DevEd Video 2](https://www.youtube.com/watch?v=VsHS4dvppwI&t=7s)
And others.

I made this post because I read the post by [Fahad Imran] (https://dev.to/fahadimranse/5-things-i-learned-after-programming-for-the-last-3-years-2h6b) and I realized that I did everything that I shouldn't do and he opened my mind.
Best SEO Expert In BD - Imam Uddin | imamuddinwp | Portfolio Template
Published: 2020-11-10 03:16:23

---
title: Best SEO Expert In BD - Imam Uddin | imamuddinwp | Portfolio Template
published: true
description: Best SEO Expert In Chittagong, Best SEO Expert In BD, Best SEO Expert In Dhaka, Best SEO Expert In Bangladesh, Imam Uddin, imamuddinwp. Advanced SEO Expert, Advanced SEO Expert In Bangladesh, Advance SEO Expert, Advance SEO Expert In Bangladesh, Best White Hat SEO Expert In Bangladesh, Youngest SEO Expert In Bangladesh. Best SEO Expert In Chittagong - Best SEO Expert In BD - Imam Uddin. Founder Of NextGen Digital,  Blogger In Dental Clinic Info. Technical SEO Expert In BD, Technical SEO Expert In Bangladesh. Hey beautiful people! How are you? Today I will talk about my new portfolio. It’s a html5, css3 & javascript based simple portfolio template. I have also published it on GitHub.
cover_image: https://raw.githubusercontent.com/imamuddinwp/imamuddin/main/imam-uddin-imamuddinwp.jpg
---
Hey there, it's me! <b><a href="https://www.linkedin.com/in/seoexpertimamuddin/">Best SEO Expert In Chittagong - Best SEO Expert In BD - Imam Uddin</b></a>, <b><a href="https://mix.com/SEOExpertImamUddin">imamuddinwp</b></a>; A passionate Front-End Web Developer & SEO Expert. I always loves to play with codes, blogging,  Social Media, Search Engine Optimization, Local SEO, CMS (WordPress, WiX), Front-End Development andand especially Digital Marketing. I also love to keep me up-to-date with new technologies & innovative creations.
To review my online presence, find me in a popular search engine by searching with the keyword 🕵 '<b><a href="https://about.me/imamuddinwp">imamuddinwp</b></a>' or '<b><a href="https://medium.com/@seoexpertimamuddin">Imam Uddin</b></a>'.  I'm here to say you that I have published my portfolio on <a href="https://github.com/SEOExpertImamUddin" target="_blank">GitHub</a>.
<a href="https://freelancing-geek.blogspot.com/">Freelancing Geek</a>