teleren/devto huggingface dataset:
Closure & Lexical Scope
Tags: closure, javascript, lexicalscope
Published: 2019-04-08 02:59:13

---
title: Closure & Lexical Scope
published: true
tags: closure, javascript, lexicalScope
canonical_url: https://www.stephencharlesweiss.com/blog/2019-04-05/closure-and-lexical-scope/
---

When we say that JS is lexically scoped, what we mean is that a function will have access to the variables in the context of which it was _defined_ not in which it is _called_ (as far as those details are relevant — which is a garbage collection optimization).

Let’s imagine that we want to create an incrementing function to track how many times we’ve called it.

This works… but only if we track num in global memory

```
num = 0
function increment(num) {
  return num + 1
}
increment(num)
increment(num)
console.log(num) // 2;
```

What if we use closure concepts instead?

```
function count() {
  let currentCount = 0
  let random = 'primed for garbage collection'
  function increment() {
    currentCount += 1
    console.log(currentCount)
    return currentCount
  }
  return increment
}
```

If I now assign the result of `count` to a variable name `currentPlace`, I will be able to log at any point, how many times I’ve be called.

Let’s walk through this: `const currentPlace = count()` .

When we evaluate count, what is returned? A function `increment`. Note that that function has _not_ been invoked.

If you were to look at _what_ `currentPlace` is then, you’d find that it is a function - but if you invoke it, you can get the the current place.

But wait - when we returned `count`, didn’t we _only_ return the function `increment`? Not quite. With it, Javascript stored the local environment in which `increment` was defined.

That means that even though `count` has been popped off the call stack, we can still access the `currentCount` via the scope of `increment` that Javascript maintains.

What does all this mean?

```
const currentPlace = count()
currentPlace() // 1
currentPlace() // 2
currentPlace() // 3
```

<iframe width="800" height="400" src="https://www.youtube.com/embed/Q54Y2PM86X4?rel=0" style="border:0" allowfullscreen></iframe>

Here’s a video of it in practice and debugging with Chrome Dev Tools

Will Sentance, a founder of CodeSmiths, refers to a lexical scope as a function’s backpack (rather than the more colloquial “closure”).

I like this for two reasons:

1. Closure is the process through which the lexical scope becomes relevant, but is rather imprecise in terms of the data we’re discussing
2. Since the lexical scope comes along with the function when it’s defined, it’s easy to think about it as strapped to the back.

That said - if you watch the clip, you’ll notice that Chrome refers to the scope as `Closure`, so it’s whatever works for you.

One last point: I’ve been taking Will’s course, [Javascript: The Hard Parts](https://frontendmasters.com/courses/javascript-hard-parts/), on FrontendMasters and I have to say I’ve been very impressed. In particular, his explanations on closure and higher order functions have been noteworthy in how much better they are than most I’ve seen.
In which situations did you use ref forwarding technique in React application?
Tags: discuss
Published: 2019-04-04 22:03:56

---
title: In which situations did you use ref forwarding technique in React application?
published: true
tags: discuss
---

I took a look at React documentation about forwarding refs technique and I don't quite understand the concept and I have no idea where is a need to use that technique? 

In which situation have you been using ref forwarding and can you explain to me why it was necessary?
Pointers in practice
Tags: go, help, discuss
Published: 2019-04-04 21:58:41

---
title: Pointers in practice
published: true
description: 
tags: golang,help,discuss
---

I generally understand what pointers are and how they work. Where I run into trouble is when to use them in my own code.

When I have a struct that I want to create a new instance of, when should I return the instance and when should I return it as a pointer? Say I have a function to get a `Session` instance in a web app. It either looks up the session from a cookie or creates a new one. In any situation it will always return a valid Session. Should this return `Session` or `*Session`? Why?

Now consider a card game that has `Card`, `Deck`, and `Hand` structs. When creating a `Hand`, a `Card` is removed from the `Deck` and put in a `Hand`. There can only ever be 1 instance of a particular `Card`, such as 8 of hearts, should `Card` be passed around as a pointer? Would this be more memory efficient? Is there a concern about garbage collection here? Or can the GC still keep track of memory only being passed as a pointer?

My experience is in languages like Java, Ruby, Lua, Php, if that helps know where I'm coming from.
rebeccapurple
Tags: 663399becca
Published: 2019-04-04 21:31:53

---
title: rebeccapurple
published: true
description: #663399 is the saddest and happiest color.
tags: 663399Becca
---

Implementing a POC with Gatsby. Their default starter sets the header background color to rebeccapurple. I get all the feels whenever I see that color used in the wild. Just wanted to give the authors of that starter a hat tip for helping to keep Rebecca's memory alive.

https://www.cleveland.com/metro/2014/06/a_young_girls_death_on_her_bir.html

For those who don't know, Eric Meyer wrote one the first definitive books on CSS and has had a hand in authoring the spec.
Install Visual Studio Code on Raspberry Pi
Tags: vscode, raspberrypi
Published: 2019-04-04 21:31:03

---
title: Install Visual Studio Code on Raspberry Pi
published: true
description: Install Visual Studio Code on Raspberry Pi
tags: #VSCode #RaspberryPi
---

I have been using Visual Studio Code for long time, so sometimes I really want to use it on Pi when I use vim(Of course vim is super nice lol)

## Install `Visual Studio Code`
Currently the latest version has an issue, so need to install stable verion of that.

updated 4/20/2019
```
$ wget -qO - https://packagecloud.io/headmelted/codebuilds/gpgkey | sudo apt-key add -
$ sudo apt-get install code-oss=1.29.0-1539702286
```


Ref
https://github.com/headmelted/codebuilds/issues/67#issuecomment-466255567
Laravel GUI
Tags: laravel, php, composer, npm
Published: 2019-04-04 21:00:54

---
title: Laravel GUI
published: true
description: Laravel GUI, To simply run artisan, composer and NPM commands and other helpful actions and get output in one click!
tags: laravel,php,composer,npm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/26uhbaorpv6tthy5cwgi.png
---

[Download Now!](http://laravel-gui.io/)
Understand Iterators in js
Tags: javascript, webdev
Published: 2019-04-04 20:59:16

---
title: Understand Iterators in js
published: true
description: 
tags: #javascript #webdev
---

Iterators work because of closures in javascript. The iterator can be written as a function inside a function which you can see in the next code example.


```javascript
function createFunction(array) {
	let i = 0;
	function inner(){
		const element = array[i];
		i++;
		return element;
	}
	
	return inner;
}

const returnNextElement = createFunction([4,5,6])
const element1 = returnNextElement()
const element2 = returnNextElement()
```
But we know that we need to use *.next()* property to get next element from the array. We can do that in the way that inner function becomes method.


```javascript
function createFlow(array) {
	let i = 0;
	const inner = {
	next: function(){
			const element = array[i];
			i++;
			return element;
		}
	}
	return inner;
}

const returnNextElement = createFlow([4,5,6]);
const element1 = returnNextElement.next(); // 4
const element2 = returnNextElement.next(); // 5
```

Short and sweet :)
DEV feature idea: Self-serve live broadcasting
Tags: discuss, meta, opensource, contributorswanted
Published: 2019-04-04 20:14:51

In the past we put on live streamed talks/tutorials/workshops which were generally well received, but they became a big coordination burden on our small team and we eventually dropped them.

Feedback was mostly great, and barring some technical issues here and there people usually loved them, but it was hard to pull off.

We'd love for our platform to be a destination for live sharing, be it live coding, office hours, or anything like that.

So I think it would be great if we re-visited the idea of allowing folks to go live on their own. They'd all-of-a-sudden just be live on the platform and anyone could pop in to say hi.

Because there are other platforms which specialize in live streaming, the best approach may just be to allow people to broadcast from there. Alternatively we could go with a native solution. I could see either being an option, and it's a conversation we should have.

We have our own chat infrastructure, and I think if launched this, it would be nice if we used our community chat alongside whichever solution we go with. That would allow us to moderate that interaction within our ecosystem.

I don't think this could be a core team priority any time soon, which is why I'm putting this out for feedback. If people from the community are excited about this, I think it could be a nice community-driven initiative. Of course, if folks from the community want to run with this, we'll be available to help push it through and make sure it stays on track with the platform's direction and needs.

Some points/questions to consider:
- We _could_ allow embed of Twitch/YouTube/etc.
- We _could_ broadcast within our own solution (provided by some cloud provider).
- Building our own is the coolest long term path because we're open source and could evolve it in really interesting ways.
- If we do embed from another user-facing service, would we colocate it with our own chat?
- I think the design of how we display folks who are currently live and stuff like that are not important details upfront.
- If we build it natively into the platform, what cloud services seem best for this? Several of our existing infrastructure partners have relevant offerings for low-latency live streaming, but differentiating them is easier said than done.

If anyone has any thoughts, I'd love to hear them!
Searching for a "cute" Full-Stack for React? Try GatsbyJS / Bulma
Tags: fullstack, react, gatsby, bulma
Published: 2019-04-04 19:37:32

---
title: Searching for a "cute" Full-Stack for React? Try GatsbyJS / Bulma
published: true
description: I'm writing this article because I want to keep up with the latest market trends in "full-stack" app development. 
tags: full-stack,react,gatsby,bulma
---
Hello fellow coders,

After using for many years jQuery / Bootstrap and Flask (for the backend) I decided to change a little bit the picture to Gatsby and Bulma CSS.


![ss](https://static.appseed.us/misc/thumb-gatsby-bulma.png)


These days, developers can scaffold web applications quite fast using many tools, (Yeoman .. etc) but we should take into account the use Gatsby along with Bulma for some good reasons: 

The first one is the speed :)

![ss](https://static.appseed.us/misc/fullstack-gatsby-seo-score.png)


Secondly, Gatsby became quite popular thanks to the JAM Stack implementation. It has a huge community around it and automatized deployment on Netlify. It's stable, well documented, and offers "out-of-the-box" modules for sitemaps, authentication, development tooling, and GraphQL, which is amazing, btw.

And finally, Bulma CSS framework is also well documented, it has cute CSS markers like "is-primary" / "is-large" for buttons and automatic cells alignment. All this making usage and integration really easy. I must mention also that Bulma is built with Flexbox. 


By using this stack, a developer can easily create a new web apps using a few basic commands:

```
npm install -g gatsby-cli // install gatsby console globally
gatsby new gatsby-bulma https://github.com/rosoftdeveloper/fullstack-gatsbyjs.git // clone the sample starter
cd gatsby-bulma
npm install // intall deps
gatsby develop // edit your code with LIVE update in browser
gatsby build // prepare for production
npm run deploy // live deploy (please edit deploy.js first) 
```

Basically, the above commands will provide a basic setup for the Gatsby tool and the demo starter. Live [deploy script](https://github.com/rosoftdeveloper/fullstack-gatsbyjs/blob/master/deploy.js) included :)

Next steps for this starter:

- add authentication ( Basic, OAuth, 2fAuth )
- integrate Stripe
- Something is missing? please suggest :)


Resources:

- Demo: [Full-Stack GatsbyJS](https://fullstack-gatsbyjs.appseed.us/)
- Sources: [Github](https://github.com/rosoftdeveloper/fullstack-gatsbyjs), MIT Licence, of course
- [GatsbyJS framework](https://www.gatsbyjs.org/)
- Bulma.io - [CSS Framework](https://bulma.io/)
Hope in Source Episode 11: City as Liturgy
Tags: podcast, opensource
Published: 2019-04-04 19:23:48

---
title: Hope in Source Episode 11: City as Liturgy
published: true
description: published the latest episode of Hope in Source!
tags: podcast, open source
---

{% tweet 1108791146757701632 %}

If you're interested in how urban planning, liturgy (ritual), governance, science, recursion, and open source are all related check out this episode!

A core idea: recognizing the city and the internet as organic, living, dynamic like a "cat" should cause us to approach the problem differently than seeing it as a "toaster".

We've also added transcripts for all episodes on the website: https://hopeinsource.com/city/#transcript! Github: https://github.com/hzoo/hopeinsource.com.
Check If Value Exists in Array in JavaScript and jQuery
Tags: javascript, arrayinjavascript, jquery, checkifvalueexistsinjavascript
Published: 2020-01-31 21:09:39

---
title: Check If Value Exists in Array in JavaScript and jQuery
published: true
tags: Javascript, Array in JavaScript, jQuery, Check If Value Exists in JavaScript
canonical_url: https://www.positronx.io/chekc-if-value-exists-array-javascript-jquery/
---

The post [Check If Value Exists in Array in JavaScript and jQuery](https://www.positronx.io/chekc-if-value-exists-array-javascript-jquery/) appeared first on [positronX.io](https://www.positronx.io).

Today we are going to work with arrays in JavaScript. In this tutorial, we are going to find out how to check whether an Array contains a particular value or not.

When we talk about JavaScript and jQuery both come with some built-in methods, which returns the position of the value in the array.

## JavaScript Loop


[Click here to read more](https://www.positronx.io/chekc-if-value-exists-array-javascript-jquery/)
What makes you post on dev.to?
Tags: discuss, meta, writing
Published: 2019-04-04 17:59:51

---
title: What makes you post on dev.to?
published: true
description: 
tags: #discuss #meta #writing
---

As for me, it is mostly because I am interested in feedback from outside the bubble of people I work with every day. (I have to admit that, if the topic is appropriate, I still prefer Stack Overflow and some other Stack Exchange communities because I can reach more people there. On the other hand, most interesting questions are off-topic there.)

How about you? Especially those of you who put lots of work into uploading elaborate tutorials and essays.
Use a Mixin to Add Common Behavior Between Unrelated Objects
Tags: oop, javascript, newbie
Published: 2019-04-04 18:30:28

---
title: Use a Mixin to Add Common Behavior Between Unrelated Objects
published: true
description: How we can use mixin to create methods which can be share among unrelated objects.
tags: OOP, Javascript, Newbie
---

Behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like Bird and Airplane. They can both fly, but a Bird is not a type of Airplane and vice versa.

For unrelated objects, it's better to use mixins. A mixin allows other objects to use a collection of functions.

<pre>
<code>
let flyMixin = function(obj) {
  obj.fly = function() {
    console.log("Flying, wooosh!");
  }
};
</code></pre>

The flyMixin takes any object and gives it the fly method. Let's see an example.
<pre>
<code>
let bird = {
  name: "Donald",
  numLegs: 2
};

let plane = {
  model: "777",
  numPassengers: 524
};

flyMixin(bird);
flyMixin(plane);
</code>
</pre>

Here bird and plane are passed into flyMixin, which then assigns the fly function to each object. Now bird and plane can both fly:
<code>
bird.fly(); // prints "Flying, wooosh!" <br/>
plane.fly(); // prints "Flying, wooosh!"
</code>

Note: how the mixin allows for the same fly method to be reused by unrelated objects bird and plane.
Android Tutorial: Building and Securing Your First App (Part 1)
Tags: android, mobiledev
Published: 2019-04-04 18:16:39

---
title: Android Tutorial: Building and Securing Your First App (Part 1)
published: true
description: Learn how to develop and secure Android applications with ease.
tags: #android #mobiledev 
canonical_url: https://auth0.com/blog/android-tutorial-building-and-securing-your-first-app-part-1/
---

In this part of the tutorial, you will learn how to develop a simple to-do list Android app from scratch. Here, you will start by scaffolding your app with the help of Android Studio. After that, you will build a list to show to-do items and you will create a form to enable users to update this list. In the end, you will also learn how to secure your to-do app with Auth0. 

[Read on 🤖](https://auth0.com/blog/android-tutorial-building-and-securing-your-first-app-part-1/?utm_source=dev&utm_medium=sc&utm_campaign=androidtut_app)

![Android Tutorial: Building and Securing Your First App (Part 1)](https://thepracticaldev.s3.amazonaws.com/i/s0cgwdngcm95rpdc8ff5.png)
Grammar checker for an editor?
Tags: help
Published: 2019-04-04 18:05:33

---
title: Grammar checker for an editor?
published: true
tags: help
---

I'd like something smarter than a spell checker that can correct simple mistakes in docs such as readme files.

Grammarly seems to be a solid solution for web apps, but I didn't see an integration with any popular editor. We use VS code, IntelliJ, and a few others.

Has anyone else found a solution that works well with readme files?
Multiselect Dropdown List with Checkboxes jQuery Plugin
Tags: jquerytutorials, jqueryplugin, multiselectdropdown
Published: 2020-02-07 10:02:29

---
title: Multiselect Dropdown List with Checkboxes jQuery Plugin
published: true
tags: jQuery Tutorials,jquery plugin,multiselect dropdown,multiselect dropdown
canonical_url: https://www.positronx.io/multiselect-dropdown-list-with-checkboxes-jquery-plugin/
---

The post [Multiselect Dropdown List with Checkboxes jQuery Plugin](https://www.positronx.io/multiselect-dropdown-list-with-checkboxes-jquery-plugin/) appeared first on [positronX.io](https://www.positronx.io).

**Multiselect dropdown checkbox** is an excellent JavaScript plugin that transforms the original select box into a multi-select control with checkboxes.


| Author: | mneofit |
| Official Site: | Visit website
| Latest Update: | October 16, 2018 |
| License: | MIT |


[click here to read more](https://www.positronx.io/multiselect-dropdown-list-with-checkboxes-jquery-plugin/)
AWS Increases Security Scan Freedom
Tags: aws, cloudsecurity, cloud, pentesting
Published: 2019-04-04 17:39:19

---
title: AWS Increases Security Scan Freedom
published: true
description: How Auth0 is leveraging the change to better understand and protect our cloud resources
tags: #AWS #cloudsecurity #cloud #pentesting
canonical_url: https://auth0.com/blog/aws-increases-security-scan-freedom/
---
Thanks to a recent change to the AWS penetration testing policy, AWS customers now have more freedom when performing security scans against their AWS resources. At Auth0 we’re leveraging this policy change to better understand and protect the cloud resources we expose to the world.

Before the policy was updated, AWS customers were required to submit a penetration testing authorization request and wait for approval before being permitted to perform a scan. This policy change allows penetration testing of many AWS services without the need for pre-approval.

[Read on ☁️](https://auth0.com/blog/aws-increases-security-scan-freedom/?utm_source=dev&utm_medium=sc&utm_campaign=aws_pentesting)

![AWS Increases Security Scan Freedom](https://thepracticaldev.s3.amazonaws.com/i/6xirz56vh1qw4i2ixc5s.png)
Cancelling HTTP requests with React Hooks and Axios
Tags: beginners, javascript, react, showdev
Published: 2019-04-04 17:36:14

---
title: Cancelling HTTP requests with React Hooks and Axios
published: true
description: Learn how you can cancel a HTTP request with React's useEffect hook when a component is unmounted.
tags: beginners,javascript,react,showdev
---

{% youtube fhu1z5oRxC8 %}
How to Google Search Error Messages
Tags: beginners, productivity, webdev
Published: 2019-04-04 17:21:11

---
title: How to Google Search Error Messages
published: true
description: Some tips for getting better results when Google Searching
tags: beginners, productivity, webdev
---

{% youtube 1OX-mns8UJw %}

1. Use Google
2. Correctly copy error message
3. Create a tier list for yourself
4. Don't go to the second page, change your query instead
5. Don't write complete sentences, use keywords
6. ""
7. Tip by Yunus Gülcü: use - to exclude things
1st Slack AI Bot Hackathon in Tokyo
Tags: slack, machinelearning, ai
Published: 2019-04-04 16:38:26

---
title: 1st Slack AI Bot Hackathon in Tokyo
published: true
description: 
tags: slack, ML, machine learning, AI
---
Hello!

Since we will deploy the 1st Slack App by ourselves,
we hosted 1st Slack AI bot hackathon.
I will post the result in coming days!

Tutorial;
https://qiita.com/daisuke-team-ai/items/856fe12f898abee34233

Our app Kiara : Slack bot with real-time translation for 100 languages. We solve a language barrier problem in cross-border collaboration.
http://kiara-teaser.strikingly.com/

Meetup.com ;
https://www.meetup.com/Machine-Learning-Meetup-by-team-ai/events/260005071/

Photo: 
![alt text](https://thepracticaldev.s3.amazonaws.com/i/dcux0p05vwrcruvn0y2x.jpg "today's photo")
Flexbox Item Stretching, Oh My!
Tags: flexbox, css, tailwind, codinginenglish
Published: 2019-04-04 16:37:38

---
title: Flexbox Item Stretching, Oh My!
published: true
description: 
tags: flexbox, css, tailwind, coding_in_english
---

To stop an item from stretching vertically in a flexbox container, apply this to the container: ``align-self: flex-start;``. 

In tailwindcss, this would be ``class="items-center"`` (or any of the other `items-{position}` classes). Here's a tailwind example:



```html
        <div class="flex items-center">
          <button>Edit</button>
          <button>Delete</button>
        </div>
```



Ain't no shame in StackOverflow Driven Development.


https://stackoverflow.com/a/33887124/1258020
https://tailwindcss.com/docs/flexbox-align-items
HTTP Status 401 vs 403
Tags: programming, http, webdev, rest
Published: 2019-04-04 16:27:21

---
title: HTTP Status 401 vs 403
published: true
description: When to use HTTP Status 401 vs 403
tags: programming,http,webdev,rest
---

`401 - Unauthorized` - Well it should actually say unauthenticated. That is you have not provided/proven your identity or simply put you have not logged in. Can retry with proper credentials to get a 200 OK :D 

`403 - Forbidden` - The server now know very well who you are (logged-in/authenticated) but won't give you what you are asking for because you are not authorized to know about it. No point in retrying unless you get your identity(User account) authorized for this information (that they are keeping from you ;) ).
Using Vue Loader 15's SCSS Modules with Laravel-mix
Tags: vue
Published: 2019-04-04 16:15:16

---
title: Using Vue Loader 15's SCSS Modules with Laravel-mix
published: true
description: How to use Vue loader's SCSS Modules in laravel-mix
tags: vue
---

Hi Guys, 

Do you guys have any configuration of laravel-mix for vue loader's SCSS Modules? 

I tried to follow the instruction on the website but it seems like it's not working. 

Here is my webpack config.

 ![webpack code](https://thepracticaldev.s3.amazonaws.com/i/q0z2lezi3ar6b732211v.png)

Really appreciate your help.