teleren/devto huggingface dataset:
Has React Native Peaked My Interest?
Tags: react, javascript
Published: 2020-04-11 22:12:20

I recently started to research some on React Native. I've always been interested in the way React works and how it gives you an instant satisfaction or defeat of if your code is working right away. (I don't know why that's always been something I've nerded out on, but it makes me feel a certain way.)

One way I've seen to make react native applications is to use expo (https://expo.io/learn). It sets up the project with all your necessary files and structure to get started with. Then there's always the companion app that allows you to see the app right away on your phone, either iOS or Android. And of course, there's way to see it via a virtual emulator as well. 

So what have I started to see with my learning process in this? I need to practice my JavaScript some more is the biggest one. There's so much in it that I don't know, struggle to learn or just don't really remember much on. 

Also, I need to keep up my CSS skillset. Yes, I know it's a different way to do CSS inside React, but honestly, to me, it really all comes down the same way. 

I also need to really crack down and learn something in this library! I always crave to learn something new and this is a great option to do so. 

Do you have much experience with this all? Any tips or suggestions you think I should take under my belt?
Never stop trying
Tags: motivation, codenewbie
Published: 2020-04-11 22:06:26

For the fourth (fifth?) time I am re-starting my coding journey. Well, maybe not starting again, but picking up steam.
Sometimes I am frustrated that I make so much progress only to "fall off the wagon" but I think it's equally important that I keep coming back. That must count for something! So here I am, logging into FreeCodeCamp and Github, seeing how much I remember.

Thanks for reading and watch this space for good things to come :)
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-04-11 21:42:11

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![cat-kneading-dough](https://media.giphy.com/media/MI89hXfqPgrok/giphy.gif)

Have a good weekend!
My Coding Journey
Tags: vue, womenintech, vuetify, womenwhovuetify
Published: 2020-04-11 21:41:16

I joined the wonderful world of technology not too long ago when I came on board Vuetify to help run the company with my wonderful and loving fiance’, John Leider, who created Vuetify. My background is in banking and finance and my degree path was in Business Management, so I told him I would gladly manage all the operations and finances of the business. What I didn’t realize was that I really needed to know some coding. Even a little bit to understand what him and our team members were talking about and even how the business run. That brings me to my goal.
John is writing a book for beginners like me learn called Learn Vuetify that takes the reader from the very beginning of not knowing much to an advanced level of coding knowledge. That’s my goal! I want to learn how to code and be able to talk the talk, walk the walk, and code the codes with the best of them!
I had mentioned this fun little initiative to some people we met at some VueConf’s we went to and there was one guy who said, “I would be very interested to follow your journey. You should blog about it.” I was flattered by that and wondered if anyone else felt the same way. I talked to a bunch of other people at the conference about it and they all said blogging my journey through Learning Vuetify would be a great read! 
So there ya go! Here’s the beginning of my journey and the blog. I’m not going to go through how-to steps in this blog since John’s book, Learn Vuetify, will do that and this is my experience of how I went through his book. 
You will get to see me struggle through learning to code and everything that goes along with it. I imagine there will be some embarrassment, some excitement, and some frustration. So please leave me feedback and encouragement when needed because I know I will need it! Stay tuned!

Blessings 💋
~Heather~

https://medium.com/@heather_3720/my-coding-journey-738f438a9d96
'this' is for beginners II 
Tags: javascript, this, oop
Published: 2020-04-11 21:05:09

This is the continuation of the series 'this' is for beginners. If you haven't read the first part yet, I highly recommend you do to get the flow of ``this``. Let's see what happens when the keyword ``this`` is inside an Object declaration.

# <strong>Object</strong>
This is the second rule which is object binding. This rule applies when the keyword ``this`` is used inside a declared object. The value of the keyword ``this`` will be closest to the value of the parent object.

Let's take a look at an example.

```javascript
const boss = {
  lastName:"Scott",
  name: function(){
    return "Michael " + this.lastName;
  },
  whatContext:function() {
    return this;
  }
}

boss.name() //Michael Scott
boss.whatContext() // returns the object boss
```
Now, fire-up your console and test the code snippet below. There's a catch.

```javascript
const boss = {
   lastName:"Scott",
   whatContext:this
}

boss.whatContext // window object
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4004zagwaivs6ct9tgvt.gif)

### <strong>But why?</strong>

The keyword ``this`` is defined when a function is run. As simple as that. There is not a function being run here to create a new value of the keyword ``this`` so the value of ``this``is still the window object.

### <strong>Nested Objects</strong>

Let's look at a bit more complex object with nested properties.

```javascript
const boss = {
  lastName:"Scott",
  name: function(){
    return "Michael " + this.lastName;
  },
  whatContext:function() {
    return this;
  },
  details: {
    basketballMachine: function(){
      return "Michael " + this.lastName + " the Machine";
    },
    whatContext:function(){
      return this
    }
  }
}

boss.details.basketballMachine() //Michael undefined the Machine
```
Inside of the ``details`` object, we have a key of ``basketballMachine`` which is a function that returns the string "Michael" concatenated with the value of the ``lastName`` property.

The second rule is that the value of the keyword ``this`` will always be the closest parent object. Even though, the declared object is ``boss``, there's an object inside called ``details`` which is the closest parent object to the ``basketballMachine`` object. 

Since the ``details`` object does not have a key of ``lastName`` the value of ``this.lastName`` will be ``undefined``.

### <strong>So how can we fix this?</strong>

What if we want our ``basketballMachine`` method to return <strong>Michael Scott the Machine</strong> instead of <strong>Michael undefined the Machine</strong>.
That is exactly the ``call()``, ``apply()`` and ``bind()`` functions will do for us. 

In the next part, we will look at the third rule for determining the value of ``this`` using ``call()``, ``apply()`` and ``bind()``.

# <strong> So Long..</strong>
How does monetization of opensource app works?
Tags: opensource, discuss, help
Published: 2020-04-11 20:51:36

[Also posted on [opensource.stackexchange.com](https://opensource.stackexchange.com/questions/9573/how-does-monetization-of-opensource-app-works)] 

Hi folks, I have a couple of questions regarding making a PRO version of an app.

1) If I want to make a PRO version with more features of my already existing open-sourced MIT licensed app, what changes should I make to the license and code? Should I fork and maintain a private repo with different license?

2) If I get any contributors to the oss version, since I'll be using majority of the oss code, will the contributors who helped on oss version become stakeholders? If so, How much and how to share revenue among contributors?

For example, how does business model of Octotree browser extension work? (Amazing extension. If you use GitHub, do yourself a favor and use it.) It is Opensource and has FREE and PRO versions.

Any other things & suggestions I should consider?
Announcing Jupiter Release 0.3.0
Tags: jupiter, post
Published: 2020-04-09 05:10:25

---
title: Announcing Jupiter Release 0.3.0
published: true
date: 2020-04-08 07:20:05 UTC
tags: jupiter,post
canonical_url: https://horia141.com/announcing-jupiter-0.3.0.html
series: "Jupiter Dev Log"
---

Today marks the date of the third “minor” release of Jupiter - version `0.3.0`. It’s a really big release, as it essentially moves all the recurring tasks interactions to be in the “new way”, like vacations or workspaces.

More precisely there is a major overhaul of interaction with projects and recurring tasks. Basically, there’s nomore working directly with YAML files. Instead, there are CLI commands and Notion boards dedicated for this, muchlike there are for vacations. Checkout the [concepts page](https://jupiter-goals.readthedocs.io/en/stable/concepts)for an up-to-date view of all that’s possible now.

An extract from the [tutorial](https://jupiter-goals.readthedocs.io/en/stable/tutorial/) - to create a project youneed to run the `project-create` command, like so:

```
$ docker run \
    -it --rm --name jupiter-app -v $(pwd):/data --env TZ=Europe/Bucharest \
    horia141/jupiter:latest project-create \
        my-work \
        --name "My Work"
[Some output here]
$ git add .
$ git commit -a -m "Created project 'My Work'"

```

Contrast this to the previous approach, where you had to create and edit a complex YAML file, and then runsome command on it and hope it works.

There are big plans and inbox tasks which are still left to do (so more than half the work), but after that thesystem will have taken a really nice shape - enough for a `1.0.0` version.

A small but useful feature is the ability to suspend recurring tasks. While suspended, no new instances will begenerated for them. This allows folks to gracefully handle situations when a habit or chore can’t be done, due toexternal factors, for example. This feature is obviously inspired by the Coronavirus situation.
Queue: Array as Storage
Tags: javascript, webdev
Published: 2020-04-11 20:13:10

Implementing a queue using arrays in JavaScript is quite simple. 
You use the push() and shift() methods provided for Arrays. 

##Implementation
1.Create queue class
```javascript
class Queue{
    constructor() {
        this.items = [];
    }
//add methods
}
```
We create an items array to store our data

2.Add methods to class

We'll implement the enqueue, dequeue and peek operation on queues. 

**Enqueue**
```javascript
  enqueue(data) {
        //add data to end of queue
        this.items.push(data);
    }
```
The push method on arrays, adds data to end of queue. 

**Dequeue**
```javascript
    dequeue() {
        //if empty do nothing else remove first item
        if (this.items.length === 0) {
            return;
        }
       //return this.items.shift()
        this.items.shift()
    }
```
The shift() method removes the first item in queue and returns it. 

**Peek**
```javascript
 peek() {
        //if not empty return first item
        if (this.items.length === 0) {
            return "Empty queue";
        }
        return this.items[0];
    }
```
This returns the first item in queue. 

Pretty straightforward.
'this' is for beginners
Tags: javascript, oop, this
Published: 2020-04-11 19:53:28

Have you ever had to encounter the beautiful <i><strong>this</strong></i> keyword anywhere in your JavaScript code and wished you had a really good grip on it? If the answer is yes, then you are not alone, I mean we are not alone. We are in this together. When I started learning JavaScript, <i><strong>this</strong></i> was really confusing and so was <strong>bind()</strong>, <strong>call()</strong> and <strong>apply()</strong>. I did not master any of <strong>this</strong>, atleast not yet. 

Anyway, here are some simple concepts that I learned about this. To keep it simple and lite, I'll make this post into a four or five-part series.

# <strong>So what is <i>this</i></strong>
The keyword this is a bit tricky to wrap your head around when starting to learn JavaScript but its a foundation for object oriented programming and other concepts like call(), apply() and bind().

* It is a reserved keyword in JavaScript which means we cannot set it as the value of a variable.
* The value of <strong>this</strong> is determined by how a function is called.
* Every time a function is run, the keyword <strong>this</strong> is defined for that function.

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

There are four rules we can use to determine the value of <strong>this</strong>. Yes, you heard me right :)

# <strong>The Global Context</strong>
This rule applies when you use <strong>this</strong> outside of a declared object and you don't see call(), apply(), bind() or the <strong>new</strong> keyword anywhere near ``this``. 

When <strong>this</strong> is used in the global context, its value refers to the global object which in the browser is the <i>window</i> object.

Fire up your browser's console and log the value of this. You'll be able to see the window object containing the DOM document.

```javascript
console.log(this) //window
```
Now, declare a function and return the value of <strong>this</strong>

```javascript
function soThis(){
  return this;
}

soThis() //window
```
The global context rule applies only when the keyword <strong>this</strong> is used outside a declared object. Here, its inside a function.

Be on the lookout for the next post in this series :)
Exploring the ArnoldC programming language
Tags: watercooler, esotericlanguages
Published: 2020-04-11 19:30:15

>“In a crazy world, it’s only your insanity that will keep you sane.”
— Leo Buscaglia

The COVID-19 pandemic has brought the world to a near standstill. I too have been affected by the lockdown in my country. I started discovering many weird and crazy languages and came across an esoteric language known as **ArnoldC**. It is a language that consists of dialogues said by the *Terminator*(Arnold Schwarzenegger) himself. It's a very funny and interesting language.

Here is a short code in the language 

![its showtime](https://dev-to-uploads.s3.amazonaws.com/i/26guehq154picqq89q7g.gif)
```
IT'S SHOWTIME
HEY CHRISTMAS TREE counter
YOU SET US UP @NO PROBLEMO
HEY CHRISTMAS TREE n
YOU SET US UP 0
STICK AROUND counter
GET TO THE CHOPPER n
HERE IS MY INVITATION n
GET UP 1
ENOUGH TALK
TALK TO THE HAND "Hello, World!"
TALK TO THE HAND "Welcome to Dev.to"
GET TO THE CHOPPER counter
HERE IS MY INVITATION 5
LET OFF SOME STEAM BENNET n
ENOUGH TALK
CHILL
YOU HAVE BEEN TERMINATED
```
This code prints 
>Hello, World! 
>Welcome to Dev.to

5 times. The code can be executed <a href="https://tio.run/#arnoldc" target="_blank">here</a>.
If you want to know more about the syntax of the language you can visit its wiki <a href="https://github.com/lhartikk/ArnoldC/wiki/ArnoldC"  target="_blank">here</a>. 

I hope people will try some interesting and insane things like this to keep them sane during these testing times.
Day 3 - 100 days of Coding - Vs Code Extension
Tags: 100daysofcode, javascript, learning, vscode
Published: 2020-04-11 19:19:29

---
title: Day 3 - 100 days of Coding - Vs Code Extension
published: true
description: A simple Pomodoro Timer extension for VS Code built using Javascript
tags: #100daysofcode, #JavaScript, #Learning, #vscode
cover_image: https://miro.medium.com/max/2400/1*aLEReyihZv-VHmnAjCbQxg.jpeg
series: 100 Days of Code
---
So it's day three of the extension building. For the first two days, we built a basic working extension and converted it into class.

Today we are gonna majorly focus on adding pause Feature to our Pomodoro Timer. To achieve this we need to store the timer into our class field. We will store the current state as either Pomodoro or Rest in our class as well. we will store the timer id into the class.

```javascript
    this.tick = 0;
    this.currentTimerID = null;
    this.currentAction = POMODO_TIMER;
```
Whenever a new timer is called this will be updated. Whenever new tick happened tick will be updated and Whenever the actions is changed current Action will be updated.

```javascript

  pausePomodoTimer() {
    if (this.currentTimerID) {
      this.vsCodeStatusBar.text = "Pomodo Timer passed. Click to Resume";
      clearInterval(this.currentTimerID);
      switch (this.currentAction) {
        case POMODO_TIMER:
          this.vsCodeStatusBar.command = "extension.startPomodoTimer";
          break;
        case REST_TIMER:
          // this.vsCodeStatusBar.command = "extension.startPomodoTimer";
          break;
      }
    }
  }
```

Whenever the user tried to pause (with a new command registered. ) by clicking on status bar item. We will be updating the item command to start (for resume on next click) and clear the current timer. When user tries to resume next, we will take the value and state stored in the constructor and resume it. 

You can check the full code in my repo [simple-pomodoro-timer](https://github.com/ganeshraja10/simple-pomodoro-timer)
Learn how to write tests using Laravel (5-7)
Tags: laravel, php, tdd, testing
Published: 2020-04-11 19:18:17

---
title: Learn how to write tests using Laravel (5-7)
published: true
description: First part of a course on why and how to start on test driven development.
tags: laravel,php,tdd,testing
---

Hey guys! This is the first video of a series on how and why to write tests, in this case using Laravel. We'll be building a course platform (where users can subscribe to courses, watch them, receive notifications about them, interact on the comments, etc).   
I'm very sorry for the audio quality and interruptions -- still getting the hang of this screen cast thing :-)   

To support me, you can subscribe to a newsletter and receive this kind of video earlier, plus a few extras [here](https://subscribe.mateusguimaraes.com), and you can like the video and subscribe to the channel :-).

{% youtube U7ev-sHZRp4 %}
A quick explanation/example of closure in JS 
Tags: javascript
Published: 2020-04-11 19:15:39

Hope everyone is staying safe and healthy during these crazy times! Just wanted to briefly explain the main concepts of closure, along with providing an example that highlights these concepts. So let's dive right in.

**What is closure?**

Simply put, closure occurs when a function accesses a variable that is outside its scope. This function is also invoked in a different scope from that of the variable. We can say that a function 'closes' over that variable. In easier terms, a function has access to a variable that is outside the function. Closure can only happen through an invoked function that references a variable(s) that is outside the function and outside the function's scope.

Enough words and abstract ideas, let's see this in a concrete example:

```javascript
var day = "Friday";

var hello = function dayOfTheWeek() {
    // we are closing over `day`,
    console.log(
        `Today is ${ day }.`
    );
}

day = "Saturday";

hello();
// Today is Saturday.
```

In this example, the function `dayOfTheWeek` is called and closes over the variable `day`. `day` is declared and is assigned the value 'Friday,' but is later reassigned the value of 'Saturday'. This concept might seem very similar to scope, but the key difference is this: closure applies specifically to functions. Each time a function like `dayOfTheWeek` is called, there is a new closure. In Javascript, closure ensures that outside variables, which may be in an outer, enclosing function, are not garbage-collected (or GC'ed) once that outer function is done running. Closure allows the inner-scope function to have live access to those variables.

Here is another example, which might be very confusing at first.

```javascript
var keeps = [];

for (var i = 0; i < 3; i++) {
    keeps[i] = function keepI(){
        // closure over `i`
        return i;
    };
}

keeps[0]();   // 3 
keeps[1]();   // 3
keeps[2]();   // 3
```
You might expect the function calls at the end to produce the outputs `0`,`1`, and `2`. However, `3` is returned for all three. Why? It's because of closure. The function `keepI` is called inside the for loop, and closes over the global `var i` during each instance of the loop. Although each function instance has its own closure, it closes over the same variable `i`, which takes on the value of 3 at the end of the loop.
Ecommerce: The Cliff-Notes Version on How to Identify and Test your Road-map
Published: 2020-04-11 18:54:06

There are literally thousands of technologies and vendors you can consider to improve your ecommerce site experience and capabilities. It can appear overwhelming to try to identify which of these to research, let alone pursue, test, and implement. So how do you identify and implement something successful?

First of all, there are no timelines or dates when it comes to the product road-map. You want to think of your road-map as a release plan that comes AFTER prioritizing and planning your strategy. In the beginning, you want to talk about your ideas excessively, even if the ideas would require too many resources to be feasible. At this point in your journey, the important part is ideation over practicality. You will eventually prioritize with the business and engineering team, so having a broad set of ideas that could match your objective will be incredibly helpful. 

Second, the product road-map is meant to communicate strategy - what you are doing, why you are doing it, and how it relates back to the product vision. While a vision defines the goals for a product, strategy describes a way to achieve them and sets main milestones. This must be a clear and practical plan for the teams that are developing the product. Product strategy will likely need to have a set of key indicators that the product will meet and the set of critical business objectives. Again, this is not a map of product execution, but simply the overarching themes and objectives you are going to achieve.

Next, after completing your market research and maybe reaching out to other comrades in the same space to ask for recommendations, I like to get my hands dirty and begin a/b testing to see if the data backs up the technology. The goal is to define the minimum viable product(MVP) and put that into testing scenarios. Depending on the project I will likely be working with a UX specialist at this stage. Some will say that usability studies are also helpful here, but I don't put nearly as much faith behind this strategy as I do for multivariate testing. People who take your usability studies can help identify good ideas to test and help you define the product features later, but nothing is better to assess change then the pure statistical data. I am always surprised what the data tells me; sometimes I have implemented a new feature that was incredibly successful on other competitors sites, but they failed miserably on our platform. Remember that each site is different and has its unique set of challenges. That in part explains why you can't just implement what worked for a competitor and expect to emulate the success.

After that you enter prioritization and actually build for market. In an agile framework you will probably see a good amount of change in your final product, but the key thing is you need to be shooting for the overarching themes from your product road-map. That is why a product road-map can be so important: it gives the broad guidelines and strategy plan for the product and builds your guard-rails that are critical for the success of your final product.