teleren/devto huggingface dataset:
Creating objects in JavaScript
Tags: javascript, computerscience, codenewbie, beginners
Published: 2021-01-07 11:03:38

There are several ways one can create objects in JavaScript. I have mentioned most of the ways to do so.

###**1. Object Constructor**
This is the simplest way to create an empty object.

In the below example **function Person( )** is an object constructor function. Objects of the same type are created by calling the constructor using the **new** keyword.

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

###**2. Object.create method**
The create method of Object creates a new object by passing the prototype object as a parameter. The newly created object will inherit all the prototype object properties. 

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

###**3. Object Literal Syntax**
The object literal syntax is equivalent to create method when it passes null as parameter.

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

###**4. Function Constructor**
The Function constructor creates a new Function object. The Function constructor creates functions which execute in the global scope only.

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

###**5. Function constructor with prototype**
This is similar to function constructor but it uses prototype for their properties and methods

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

###**6. ES6 Class Syntax**

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

###**7. Singleton pattern**
A Singleton is an object which can only be instantiated one time. Repeated calls to its constructor return the same instance and this way one can ensure that they don't accidentally create multiple instances.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6rb1snybokh3phjl7n1z.png)
How to add a pre-loader in your website.
Tags: css, html, javascript
Published: 2021-01-07 10:51:41

<html>
<head></head>
<body>
<h4>PRE-LOADER</h4>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fk3smrzna1vieidxaawn.gif)
<hr>
<div>A <b>preloader</b> — or what some call a loading screen — is the what you see on some sites before the main content of the web page is loaded.Their main purpose is to entertain site visitors while the actual content of the page is still loading in the background.</div>
<h3><b>Follow these steps to add a pre-loader.</b></h3>
<p><b>STEP 1 :</b> Include a <b>DIV</b> tag in the begining of a body tag and give the tag a Class or Id whatever its on you. <br><b>for eg: id = "loading". </b></p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0l8hmudrl0hqpyjzld4t.png)
<hr>
<p><b>STEP 2 :</b> Now link a css file to your HTML file.<br>See the code below. Here we add few styling to the id "loading". </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eaomlei4l0ulc4t9px77.png)
<ol style="font-size:3px" type = "number">
<li><b>Position    :</b>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.</li>
<li><b>Width       :</b>Set width to 100% so  your pre-loader will cover entire screen.</li>
<li><b>Height      :</b> Set height to 100vh(100% of the viewport height.)</li>
<li><b>Background  :</b>Here in background we will use different attributes like 
<b>#fff</b>("white"color you can use whatever color),
<b>url</b>(give the gif link which you want to use as a loader.),<b>no-repeat</b>(repeatation of gif will be cornered),<b>center</b>(To get pre-loader in center accn to viewport.).
  </li>
<li><b>z-index     :</b>The z-index property specifies the stack order of an element.An element with greater stack order is always in front of an element with a lower stack order.</li>
</ol>
<hr>
<p><b>STEP 3 :(a)</b>Now add a <b>onload</b> event in a body tag so it will Execute a JavaScript immediately after a body content  has been loaded:</p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bwho6zosy19t9sv5v3p2.png)
<b>(b)</b>Now add a <b>script tag</b> inside <b>Body tag</b>. Then create variable which we will use to manipulate our 'loading' id. and set the display odf loading to none when the content of webpage load. </b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d96wuus1mh9r46retdbl.png)
<hr>

--Now your pre-loader is ready.



</body>
</html>
SDK for Desktop AR (AR using your computer, without pricey headgear)
Tags: unity3d, mixedreality, gamedev, showdev
Published: 2021-01-07 10:24:38

{% youtube cuvJxsB285k %}
Hey everyone!
I’m very excited to announce the beta version of Holo-SDK for Desktop AR technology.

**What is Desktop AR?**
Desktop AR is a technique that enables laptop and desktop computers to produce AR effect without needing a phone or a headset. It creates the illusion of 3D objects floating in front of a screen by rendering red-blue 3D images according to a user's viewing position. User can download the play Desktop AR apps by using their computer, webcam, and anaglyph glasses. You can download sample Desktop AR apps here:
https://www.holo-sdk.com/sample-apps

**What's cool about it?**
* You get the holographic experience and seeing things floating in front of the screen. Here is a YouTube demo of what it felt like when playing a Desktop AR (https://youtu.be/cuvJxsB285k). Yes, the color will be a bit purple-ish because of the red-blue glasses. If that is what bothers you, you can also use active/passive 3D display to overcome this issue.
* Users do not need to have AR glasses or headset, which tends to be pricy. Desktop AR utilizes hardware that everyone already has and red-blue glasses that are available online for a low price. This also means that more potential users for your Desktop AR applications.
* More immersive than mobile AR. Mobile AR's experience is limited by small display size and lack of stereoscopic. Unlike Desktop AR and AR glasses, Mobile AR enhances the realism of a video that a user sees on a device, rather than enhancing the viewing experience of the user directly.

**How to make your own Desktop AR app?**
You can make Desktop AR apps by using Holo-SDK. Holo-SDK is a unity-plugin. You can download and start developing going to (https://www.holo-sdk.com/get-started). We do have a free developer license there, so you can play with the tech without cost. We also have documents (https://docs.holo-sdk.com/docs/holo-sdk-manual/overview/), so that you can use the SDK easier.

**What’s next?**
Right now, the Holo-SDK is only for Unity and only compatible with Window OS. In the future, we will support other engines and OS as well.

I am looking forward to your suggestions, comments, and feedback. They are highly valued and appreciated.
Thank you.

Kindest regards,
Nutthakan

Please follow us on FB page at : https://www.facebook.com/PerceptionHoloSDK
Convert Exchange EDB to PST File
Tags: edbtopst, convertedbtopst, edbtopstconverter, edbtopstconversion
Published: 2021-01-07 10:14:51

Convert Exchange EDB file to PST file format with this Regaintechnologies <a href="https://www.regaintechnologies.com/edb-to-pst-converter.html">EDB to PST</a> Converter Software that can Convert your single and multiple EDB file data with all mailbox items. You can easily Recover your deleted Exchange EDB mailbox data with all emails items like: emails, contacts, chats, tasks, notes, journals, and appointments, to multiple file formats. You can also Export EDB file to Office 365 Account and Live Exchange Server.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bc4j58lzihppf3kpv1lt.png)
EDB to PST Converter Software to Convert EDB to PST File
Tags: edbtopst, convertedbtopst, edbtopstconverter, edbtopstconversion
Published: 2021-01-07 10:12:44

If you are looking for an easy and simple solution to convert EDB file to PST file then I would like to tell you about such tool which can convert your EDB file to the PST file without any file size limit. This Regaintechnologies <a href="https://www.regaintechnologies.com/edb-to-pst-converter.html">EDB to PST Converter</a> tool can easily repair your corrupted EDB file too. This Software recovers all emails, contacts, calendars, tasks, notes, etc and export them into PST, EML, MSG, PDF and HTML formats.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wjok4ngs467e1ehe0tae.png)
My Minimal Portfolio - DigitalOcean App Platform Hackathon
Tags: dohackathon, portfolio, webdev, showdev
Published: 2021-01-07 10:10:35

## What I built
Minimal Portfolio Website using Gatsby

### Category Submission: 
Personal Site/Portfolio

### App Link
https://site.rishab.cloud/

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o8iadgfdqx2drjzubw41.gif)

### Description
So as part of this Hackathon I decided to give my portfolio a new look. I built it with Gatsby, used [this starter](https://github.com/konstantinmuenster/gatsby-starter-portfolio-minimal) by Konstantin Münster.
Made few changes to the actual starter, by adding particlesJS and also some other animations.

### Link to Source Code
https://github.com/rishabkumar7/personalPortfolio_v5

### Permissive License
[MIT](https://opensource.org/licenses/MIT)

## Background
(What made you decide to build this particular app? What inspired you?)
After looking at some of the examples provided in the Hackathon article, I wanted to make my own portfolio look cool and minimal.
Hence, I decided to update my portfolio website.

### How I built it 
(How did you utilize DigitalOcean’s App Platform? Did you learn something new along the way? Pick up a new skill?)
The DO App platform was easy to setup and the site was deployed without any challenges. The platform is well documented and I was able to navigate through various options and was able to understand via the documentation what they did for the application.
As I was using a Gatsby starter theme, I wanted to customize it a bit as per my need, so learned about the file structure and how mdx renders in gatsby, also implemented [particlesJS](https://www.npmjs.com/package/react-particles-js) in the Gatsby site.
Scraping the New York Times with Python and Beautiful Soup
Published: 2021-01-07 09:41:36

Today we are going to see how we can scrape New York Times articles using Python and BeautifulSoup in a simple and elegant manner.

The aim of this article is to get you started on a real world problem solving while keeping it super simple so you get familiar and get practical results as fast as possible.

So the first thing we need is to make sure we have Python 3 installed. If not, you can just get Python 3 and get it installed before you proceed.

Then you can install beautiful soup with...
We will also need the libraries requests, lxml and soupsieve to fetch data, break it down to xml and to use CSS selectors. Install them using...
Once installed open an editor and type in...
Now let's go to the NYT home page and inspect the data we can get.
Back to our code now... lets try and get this data by pretending we are a browser
Save this as nyt_bs.py.

if you run it...
You will see the whole HTML page

Now lets use CSS selectors to get to the data we want... To do that lets go back to Chrome and open the inspect tool. We now need to get to all the articles... We notice that the

with the class 'assetWrapper' holds all the individual articles together.
If you notice, that the article title is contained in a

element inside the assetWrapper class. We can get to it like this...
This selects all the assetWrapper article blocks and runs through them looking for the

element and printing its text.
so when you run it you get ...
Bingo!! we got the article titles...

Now with the same process we get the class names of all the other data like article link and article summary...
That when run, should print everything we need from each article.
If you want to use this in production and want to scale to thousands of links then you will find that you will get IP blocked easily by the New York Times. In this scenario using a rotating proxy service to rotate IPs is almost a must.

Otherwise you tend to get IP blocked a lot by automatic location, usage and bot detection algorithms.

Our rotating proxy server Proxies API provides a simple API that can solve all IP Blocking problems instantly.

With millions of high speed rotating proxies located all over the world,

With our automatic IP rotation

With our automatic User-Agent-String rotation (which simulates requests from different, valid web browsers and web browser versions)

With our automatic CAPTCHA solving technology,

hundreds of our customers have successfully solved the headache of IP blocks with a simple API.

The whole thing can be accessed by a simple API like below in any programming language.
VSCode Shortcuts
Tags: vscode, ide, shortcuts, keyboard
Published: 2021-01-07 09:22:20

Mastering VSCode Shortcuts can save you huge amounts of time when you are developing and it can mean the difference between meeting a deadline or not. For Visual Studio Code, these are the essential shortcuts that everyone should know.

1. Autocomplete
`Tab ` : When beginning to type you can hit Tab to intelligently complete the displayed code. 

2. Open Command Palette
`Shift + ⌘ Cmd + P ` : The command palette will quickly become your best friend as you learn various shortcuts. If you ever forget a shortcut, simply open the command palette, and search for what you’re trying to do.

3. Find a File
`⌘ Cmd + P ` : Quickly search for a specific file in the current workspace. This one works really well in conjunction when opening and using the split editor. Hitting Cmd + P then while continuing to hold Cmd, keeping hitting P to switch between recent files.

4. Toggle Sidebar
`⌘ Cmd + B ` : Straightford, quickly show and hide the sidebar.

5. Toggle Panel
`⌘ Cmd + J ` : Quick show and hide the bottom panel, this includes the Terminal, Output, Problems, and Debug Console.

6. Toggle Integrated Console
`Ctrl + ` ` : Quick show and hide the integrated terminal panel.

7. Highlight Next Instance
`⌘ Cmd + D ` : Select next occurrence of current word.

8. Highlight All Instances
`fn + ⌘ Cmd + F2 `: Select all occurrences of current word.

9. Highlight All Occurrences of Selection
`⌘ Cmd + ^ Shift + L `: Select all occurrences of current selected word.

10. Select A Line
 `⌘ Cmd + L `: Selects an entire line of code.

11. Comment/Uncomment A line of code
`⌘ Cmd + / `: Comments or Uncomments a line of code. This has intelligent language detection and will comment `<!-- -->` in html etc.

12. Move By Word
`option + Left or Right Arrow Key `: Moves work by word using left or right arrows while holding option key.

13. Transporter
`⌘ Cmd + Up/Down/Left/Right Arrow Key] `: Transport around files faster by holding ⌘ Cmd and using the arrow keys to move to Top/Bottom/Left/Right extreme of the current code.

Join me on [HashNode](https://hashnode.com/@ItsMeStevieG/joinme)
ServiceNow: scheduled job, sending a reminder for approvals
Tags: servicenow, javascript
Published: 2021-01-07 08:28:18

I needed to write a scheduled job, which sends out a reminder notification to the approving person for an approval every x days. 

The integer for the days is saved as a property. On the approval table I added a field called 'u_reminder_date' which is filled, when the approval is created. The reminder shall only be send for approvals that are either for requests or requested items. Here I learned, that the addQuery 'INSTANCEOF' can be used perfectly!  

Following is the full script: 

```javascript
var approvalGR = new GlideRecord('sysapproval_approver');

approvalGR.addEncodedQuery('u_reminder_date', gs.now());
approvalGR.addQuery('state', 'requested');
approvalGR.addQuery('sysapproval.sys_class_name', 'INSTANCEOF', 'sc_req_item');


approvalGR.query();


var reminderDate = new GlideDateTime();

reminderDate.addDaysUTC(gs.getProperty('approval.reminder.days'));


while (approvalGR.next()) {
    gs.eventQueue('reminder.notification', approvalGR, approvalGR.approver.getValue('email'), '');
    approvalGR.u_reminder_date.setValue(reminderDate);
	approvalGR.update();

}
```

It can also happen, that a user writes a comment, that he needs more time for the approval. In that case, I added a business rule on the approval table, which is fired then a comment is made. When the commenter is the same as the approver, the reminder date is push back for x days.

```javascript
if (gs.getUserID() == current.getValue('approver') && current.state == previous.state) {
        
		var currentDate = new GlideDateTime();
        currentDate.addDaysUTC(gs.getProperty('approval.reminder'));
        current.u_reminder_date.setValue(currentDate);
    }
```
Full Stack Developer for NEOFACTO - Luxembourg
Tags: career, javascript, mobile, webdev
Published: 2021-01-07 09:16:55

Hi everyone ! Are you a Full Stack Developer who is thrilled to work on challenging projects, develop front-end and back-end web applications ? Are you passionated by learning new technologies everyday ? If so, let's chat ! 
Go check our job opportunity as a Full Stack Developer in Luxembourg : https://neofacto.com/jobs/full-stack-developer-mf/
My new challenge this year...
Tags: challenge, devlive, webdev
Published: 2021-01-07 09:06:54

New year, new time, new era, or just new good resolutions.
January seems to be the perfect time to initiate habits & projects.
So it's time for me to have a new one.
This year I'll start my blogging journey, creating at least one new article each week, in two different languages, French and English.
French before, cause it is the language of love and romance, cause it is the language of great author like Victor Hugo, Molière or Raimbaud. French before I said, for the best and most pragmatic of reasons, cause it's my mother tongue.

And secondly in English, cause it's the ultimate international language, and even more the development language (exclude programming ones).

This challenge will give a chance to upgrade my editorial skills, my English skills (Oh boy there is work). This will also push me to discover and learn new concept and technologies. Finally, That will give YOU a new articles' list to read, and a lot of new concepts explained (I promise I'll try)

I already know than that article isn't that interesting. And if you read it entirely, I thank you. But it's important for me, to have a good start in this challenge.

So see you soon here for a new article. Love. Kiss.


<small>_Photo by [George Pagan](https://unsplash.com/@gpthree)_</small>
I Launched My First Ever Community 🧑‍💻
Published: 2021-01-07 08:27:37

I launched [dailydevlinks.com](https://dailydevlinks.com) as a curated resource for developers & designers almost 2 years to the day. It came from a love of reading interesting articles daily to improve my work. I decided to create a nice and simple place for people to find things to read in one little bundle each day.

dailydevlinks has grown steadily for the past couple of years and I've enjoyed reading many articles. I thought the next step was to create a community of like-minded people that have a passion for development, design & growth. A place people can learn, help, share ideas & connect.

I decided to go down the route of using Slack for the community. The reasons are mostly just personal preference, due to being very familiar with Slack using it daily & being apart of communities on Slack already.

Next step was a few different avenues to join the community:
- **Directly from the dailydevlinks site itself** - I created a little landing page outlining what the community is and what it proved to its members.
- **Welcome email after signing up to the newsletter** - Using similar copy from the landing page, after someone signs up to the newsletter they get a welcome email to join the community.
- **Footer in the newsletter** - In the weekly digest newsletter I added a quick sign off to join the community.

I wanted to put this post together to show the path that I went down before creating a community. It's not all straight forward, but there's no better time than the present to get started with something 🚀

I'm excited to meet new people as well as the people that use dailydevlinks on a day-to-day basis.

If you're interested feel free to join! 👉 [https://dailydevlinks.com/community/](https://dailydevlinks.com/community/)
How to decode a URI
Tags: javascript, webdev, beginners, 100daysofcode
Published: 2021-01-07 08:46:38

I once found myself in a situation where the URI was changing by clicking on `a` tag and `href` was adding parameters like `name=dev community` as a hash to make the page scrollable to a specific section. Basically, it was encoding the URI by adding a hash to it. 
Now I need to decode that URI and extract the name from it. I tried several things but I forgot there is a native JavaScript method that decodes encoded URI.

### decodeURI: 
- native javascript method
- decodes encoded URI

 
#### Example:

```javascript
const encodedURI = "https://example.com?name=dev%20community";

const result = decodeURI(encodedURI); 
//https://example.com?name=dev community
```

> Note: There is also a function in Javascript `encodeURI()` which encodes the URI.

------

Kudos to [undraw](https://undraw.co/illustrations) for such great illustrations.
Thanks for reading the article. For more tech tweets [Twitter](https://twitter.com/geekrk).
The truth about SSL certificates.
Tags: internetsecurity, website
Published: 2021-01-07 08:39:10

What is an SSL certificate?
SSL certificates are what enable websites to move from HTTP to HTTPS which is more secure.
SSL — more commonly called TLS is a protocol for encrypting internet traffic and verifying server identity.

Why does your website need an SSL certificate?
During login, SSL secures the username and password.
You also need SSL to stop your customer’s data from being appropriated by hackers if you running an e-commerce website.

How to add an SSL certificate to your site through the .htaccess file
add the following:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]

To redirect only to a specific domain
For redirecting a specific domain to use HTTPS, add the following:
RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain\.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.yourdomain.com/$1 [R,L]