teleren/devto huggingface dataset:
New VS Code Tool Eases GitHub Browsing/Editing, No Cloning Required
Tags: vscode, microsoft, visualstudiocode, extensions
Published: 2021-06-21 12:45:15

While the tool in its preview stage now works just with GitHub, Microsoft says support for Azure repos is coming soon.

Also, there are limitations to its functionality, including:

* **Debugging, terminals, and tasks:** Not currently supported. Terminals open on your local file system and don't have access to the virtual file system of the remote repository.
* **Limited language intelligence:** Features like IntelliSense and Go to Definition may be impacted as many languages don't yet understand the virtualized environment of Remote Repositories.
* **Search:** GitHub search itself has limitations, such as not indexing branches. Remote Repositories can avoid this limitation and perform a full-text search by enabling indexing. Indexing pulls a shallow clone of the repository from GitHub and performs a full search locally, providing greater power than GitHub's fuzzy default-branch native search. You can enable indexing in Remote Repositories from the Search view.
* **Extension limitations:** Not all extensions can support running in a virtual workspace, but more extensions will support it over time. Extensions that depend heavily on access to local files cannot support this setup.
"We are just getting started on this journey, so expect the feature set to grow and the limitations to shrink as we continue development," Microsoft said in a June 10 announcement. As of this writing, it has been installed more than 14,000 times.

[Font: Visual Studio Magazine](https://visualstudiomagazine.com/articles/2021/06/16/remote-repos.aspx)
10 best Free icon packs for your next projects. Thread 🧵👇
Tags: javascript, tutorial, beginners, webdev
Published: 2021-06-21 12:38:01

 > this article is generated using (give a ⭐)
{% github Manitej66/twlog %} 

{% twitter 1406922304920211457 %}
{% twitter 1406922306149093382 %}
{% twitter 1406922307466149893 %}
{% twitter 1406922311660445700 %}
{% twitter 1406922313635811333 %}
{% twitter 1406922315183661057 %}
{% twitter 1406922319415631872 %}
PhoneInfoga – Advanced Information Gathering & OSINT Framework for Phone Numbers
Tags: security, python, phone, osint
Published: 2021-06-21 12:32:05

PhoneInfoga is one of the most advanced tools to scan international phone numbers using only free resources. It allows you to first gather standard information such as country, area, carrier and line type on any international phone number. Then search for footprints on search engines to try to find the VoIP provider or identify the owner.

[Osint Phone Numbers - Phoneinfoga](https://kali-linuxtr.net/phoneinfoga-advanced-information-gathering-osint-framework-for-phone-numbers)
Datacamp For DataScience
Tags: datascience, machinelearning, computerscience, programming
Published: 2021-06-21 08:41:35

There are lots of excellent resources out there for learning ML and data science. My personal favourite is DataCamp. This is where I started my journey, and trust me; it’s incredible and worth your time. 

So you can either opt for individual courses or opt for track courses with a set of methods inside them. I prefer track courses because they have all the relevant systems inside them. So I insist the readers go ahead and check them out.

Also, if you are short of Project ideas to develop some skills and apply your skills, DataCamp has impressive Projects. I love doing these, and they are my favourite. They are so fun.

If you are new to python, I would suggest a few of my favourite courses and insist on completing this fantastic course by DataCamp on Introduction to Python; everyone should try it out, all of whom are new to Python.

Introduction To Python: https://datacamp.pxf.io/LPD51Y

Also, I have noticed that DataCamp is giving 33% off to all the courses for one week starting from 17th June through 25th June 2020, 12 PM EST. So this would be the best time to grab some yearly subscriptions. So go for it, folks and Happy learning, make the best use of this quarantine time, and come out of this pandemic stronger and more skilled.

DataCamp: https://datacamp.pxf.io/x9nmvv
MacBook Pro screenshot shortcut delayed by 2-10s [solved]
Published: 2021-06-21 12:15:54

Have you been experiencing an issue where you press `Cmd+Shift+4` for the screenshot tool, but it doesn't show up? Then sometimes shows up 5-10s later when you're doing something else?

Here's how to fix that:

1. Open the screenshot tool with options `Cmd+Shift+5`
2. Select one of the two video capture options
3. Click `Options`
4. Under `Microphone`, select `None`

All done.
Table of Content for MDX with Next.js
Tags: mdx, nextjs, react, javascript
Published: 2021-06-21 12:08:52

I use Next.js & MDX for my personal website and some documents, I want to display a "table of content", a list of headings, for each article.

I've tried the plugin [remark-toc](https://github.com/remarkjs/remark-toc) but it's too complex (for me). I spend hours still couldn't make the toc work... So, I tried to write it by myself.

## Get The List of Headings

Here's the code for getting the list of headings:

```javascript
// ./components/PostLayout.js

import { renderToString } from "react-dom/server";
import { MDXProvider } from "@mdx-js/react";

import MDXComponents from "./MDXComponents";

const PostLayout = ({ children }) => {
  const contentString = renderToString(children);

  const getHeadings = (source) => {
    const regex = /<h2>(.*?)<\/h2>/g;

    if (source.match(regex)) {
      return source.match(regex).map((heading) => {
        const headingText = heading.replace("<h2>", "").replace("</h2>", "");

        const link = "#" + headingText.replace(/ /g, "_").toLowerCase();

        return {
          text: headingText,
          link,
        };
      });
    }

    return [];
  };

  const headings = getHeadings(contentString);

  return (
    <>
      {/* ... */}

      {headings.length > 0 ? (
        <ol>
          {headings.map((heading) => (
            <li key={heading.text}>
              <a href={heading.link}>{heading.text}</a>
            </li>
          ))}
        </ol>
      ) : null}

      <MDXProvider components={MDXComponents}>
        <Container>{children}</Container>
      </MDXProvider>
    </>
  );
};
```

## Add IDs to Headings

I use the `MDXProvider` to render the Markdown content, then customize the components in a separated file.

Here's the customized `h2`:

```javascript
// ./components/MDXComponents.js

const Heading2 = ({ children }) => {
  const idText = children.replace(/ /g, "_").toLowerCase();

  return <h2 id={idText}>{children}</h2>;
};

const MDXComponents = {
  h2: Heading2,
  // ...
};

export default MDXComponents;
```

Now, everything works as I expected. I made a Next.js & MDX starter, [click here to visit the repo](https://github.com/cyishere/nextjs-starter) could find the whole code.
🔥Awesome 3d navbar you have never seen it before 🔥🔥
Tags: uiweekly, css, beginners, webdev
Published: 2021-06-21 11:48:46

Hello, glad you are here. I am kunaal and today we will see how to make an awesome 3D navigation system in CSS. You can see demo below.

#Demo

{% codepen https://codepen.io/kunaal_kumar/pen/ZEeZgEM %}

#Video Tutorial

{% youtube SNAkksixAs4 %}

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

>If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

[My youtube Channel](https://www.youtube.com/c/TechyProgrammers/), [Instagram](https://www.instagram.com/techy_programmers/)
3 ways to send emails with only few lines of code and Gmail - Ruby - Part 2
Tags: ruby, smtp, email, gem
Published: 2021-06-21 11:48:01

*We will see how to send a simple email with the help of three different programming languages: Javascript, Ruby and Python
Before you start you need to create a Gmail account.
Do not forget to accept and allow the "Less secure apps" access in order use your scripts with your Gmail smtp connection.
I'll let you do this on your own, you don't need a tutorial for this* 😜

## Ruby 💎

- We are going to use the [Mail](https://github.com/mikel/mail) gem:
```
gem install mail
```
- Require it at the beginning of your `send_email.rb`:
```ruby
require 'mail'
```
- Declare Gmail account info:
```ruby
# Gmail account info
options = {
  address: 'smtp.gmail.com',
  port: 587, # gmail smtp port number
  domain: 'gmail.com',
  user_name: 'youremail@gmail.com',
  password: 'yourpassword',
  authentication: 'plain'
}
```
- Initialize Mail `delivery_method` info:
```ruby
Mail.defaults do
  delivery_method :smtp, options
end
```
- Send email 📧 :
```ruby
Mail.deliver do
  to 'myfriend@yopmail.com'
  from 'youremail@gmail.com'
  subject 'Sending email using Ruby'
  body 'Easy peasy lemon squeezy'
end
```

Here the final code:
```ruby
require 'mail'

# Gmail account info
options = {
  address: 'smtp.gmail.com',
  port: 587,
  domain: 'gmail.com',
  user_name: 'youremail@gmail.com',
  password: 'yourpassword',
  authentication: 'plain'
}

Mail.defaults do
  delivery_method :smtp, options
end

Mail.deliver do
  to 'myfriend@yopmail.com'
  from 'youremail@gmail.com'
  subject 'Sending email using Ruby'
  body 'Easy peasy lemon squeezy'
end

puts 'Email sent'
```

## The ease of Ruby 💎 
![Easy Ruby](https://media.giphy.com/media/dWy2WwcB3wvX8QA1Iu/giphy.gif)

Table of contents
-

- [Javascript 🚀 - Part 1](https://dev.to/fralps/3-ways-to-send-emails-with-only-few-lines-of-code-and-gmail-javascript-part-1-4i92)
- Ruby 💎 - Part 2
- [Python 🐍 - Part 3](https://dev.to/fralps/3-ways-to-send-emails-with-only-few-lines-of-code-and-gmail-python-part-3-13e0)
CSS preloaders from scratch
Tags: webdev, css, preloader, html
Published: 2021-06-21 11:40:04

---
cover_image: https://public-image-container.s3.ap-southeast-1.amazonaws.com/loader_dev_final.gif
---
Most of the websites now-a-days fetch data from remote server and then display it to the user. This very fetching of data being an asynchronous task it takes some times to be displayed. In the meantime preloader or loader is shown to the user. Using css `selectors` and `animations` we can design a lot of preloaders easily. Lets have a look at some simple preloaders developed with css.

#### Circular Loader 1
{% codepen https://codepen.io/alim1496/pen/mdWLZrZ %}

If you have a look at the css code, the `border-top` property is the bluish portion on the cirular path. If `animation` property is not used then it will remain fixed on the top of whitish cirular path. The `animation` does the trick here. This is `linear` means its speed will be uniform & it will continue `infinite` times and take `1s` to complete one cycle.

#### Circular Loader 2
{% codepen https://codepen.io/alim1496/pen/MWpXaWJ %}

This very code is similar to that of Loader 1 just have a look at the `border-right-color` and `border-left-color` properties. Instead of `border-top` those two properties have been added and made `transparent` what did the trick. 

#### Circular Wave Loader
{% codepen https://codepen.io/alim1496/pen/eYvQKLQ %}

Here we can see that the circular loader is loading like wave. This wave effect has been created with the help of `before` and `after` selectors along with `transform: scale()` property. This very `scale` property along with the animation is creating the wave effect continuously.

#### Circular Dot Loader
{% codepen https://codepen.io/alim1496/pen/MWpRWXG %}

Here there are total 8 dots. Initially without `animation` property three dots will be visible. Each dot has been created with the help of `box-shadow` property. The `dotSpin` keyframe is divided into 8 percentage areas representing each dot. Each percentage area's `box-shadow` has 8 values 3 of which are `bluish` colored and rest 5 are white or invisible. Thus the animation has been created.

#### Ellipsis Loader
{% codepen https://codepen.io/alim1496/pen/RwpOOvZ %}

We know about the `text-overflow: ellipsis` property that shows `...` when text is overflowed. Here such ellipsis has been used as a loader. Here the ASCII code of ellipsis `\2026` has been added at `after` selector and the `width` property is varying in the `keyframe` which does the trick for the animation.
Create GitHub Repository And Add Files using Command Line
Tags: github, gamedev, unity3d, programming
Published: 2021-06-21 11:02:29

https://www.geeksread.com/create-github-repository-and-add-files-using-command-line/
Git repository, create branches revert changes, etc. Now in this GitHub tutorial, we will learn that how we can create a GitHub account and connect local Git account to GitHub account. We will also see that how we can Create GitHub Repository locally upload the project to GitHub using Git.

INTRODUCTION TO GITHUB:
We have already discussed in detail about Git in the previous tutorials, so Git is basically an open source version control system which is designed to organize and manage small and large every type of project with speed and efficiency.

While the GitHub is a web-based hosting platform for individuals and teams to store Git repository. GitHub is built on top of Git and it allows you to have both local and remote copies of your projects. With GitHub, you can easily share your project with anyone when it’s in the development stage. You can explore different popular project and can implement the new feature in their repositories.
Five (5) Important Key Tips to Improve Your Data Security
Tags: cloud, security, computerscience, linux
Published: 2021-06-21 10:35:45

Digitization has revolutionized the way we work. Critical business applications and data are just a keystroke away, no matter where the employee is or what time. Perhaps it is this familiarity with data that makes employees feel so connected to it when they change jobs. Even they often take some of it with them. Perhaps that is why most of them do not consider this a criminal act.

## Five (5) Important Key Tips to Improve Your Data Security

Whatever the reasons for this deliberate filtering of data; lack of security can affect the growth of an organization and its ability to maintain a competitive advantage. But with greater visibility into internal threats, organizations can expel bad players and improve overall security.

Below are 5 (five) major events that organizations are monitoring cloud applications and how their attention can help ensure good environment in the company.
Everything you want to know about Verified Mark Certificates and BIMI Standards
Tags: email, ssl, security, cybersecurity
Published: 2021-06-21 10:31:18

![alt text](https://www.https.in/blog/wp-content/uploads/2020/08/BIMI_Implementation.png)


When it comes to information genuineness we tend to trust only renown sources. You know which sources to trust when you are reading information on social media, yes, we are talking about verified accounts on social media. In-order to minimize the continuously exploding phishing frauds in the inbox, Certifying Authorities have taken an initiative to issue verified mark certificates for brands to show their brand logo in the email inbox.

To make this challenging task a reality Google <a href="https://www.prnewswire.com/news-releases/google-joins-authindicators-working-group-and-commits-to-bimi-pilot-300890074.html">announced</a> full support for the movement. This functionality will use BIMI standards (Brand Indicators for Message Identification) to show the verification mark within email clients.

<blockquote><p><em>BIMI provides a secure, global framework enabling email inboxes to display sender-designated logos for authenticated messages. It also includes protections to prevent senders from spoofing logos owned by other organizations</em></p></blockquote>

<h2>What are the benefits of BIMI? </h2>
BIMI offers several important benefits to end users as well as to marketers across the globe.

1. BIMI can reduce the amount of phishing activities.
2. It offers improved email security by using existing email authentication technologies like SPF, DKIM, and DMARC.
3. Provides a great opportunity for every marketers email to get read first because of logo recall.
4. BIMI increases the confidence in the mind of a recipient as they see a verified logo against the sender name.
<h2>What are Verified Mark Certificates ?</h2>
Verified Mark Certificates aka VMC is a digital certificate that authenticates your organization to display a logo in the email clients. This allow companies to show verified logo (brand logo) in the sender field of an email clients. VMCs work on the BIMI standards. Below is the representation how your email clients will show your brand logos after implementation of VMC.

<h3>Verified Mark Certificate in Action</h3>
![alt text](https://www.https.in/blog/wp-content/uploads/2020/08/Webp.net-gifmaker.gif)

<h2>How to get Verified Mark Certificates?</h2>
As of now Google & the BIMI group has not rolled out any specific date of its implementation. As per Google the pilot testing has started and will be made live for all by the end of 2020. An organization would require getting VMCs to show BIMI standard logos.

In case you would like to register for BIMI and want numerous VMC then <a href="https://www.https.in/contact-us">contact us. </a> We will get back to you with all the relevant details at the earliest.
Docker Desktop Can't Run Because WSL2 Is Disable
Tags: docker, wsl2, dockerdesktop, errordocker
Published: 2021-06-21 10:29:15

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

**__Before continuing, just for information, this tutorial is specifically for docker desktop users when there is a trouble that docker desktop can't run.__**

Incidentally the windows that I installed on my laptop were windows 10, after the update it turned out that docker desktop couldn't be used, even resetting to default didn't work

After browsing here and there, 😀finally the conclusion is the configuration of Hyper-V which disables wsl2 as the linux kernel used in docker windows.

Several times even install docker the result will be the same.

And it turns out that the solution is very simple, only with a command line to reactivate the wsl2
Previously I did a check first to check the wsl2 with the following command

**wsl.exe -l -v**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg5yqb1t8qhkc0m6idtm.png)

**And the result is :**
The service cannot be started, either because it is disabled or because it has no enabled devices associated with it.

**The solution:**

__sc config LxssManager start=auto__
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a77bsvibxiuwowz8n4cw.png)
**Then I checked again**

Yey, it finally worked and desktop docker is reusable.

Ok, here's the short tutorial, hopefully it's useful.

UPDATE
if it still doesn't work, please check and make sure windows hyper-v is active 

LAST SOLUTION :
Just need to delete the files in C:\Users\xxx\AppData\Roaming\Docker fixed it

Note :
this tutorial from [My Blog](https://blog.berandakreatif.com/?p=177) post
How to enable chrome extensions in selenium python
Tags: python, selenium, automation, extension
Published: 2021-06-21 10:24:05

In this tutorial , I'm going to show you how you can load chrome extensions when you run selenium

- Install selenium by typing pip install selenium in the command prompt or terminal

- write the following code
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txoszuepcyv53la96cbg.png)
 
- Here pathtocrx.crx is the path to where your chrome extension is stored and pathtochromewebdriver.exe is the path to your downloaded chrome web driver. Change both of them to your own paths. 

That's all that you need to do. Now you have the mentioned chrome extensions enables and added by default
Week 1 of Coding Period in GSoC
Tags: gsoc, opensource, javascript
Published: 2021-06-21 10:16:58

Hello there! Let me tell you my experience of the first week of coding period in GSoC. Fasten your seatbelts and get ready for the ride.

The coding period started on the 7th of June 2021. To have proper context I would suggest having a look at the community bonding period first if you have not seen that [blog](https://dev.to/theamanjs/getting-selected-and-community-bonding-period-in-gsoc-3ik9) From the checklist I submitted in my proposal I was already done with one task. You can read my proposal [here](https://summerofcode.withgoogle.com/serve/5202119382007808/)

Before I start writing about my first week I would love to share that I followed a commit standard that I read once on GitHub in a [gist](https://gist.github.com/turbo/efb8d57c145e00dc38907f9526b60f17). Though I couldn't follow all the standards though I tried my best and thinking of following them further in other work as well. 
1. Commit messages must have a subject line and may have a body copy. These must be separated by a blank line.
2. The subject line must not exceed 50 characters
3. The subject line should be capitalized and must not end in a period
4. The body copy must be wrapped at 72 columns
5. The body copy must only contain explanations as to what and why, never how. The latter belongs in documentation and implementation.


The first thing I was doing when the coding period started was upgrading the Meteor version. This task was done already but I ran into a problem on my machine. I was not able to run any Meteor project on my machine. It took me a day to figure out the issue. I searched a lot about the issue and found some solutions from the internet and my mentor. I reinstalled the Meteor on my machine and removed .meteor/local folder and it got started again. The actual error was `undefined symbol: node_module_register` When I searched for the solution I found this error occurs when we compile the node modules with different versions from what we are using at the moment. You can have a look at the whole problem on [stackoverflow](https://stackoverflow.com/questions/29495599/bcrypt-lib-node-undefined-symbol-node-module-register). You can have a look on PR [here](https://github.com/BRL-CAD/OGV-meteor/pull/104)

Then I moved ahead to fix the issue of the route when uploading the model. The issue was when we upload a model on OGV it takes the user to model preview route where in case of error it was not preventing the user to see that 404 page. Putting the route in condition solved this issue. You can have a look at issue [here](https://github.com/BRL-CAD/OGV-meteor/issues/63) and PR [here](https://github.com/BRL-CAD/OGV-meteor/pull/105)

PS I'm writing this blog after the end of week 2 because I wanted to write things in a new format and didn't get time to experiment with it during weekdays. This week my final practical exams were also going on so it was a kind of messy week. Everything went well in the end.