teleren/devto huggingface dataset:
Constructor functions in JavaScript
Tags: javascript, beginners
Published: 2021-03-06 08:07:05

Constructor functions are regular functions in JavaScript that can be used to create objects that have similar methods and properties.

In a normal scenario, we would use object literals to create objects with certain characteristics like below:

```
var Image = {
    URL: "https://www.domain.com/image.jpg",
    height: 400,
    width: 400
};

Image.URL
>"https://www.domain.com/image.jpg"
Image.height
>400
Image.width
>400

```
But when we have to deal with multiple objects with similar characteristics, then we can use the constructor function to declare a characteristic and then reuse it by creating objects of that function again and again.

So in a constructor function, we declare the properties with "this" keyword and we create an object of the function with the "new" keyword like below and we have to pass the arguments to the function which is to be used during object creation:

```
var Image = function(URL, width, height) {
    this.URL = URL; 
    this.width = width;
    this.height = height;
};

var img1 = new Image ("https://www.domain.com/img1", 400, 600);
var img2 = new Image ("https://www.domain.com/img2", 500, 500);

img1.URL
>"https://www.domain.com/img1"

img1.height
>600

img2. width
>500

```

Unlike normal functions, constructor functions are named with their first letter in uppercase. 

We can also set a new property of the constructor function separately using the prototype object where all the objects created from the constructor function can make use of it. 
Suppose we want to add a new property opacity to the Image function without disturbing the main code, we should do like below:


```
var Image = function(URL, width, height) {
    this.URL = URL; 
    this.width = width;
    this.height = height;
};

var img1 = new Image ("https://www.domain.com/img1", 500, 500);
var img2 = new Image ("https://www.domain.com/img2", 600, 600);

Image.prototype.opacity = 0;

img1.opacity
>0

img2.opacity
>0

```

For normal functions, the default return type is of Undefined type, whereas the default return type of Constructor functions is "this" parameter.

```
function normalFunc() {}
var cf = function ConstructorFunction() {}

var a = new cf ();
var b = normalFunc();

a
>ConstructorFunction {}

b
>undefined

```
Hallo Welt!
Published: 2021-03-06 08:04:39

Ich bin Benjamin Hartmann, auf diesem Blog möchte ich ein bisschen über die technischen Hintergründe von awesomeBible reden.

Warum habe ich welche Technologie gewählt, und welche vielleicht wieder verworfen habe. Man kann gespannt bleiben. 😜
CodePen - A Simple SVG Blob Editor [GSAP]
Tags: codepen, javascript, webdev
Published: 2021-03-06 07:59:45

I have been wanting to try GSAP for a while, so I made a simple little “spline” editor as a test... It works best in Chrome + Safari!

{% codepen https://codepen.io/georgedoescode/pen/ExNpqJP %}
React Native Navigation (RNN) with Expo Bare Workflow
Tags: reactnative
Published: 2021-03-06 07:32:36

[React Native Navigation](https://wix.github.io/react-native-navigation/) (RNN) uses native views to render and navigate between screens in your app. This requires some setup on your native code for it to work. 
The docs mention using `npx rnn-link` to automatically make the required changes on your native code. When setting up RNN on my Expo app, I found that running `npx rnn-link` only worked for Android, and I had to go through the manual process for iOS. Here are the steps I followed:

## Step 1
Run `pod install` inside your ios directory.

## Step 2
Modify `AppDelegate.m` as follows. I recommend using Xcode for this as it may point out potential issues as you modify the file.

{% gist https://gist.github.com/glocore/968bc41b3404d5cc7c5a2feda10e5c97 %}

That's it! The rest of it is handled by React Native's auto-linking feature for versions > 0.60.
Loving right now: this VSCode font + theme combo
Tags: development
Published: 2021-05-29 04:01:09

---
title: Loving right now: this VSCode font + theme combo
published: true
date: 2021-03-06 06:46:18 UTC
tags: development
canonical_url: https://rachsmith.com/loving-right-now-this-vscode-font-theme-combo/
---

![](https://res-1.cloudinary.com/har9evkqu/image/upload/q_auto/v1/ghost-blog-images/react-sample.png)

<!--kg-card-begin: markdown-->

I am the person who will spend 3 hours trying out different themes and fonts in my Editor. After finally choosing a new one, I'll use it for an afternoon before deciding to switch back to the same setup I had before. I like what I like.

For the longest time, that was [gerane's rainbow Theme](https://marketplace.visualstudio.com/items?itemName=gerane.Theme-rainbow&ssr=false) and [Operator Mono](https://www.typography.com/fonts/operator/styles/operatormono). I think Operator Mono was the first coding font I saw using italics for comments. I immediately fell in love, dropped a cool 200 bucks on it and never looked back.

Recently I discovered that [Sarah Drasner](https://sarahdrasnerdesign.com/) had made a new theme, called [In Bed By 7pm](https://marketplace.visualstudio.com/items?itemName=sdras.inbedby7pm). I initially tried it out because a theme name has never so accurately reflected my lifestyle. Unlike trial runs with other themes in the past, I didn't want to switch back. This theme just has the perfect amount of purple and is very easy on the eyes. I love it.

In the screenshots for the theme, I couldn't help notice how cute the font was - [Dank Mono](https://gumroad.com/l/dank-mono). So now I'm just living my life with an all-Sarah-Drasner inspired setup.

<!--kg-card-end: markdown-->

![A Mean Girls meme that reads 'I saw Sarah Drasner using Dank Mono and In Bed By 7pm so I used Dank Mono and In Bed By 7pm'](https://res-4.cloudinary.com/har9evkqu/image/upload/q_auto/v1/ghost-blog-images/50anmo.jpg)
Reverse String In JavaScript  By 4 Approach
Tags: javascript, algorithms
Published: 2021-03-06 06:46:11

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

Here, you can see that how can you reverse string in different ways.

This is a very common question in interview if you are going to give for front end position.

Before start you have to think a little about the approach of that how can you do this so that first think you decide in your mind as think one string as "coding", Now you have to think to reverse this it will become "gnidoc".
 
Now as you thought that this ("coding" => "gnidoc") is the one that you want to do where you think of a string and reverse that from last character to the first.

1. Using Built-In Functions

If you are using built-in function to reverse a string in javascript there you have to use split(), reverse() and join() in the combination from one after the other.

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

Here you have seen the built-in functions to reverser the string by normal function but you can make your code precise by using arrow functions.

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

With Arrow Function you can write the code in one line as you can see above here you can use console.log(Solution("coders")) to print the result in you console.

2. Using Recursion 

Here we use two methods to make the function call recursively before that you have to think a little that what recursion is and you can achieve your goal by using recursion.

Recursion : This occurs "when a function call itself" now you are thinking how so as you can see in below code

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

Here you can see that the recursion() inside the function  is a recursive function.

Now lets move how we can reverse a string using recursion so for that you have to use two methods from javascript that are substr() and charAt().

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

substr() returns the characters from beginning in the string as above you can see.

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

chartAt(), it returns the character from a string from where you want.

Now, its time to write a program to reverse a string by recursion 

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

For other two methods you can go to my github account and see how I have used Brute first Approach(that is using for loop) and by stack method(using push() and pop() methods) you can reverse a string.

Note: It's not the way you are making thing happen it depends how well you can do that.

Follow me on Github : https://github.com/adnanaslamgit.

Cheers
@Adnan
Introducing Hascal - Part 1
Tags: hascal, languages
Published: 2021-03-06 05:56:48

## The Hascal Programming language
Hascal is a small, programming language written in python. It has a C-like syntax, is Fast and Powerful, and it also supports garbage collection

See the official repository [here](https://github.com/hascal/hascal)

> Hascal is still under development

## Installation and setup
> Note: As of March 5, 2021, Hascal is only supported for windows, but you can clone the repository and run it

To setup Hascal on your windows machine,
 - Clone the [Hascal repository](https://github.com/hascal/hascal/archive/main.zip)

`git clone https://github.com/hascal/hascal.git`

Now, get into the `hascal` folder and you can find a `build.bat` file. Run the file and you have the hascal executable inside of the dist folder.
- Environment variables
<br>

>[This](https://www.computerhope.com/issues/ch000549.htm) article explains how to manage environment variables in windows

### `PATH` variable
Copy the location of the dist folder and add it into the `PATH` variable.

### `HPATH` variable
Copy the location of the `hascal/src/hlib` folder, create a new environment variable named `HPATH` and assign it the value of the copied location

<hr>

Let's dive deep into the language in the upcoming articles

Hope you learned something new, Thank you for reading
Making any chrome os device your second screen
Tags: chromebook, screen, development
Published: 2021-03-06 04:03:09

For a while now, I'm trying to make my Lenovo Duet as my portable second screen. I don't want to carry around monitors everywhere and my main devices for traveling are Macbook and Chromebook. That's why I thought it would be cool if I can use my Duet Chromebook as my second screen.

First, I tried several options:
- Duet Display (https://www.duetdisplay.com/) - They have lots of good reviews but unfortunately the connection is not stable and I notice lots of lag. They have pretty good support though and I managed to get a refund. Thanks!
- Synergy (https://github.com/symless/synergy-core) and Barrier (https://github.com/debauchee/barrier) also doesn't work. They crashed when I tried to move my mouse to the chromebook.

Finally I found Deskreen https://deskreen.com/

In order to use this app, I need to purchase some hardware (virtual plug) that enables me to extend the screen. However, the result is pretty satisfactory. The connection is stable and even though there are lags, it's still acceptable.

Cheers!
The importance of being earnest about your return values
Tags: beginners, return, values
Published: 2021-03-06 04:57:28

I would like to write about return values. And upon that subject the simple matter of properly confirming your return values. Sounds simple enough, but as a new programmer this idea of return values has not yet been firmly planted in my head. 

I was going to work on my first major project, scraping a website and creating a CLI. It didn't take long to figure out what I wanted to do. The numbers on recyclables have always confounded me. I thought I might scrape a website with information on recyclables and offer some simple and clear facts on plastics. I thought this might be helpful to many.

I chose my classes composed of Plastic, Fact, CLI, and, Scraper. These seemed like good and logical classes for this scrape. 
I worked on my code for some time and things slowing evolved and became more focused. I used pry often and everywhere to check and confirm my code but here is where I also struggled for some time. As I looked upon the return values provided by pry, all the information that I needed was on my screen. Yet my code was not working correctly. I ran pry many times and each time it provided the perfect answer. Yet my code would stall. I was perplexed.

I finally realized by an inadvertent scroll of my screen that I was not properly checking the entire return value but just a part of it. I was only looking at the return value for an instance variable. Had I looked closer I would have discovered it was the entire object being returned and why my code was not working. I laughed at my newbie mistake but it was also a good hard lesson to learn on the importance of being earnest about your return values.
How to disable telemetry in Strapi 📊
Tags: strapi, telemetry, data
Published: 2021-03-06 04:34:43

Strapi contains a feature in which anonymous and otherwise non-sensitive data is collected. Like any other software, the main aim is to provide the best experience to users.

>What data is collected ?

- Unique project ID (generated with UUID)
- Unique machine ID (generated with node-machine-id)
- Environment state (development, staging, production)
- System information (OS)
- Build configurations

Of course, <b>no personal data is collected and any data collected is secured, encrypted and anonymized</b>.

>How do I disable Telemetry in Strapi ?

Simply, please remove `uuid` in your strapi app’s `package.json` file.
Before :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayu9gr2f7urohtgcklil.png)

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

If you have any questions regarding collected data usage in Strapi, do not hesitate to send an email to privacy@strapi.io.

Read more : [Strapi - Collected Usage Information](https://strapi.io/documentation/developer-docs/latest/getting-started/usage-information.html)
Learning a New Language - Java!
Tags: java, productivity, webdev, devjournal
Published: 2021-03-06 04:28:18

Last week, I wrote about my job hunt process and what I have been doing during so. In this industry where one can never learn enough and know everything, it is important to familiarize yourself with the different patterns and styles of the many languages that exist. This has taught me how similar patterns can be and it all lies in the syntax. 

This week I will walk through some of the parts I found most interesting while learning the basics of Java. A factor I always look for is the data types and their size to make sure my application is as efficient as it can be. For Java, I look to this Primitive Types diagram to use as a guide:
 
![Alt Text](https://2.bp.blogspot.com/-3y_BWimrMYA/W8LeDu8HNwI/AAAAAAAAETo/ojpo7dHnRNQNvYrCbMtdBXK3SctT24qyQCLcBGAs/s1600/primitive-data-types.PNG)

Another difference I have noticed across languages is in the CLI. In Java, we use the Scanner class which is used to get user input, and it is found in the java.util package.

Example: 
To ask the users their age and return "You are __" with their input age.

```javascript
 Scanner scanner = new Scanner(System.in);
        System.out.print("Enter your age: ");
        byte yourAge = scanner.nextByte();
        System.out.println("You are " + yourAge);
```

In general, these are notes that anyone starting to learn Java can use or come back to for a refresher on data types and user inputs.

Here is a link to the [Java Tutorial for Beginners](https://www.youtube.com/watch?v=eIrMbAQSU34&t=5840s) I used to get started!
Kubernetes CKAD Tips 2 - Breaking the myths - CKAD does not require programming knowledge
Tags: kubernetes, ckad, devops
Published: 2021-03-06 04:11:26

CKAD (Certified Kubernetes Application Developer) the word "Developer" does not mean that it will ask you to write code. If you have no development experience and never done any programming then don't worry - none of those skills are required here. So have a look into the CNCF's official curriculum and jump into it.

{% youtube 25VKXVzhIz4 %}

## Resources 

Subscribe to the Channel [TechTalks-Wriju](https://www.youtube.com/channel/UCUzFKvlZOm3ukAiF59B_HgQ)

The [Kubernetes and CKAD Playlist](https://www.youtube.com/playlist?list=PLPIVZsyfpXt-wyNY65-aC9Vm_PEsM3pR8)
Telescope 1.8 Release
Tags: opensource, github, css, javascript
Published: 2021-03-06 03:18:48

After midterm week and study week, it's time to plan for the 1.8 release of telescope. In this post, I want to talk about my plans and the projects that I'm looking forward to seeing them be implemented in the release.

---

In the last release, I was working on updating dependencies and the auto-update tools including Renovate and dependabot. After working with that, I started to have an interest in GitHub CI/CD, and plan to learn to write GitHub action.

In OSD600 (the first open-source course that I took in Winter 2020), we implemented GitHub action workflow to apply code formatter and linter to our repo by selecting template `.yml` file to create our needed actions.

When working with dependabot, it also uses `.yml` file to implement GitHub actions workflow. 

After introducing dependabot, the PR that was generated by dependabot is a bit of confusing for contributor. For example, what should we do for the PR? How to test it? Isn't the major bumping to risky? What to do if the bumping causes test failure or error?

Therefore, I wrote a [document](https://github.com/Seneca-CDOT/telescope/pull/1825) to explain a simple workflow for handling dependabot PRs.

However, it will be more convenient to append the documentation **with** the PR so that contributors can read the document when they're reviewing the PR.

Currently, it is [not possible to customize the description](https://github.com/dependabot/dependabot-core/issues/2091) of dependabot PR. Therefore, I tried to append a comment with the link of dependabot documentation whenever the dependabot PR is created.

---

The other challenge for me in release 1.8 is about UI 2.0. Thanks for my team member [Pedro](https://pedrofonsecadev.medium.com/) assigning me a CSS and JS involved issue. The issue is to [adjust font-size dynamically in order to fit the title div size](https://github.com/Seneca-CDOT/telescope/issues/1810). For example, if the default font-size causes the title overflow (which means the title is too long), the title's font-size should be set to smaller size in order to display the whole title with any wrapping. This is a very interesting issue. After research, in order to adjust the font-size by character number, the scrollHeight and the clientHeight will be involved. By comparing these 2 value, we can get the result of if the text is too long, then, we adjust it's font-size, until the text (title) can be fully displayed.

Currently, I'm trying different plug-ins and to write a function myself. Hopefully, I can finish this feature by release 1.8.
Switching to the previous Git branch... duh!
Published: 2021-03-06 02:14:51

---
title: Switching to the previous Git branch... duh!
published: true
description: Use the git checkout - command to easily switch branches in Git.
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7j4qj3m8p9f1l2ob4c3.jpg
---
I have been using [Git version control](https://git-scm.com/) for several years. I probably should have mastered it by now, but that has not happened. I know just enough commands and options to be _dangerous_. Every now and then, I will learn something new and smile.

One example is the `git checkout` command. I have used this command countless times to switch back and forth between different branches in my Git repos. For example, here is a repo with `master` and `develop` branches:

```bash
$  git checkout develop
Switched to branch 'develop'
$  git checkout master
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
$  git checkout develop
Switched to branch 'develop'
$  
```

I have been switching Git branches this way for _years_. But this week, I learned `git checkout -`. This version of the command switches to the _last branch_ that you were on:

```bash
$  git checkout develop
Switched to branch 'develop'
$  git checkout -
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
$  git checkout -
Switched to branch 'develop'
$  git checkout -
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
$  
``` 

Mind blown! The `git checkout -` command is a blessing. It is so much easier, especially when your Git branches have long names. This would have saved me lots of typing over the years :weary:. Oh well, better late than never!

If you already know about `git checkout -`, great. If not, I hope it makes your Git life easier.

Thanks for reading. 😃

*Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips and help.*
Tryhackme Blue
Tags: security, python, cybersecurity
Published: 2021-03-06 01:48:09

#Eternal-Blue
eternalBlue is an exploit thatallows cyber threat actors to remotely execute arbitrary code and gain access to a network by sending specially crafted packets. It exploits a software vulnerability in Microsoft’s Windows operating systems (OS) Server Message Block(SMB) version 1 (SMBv1) protocol, a network file sharing protocol that allows access to files on a remoteserver.
This exploit potentially allows cyber threat actors to compromise the entire network and all devices connected to it. Due to EternalBlue’s ability to compromise networks, if one device is infected by malware via EternalBlue, every device connectedto the network is at risk. This makes recovery difficult, asall devices on a network may have to be taken offline for remediation.This vulnerability was patched and is listed on Microsoft’s security bulletin as MS17-010

As always we start with nmap scanning,
`sudo nmap -A 10.10.237.221`
Inline-style: 
![alt text](https://raw.githubusercontent.com/amiriii26/write-ups/main/Image.png "Logo Title Text 1")

###Escalate
If you haven't already, background the previously gained shell (CTRL + Z). Research online how to convert a shell to meterpreter shell in metasploit. What is the name of the post module we will use? (Exact path, similar to the exploit we previously selected)
The sound of CSS: pop up the volume!
Tags: codepen, music, css, keyframes
Published: 2021-03-06 01:31:50

---
title: The sound of CSS: pop up the volume!
published: true
description: Two codepens follow, one on **Franz Ferdinad**, the other on **Chemical Brothers**, if you know them and know their tracks, try watching the animations thinking about the music and then start the player.
tags: codepen, music, css, keyframes
cover_image: https://images.unsplash.com/photo-1602785157071-103d66e87cfc?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1400&q=80
---

Since I was a child I have been attracted to the coordination between image and sound, or rather between images and music; for me the videos on MTV were better than cartoons.
In the first css approaches I really liked being able to give a graphic aspect to the HTML structure, I seemed to be able to give it an identity to that skeleton!
Then studying came the `transformations`, the `transitions` and then the `animations` and then the preprocessors and _booooom b***h_!

> I enjoyed myself with animations.

Two codepens follow, one on **Franz Ferdinad**, the other on **Chemical Brothers**, if you know them and know their tracks, try watching the animations thinking about the music and then start the player.

Let me know if you feel and perceive the rhythm, mood and the relationship between sound and image.

{% spotify spotify:track:6hADH7b57N5666cGv624vg %}
{% codepen https://codepen.io/tamer_aka_remat/pen/QBKYaN %}

{% spotify spotify:track:6zIkiZqUnSMsuRJ6acyJuD %}
{% codepen https://codepen.io/tamer_aka_remat/pen/OwWJON %}