teleren/devto huggingface dataset:
JS - What are Closures
Tags: javascript, webdev, tutorial
Published: 2021-06-19 14:24:23

### About me:
Hi there, my name is Owen Boreham, and most people call me by my username... "Bobrossrtx". At the time of posting this, I am a 15 year old teenager hoping to be a get into college for Computer Science. Anyway that is enough about me, lets talk about closures...

{% details summary %} I will talk about what closures are and when they are used in this article. All credit of this knowledge comes from [Fireship](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) and you can check out his website [here](https://fireship.io).

{% enddetails %}

## Closures
Closures are JavaScript functions access variables from the global scope, for example...
```js
// Lexical environment
let myVar = "Hello World";

// Function
function hello() {
  console.log(myVar); // Captures the myVar variable
}

hello()
```
In order to call a function in your code, the JS interpreter needs to know about the function itself and any other data from the surrounding environment that it depends on.

Take for example a pure function that only depends on it's own arguments.
```js
// No external data
function pureFunc(a, b) {
  return a + b;
}
```
What we have here is a fully self contained closed expression. When it is called, it gets pushed onto the call stack where it will be executed and its internal data (arguments) will be kept in memory until it is popped back off the call stack.

But what if that function references data from outside of it's own scope like from the global environment or an outer function.
```js
// Parent scope
let b = 3; // free variable

// This is a Closure
function impureFunc(a) {
  // Function scope
  return a + b; // Captures `b` variable
}
```
This leaves us with an open expression that references other free variables from the environment. In order for the interpreter to call this function and also know the value of these free variables it creates a closure to store in the Heap, this is a place in memory that can be later accessed. Unlike the call stack where the it is short lived, the Heap can keep data indefinitely then decide to remove that data when it is no longer needed by using a garbage collector.

So a closure is not just a function, it is a function combined with the outer state or lexical environment. Closures do require more memory and processing power than a pure function but you will come over many practical reasons why to use them.

{% details Socials %} Twitter: [@bobrossrtx](https://twitter.com/bobrossrtx)
YouTube: [Owen Boreham](https://www.youtube.com/channel/UCrnwYvGzBiig4O5pj_8b7-Q)
Medium: [@bobrossrtx](https://medium.com/@bobrossrtx)
dev: [bobrossrtx](https://dev.to/bobrossrtx)
Github: [@bobrossrtx](https://github.com/bobrossrtx)
{% enddetails %}
RESTful Routes & DELETE
Published: 2021-06-19 15:30:40

## What is a RESTful Route?
Let's start with what is Rest? Rest stands for (REpresentational State Transfer). This provides a pattern for developers to use when building routes. 

A **Restful Route** provides mapping from our HTTP Verbs to our CRUD (Create, Read, Update, Delete) controller actions. Our CRUD actions are a combination of HTTP verbs and action.This makes it easier for developers and users to understand whats happening as they use a web application. 

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

## The Delete Action 
One element in our C.R.U.D application is Delete.
What makes our **Delete** method different is that it works with Sinatra Middleware via (Rack::MethodOverride), because our browsers don't recognize this verb.

*In order to use Rack::MethodOverride we must tell our app to use the middleware.*

The delete method needs to be submitted as a post request.  In order to make this work our form must include a **"hidden"** input felid to communicate with our Sinatra middleware. We also include a `name=" _method"` to tell our middleware to translate the forms tags attribute and `value= "delete"` 

Here is a form for our delete method: 
```
<form method="post" action="/games/<%= @games.id %>/delete" >
 <input type="hidden" id="hidden" name="_method" value="delete">
 <input type="submit" value="Delete Game">
</form>
```


Here is our delete controller: 
```
 delete "/games/:id/delete" do
    @games = Game.find_by_id(params[:id])
    @games.destroy
    redirect "/games"     
  end

```
This action finds the games in the database based on the ID in the url parameters and deletes it. It then redirects to the index page where all of our games are displayed  minus the one we just deleted.
Nextjs vs React (firebase)
Tags: react, nextjs, help, firebase
Published: 2021-06-19 14:26:44

Can I basically use Nextjs like I do React? BUT, use Nexts client and server “add ons” or “security measures”.... their way? 
......
With using Firebase, it’s proving to seem 3 steps more to do one step in React, why? 
....
I have my data for my products by a CMS “Airtable”, then I’m using Firebase for my Users profiles, authentication and what they add to their profiles. Airtable is just for products.
...
...
Just trying to use AuthContext the Next way... is kinda weird and dosnt make sense.
Amazing card hover effect you have never seen it before
Tags: uiweekly, css, beginners, html
Published: 2021-06-19 13:41:08

Hello, glad you are here. I am kunaal and today we will see how to make an awesome neon card with an awesome card hover effect using only CSS. You can see demo below.

#Demo

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

#Video Tutorial

{% youtube QD35tx9lYEQ %}

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

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

[My youtube Channel](https://www.youtube.com/c/TechyProgrammers/), [Instagram](https://www.instagram.com/techy_programmers/)
Random Rant
Tags: googlecloud, cloud, firebase
Published: 2021-06-19 13:33:26

Spent the last three hours staring at my system cause I needed GCP to implement a feature on a personal project. 2 of those hours went into reading GCP documentation(first timer).

30 minutes went into trial and error while simultaneously screaming random curse words at my Macbook. The last 30 went into finally implementing the feature.


I deserve a medal at this point lol!!
React Native Google Custom Map Style Example
Tags: reactnative, google
Published: 2021-06-19 13:23:58

Hi Guys, Today,I will learn you how to draw google custom map style in react native.we will show example of react native custom map style .First i will create import namespace MapView and Polyline from npm i react-native-maps, after I will using MapView using for MapView and polyline tag add polyline in react native example.
Here, I will give you full example for simply display google custom map style using react native as bellow.

More...
https://www.mywebtuts.com/blog/react-native-google-custom-map-style-example
Micro-services: A micro introduction
Tags: microservices, webdev
Published: 2021-06-19 12:40:27

An introduction to micro-services is incomplete without talking about monolith architecture, so before we start talking about micro-services let's first see what a monolith is, to get a good idea of what micro-services are and why they are needed.

## :rocket: Monolith Architecture
![Monolith Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbe14odrxgue8bxlq4jx.jpeg)
&nbsp;&nbsp;In this type of architectural style, an application is developed as a single codebase and deployed as a single unit. Let's say you want to build a small role playing game(RPG) with following features:
&nbsp;&nbsp;&nbsp;&nbsp;A. Build an avatar
&nbsp;&nbsp;&nbsp;&nbsp;B. List available power-ups
&nbsp;&nbsp;&nbsp;&nbsp;C. Upgrade player's power
&nbsp;&nbsp;&nbsp;&nbsp;D. Daily bonuses

&nbsp;&nbsp;In a monolith architecture each of these features will be bundled in a single unit and then deployed, and this single unit will refer to one single database. Earlier, this kind of architecture was very common.

## :rocket: Micro-service Architecture
![Microservice Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jekufc5cxbtte24sqqqd.jpeg)
&nbsp;&nbsp;In this type of architectural style, an application is broken down based on its features, and each feature has its own codebase, known as a service, and each service refers to its own database (this model is also known as Database-per-service model).

&nbsp;&nbsp;Taking the above example of the role playing game, Build an avatar, List available power-ups, Upgrade player's power, Daily bonuses, each of these features can be a service of its own, that is, each feature can be a self-contained unit and have its own database.

### The why of micro-services
* Multiple teams can work independently on different features.
* No single point of failure.
* Even if one service fails the other one is not affected.

Microservices also provide a great way for independent feature development.

&nbsp;&nbsp; This concludes the micro introduction to the micro-services. I hope you have learnt something new today.
> Keep Learning and Keep Growing. :tada:
Npm Multi Version Package (Standards?)
Tags: npm, help
Published: 2021-06-19 12:38:54

Hi,

My and my team are implementing a multi build process in our deploy CI/CD flow.

By configuring babel/webpack properly we are now able to ship different versions of our codebase per browser.

However from what I saw, when it come to the packages used by the application in node_modules, they do not all the time offer modern/legacy etc versions through "Exports/mains" package.json fields

I wonder if is there any best practices standard for package publisher is this regard. and if is possible to know easily which packages offer many version.

Thank!
Core Web Vitals
Tags: corewebvitals, chrome, gogole
Published: 2021-06-19 12:28:23

The <img> element now supports lazy-loading, async decoding and many other features: http://bit.ly/img-cwv I wrote about how to optimize UX & the Core Web Vitals with it.
https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/
Image Optimization
Tags: pwa, devops, developers
Published: 2021-06-19 12:21:55

Introducing "Image Optimization": a fresh 528 page Print + eBook on modern formats, compression, automation and more: 

https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/

 2+ года в разработке. С благодарностью smashingmagazine
Getting started with PostGIS
Tags: postgis, geospatial, data, postgres
Published: 2021-06-19 12:09:42

If you have worked with geospatial data, you might want to harness the power of PostGIS. It is an extension of PostgreSQL which adds spatial ability to your database. Reading, analyzing and processing geospatial files like .shp, .tif etc requires special tools. However, doing SQL operations to achieve the same makes it more consistent for developers. 

PostGIS allows to very simply load and query geospatial data from the database for representational purposes. 

Refer my original blog [here](https://bit.ly/3qEO5LI) to understand the entire installation process for Windows and Linux and how you can set up PostGIS. Additionally, also learn how you can load and query data in a step-by-step illustration.
WHAT IS NODE.JS?
Tags: node, javascript, programming, webdev
Published: 2021-06-19 12:07:51

![nodejs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb6opv4lombzqvhbf16y.png)

Irrespective of the fact that you know javascript or not, you must have encountered these questions: What is NodeJS? Is it a server side programming language? Is it just another javascript framework like AngularJS?

Well, NodeJS is neither a framework nor a programming language.

As per the official docs:

***Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine***

Let's dig deeper and understand this better.

**History:**

It all started in 2009, when javascript was primarily used to run inside a browser. We could embed javascript code in a webpage’s HTML and achieve all sorts of benefits like adding events to pages, calling APIs, adding animations etc.

While all this was possible, 28-year-old Ryan criticized the Apache HTTP server for it's limited possibilities to handle concurrent connections. He explored several options to support javascript outside the browser and went on to become the creator of one of the hottest technologies of future.

But, how did he do it? To answer this, we must first understand how javascript runs inside a browser.

**Javascript Engine:**

Every browser has a javascript engine that allows us to execute javascript code inside it. For example: Firefox has SpiderMonkey and Internet Explorer has Chakra (Yes, IE is alive). Join me in welcoming V8, the javascript Engine inside Google Chrome. V8 is special because this is what powers NodeJS. Ryan combined the V8 code with C++ to create NodeJS, that not only allows us to execute javascript outside browser but also gives us additional libraries to interact with the Operating System.

Now, the engine can execute the JS code but where exactly are we running this code?

**Javascript Runtime:**

It's the environment where javascript code is executed. For example: In case of ReactJS or AngularJS, the code runs inside a web browser. So our browser is the javascript runtime here. Similarly, NodeJS is the javascript environment for server. Think of it as a container that you place inside the server and send it all your javascript.

**If it's just a runtime, how is a NodeJS developer any different from a Javascript developer?**

It's the same as asking the difference between a Frontend developer and a Backend developer. A NodeJS developer is someone who breathes javascript as well as understands the fundamentals of server side development. A good understanding of javascript can save you the effort of learning a new language but there is no running away from the basics. This is one of the reasons NodeJS became popular. I would let Ryan explain other reasons for it's popularity: https://youtu.be/ztspvPYybIY

At the time of writing this article, NodeJS is 11 years old and loved by top companies like Paypal, LinkedIn, Uber, Yahoo, Medium, GoDaddy, Groupon and Walmart. However, many experienced developers still find this topic confusing. I hope this article busted some myths around NodeJS. If you found it useful, don't forget to share it with other javascript developers.
I TRIED POMODORO FOR 30 DAYS
Tags: productivity, management
Published: 2021-06-19 12:05:51

![pomodoro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybqnet0vj4goeyujliaz.jpeg)

So, what the heck is a Pomodoro technique?

Well, it's a time management technique where you split your day into brief intervals (usually 25 minutes), separated by quick breaks. Each​ interval​ is what we call a Pomodoro. Simple yet powerful, all you need to be able to follow this technique is a timer.

First, a little background: I heard about Pomodoro from a colleague who would swear by it. His love and conviction in Pomodoro convinced me to try the technique as well. However, My first attempt turned out to be an epic failure. Here's what happened: I started an interval and within one minute, someone walked over to my desk to discuss an important feature. R.I.P Pomodoro!

It was hard for me to comply with the technique in my work environment. Sometimes, I would just skip the breaks and end up working for hours on the same thing. Then entered the lockdown followed by work-from-home. I thought of experimenting with the technique once again, and here’s what happened:

Bye Bye Procrastination-

The short interval psyched me. It left me with no excuses to procrastinate, considering I had limited time to finish a task.

Bye Bye Eye Strain-

Being a software developer, my eyes spend 8 hours with my laptop followed by 4 hours with my mobile. My doctor urged me to take frequent pauses while working just to calm my eyes. Are you happy, doctor? Because my eyes are.

Bye Bye Guilt Trips-

Yes, no more feeling guilty about taking breaks. I could dance, dream, or even kill mosquitoes - I earned those breaks and nothing could take them away from me.

Say Hello to Productivity-

I could organize my tasks in a stronger manner and still focus on each task for prolonged periods. I could accomplish more jobs even though I was taking more breaks.

It's worth considering that this technique might not work for everyone. It might not even work for me once i am back in office (post-pandemic). But, do i recommend it? Absolutely. It's worth a couple of days of your life. Give it a shot and feel free to modify the interval to your liking. Go with the flow and you will be addicted!
Code Smell 81 - Result
Tags: oop, programming, codenewbie, tutorial
Published: 2021-06-19 12:03:59

*result = ???*

> TL;DR: Use good names always. Result is always a very bad name.

# Problems

- Readability

# Solutions

1. Rename *result*.

2. If you don't know how to name it, just name the variable with the same name as the last function call.

3. Don't use IDEs without automatic refactors.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/9d1f20a108047109bf229baf1c4c9976)
```javascript
var result;

result = lastBlockchainBlock();
//

// Many function calls

addBlockAfter(result);
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/75488df759013fcc4f3381b1006b7f82)
```javascript
var lastBlockchainBlock;

lastBlockchainBlock = findlastBlockchainBlock();
//...

// Many function calls 
// we should refactor them to minimize space
// between variable definition and usage

addBlockAfter(lastBlockchainBlock);
```

# Detection

We must forbid the word result to be a variable name. 

# Tags

- Readability

# Conclusion

*Result* is an example of generic and meaningless names. 

Refactoring is cheap and safe.

> Always leave the campground cleaner than you found it.

> When you find a mess on the ground, clean it, doesn’t matter who did it. Your job is to always leave the ground cleaner for the next campers.

# Relations

{% post https://dev.to/mcsee/code-smell-79-theresult-429k %}

# More info

- [What is in a name? Part I: Rehab](https://dev.to/mcsee/what-exactly-is-a-name-part-ii-rehab-20gd).

# Credits

Photo by <a href="https://unsplash.com/@kmaimg">KMA .</a> on <a href="https://unsplash.com/s/photos/magician">Unsplash</a>
  
* * *

> Code is like humor. When you have to explain it, it’s bad.

_Cory House_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
First projects with Svelte
Tags: webdev, showdev, javascript, svelte
Published: 2021-06-19 11:09:12

Hello Everyone.

I have been learning [Svelte](https://svelte.dev/) for a while now while building projects.
I would love your feedback and any suggestions on them.
Like what to add, remove update or also improve on.

Some of the projects are:
* A web editor like [codepen.io](https://codepen.io/)
* A track board like [Trello](https://trello.com/) (in progress)

#### Links to projects

Web Editor: [Smart Web Editor](https://codebuddy.netlify.app/)

Track Board: [Track Board (Codezi)](https://codezi.netlify.app/)

Thanks for reading, see you in the next article.
Do you find difficulty choosing between =, == & === ?
Tags: javascript, programming, webdev, beginners
Published: 2021-06-19 11:02:56

### Assigning Operator (=)
It assigns the value to the variable.
```
const firstName = 'Prashant';
const favNumber = 13;
```
### Loose Equality Operator (==)
This operator compares two values & return true if they are equivalent or false if they are not.
```javascript
function equality(value) {
     if(value == 13) {
          return 'Equal';
     }
     return 'Not Equal';
}
```
In addition, it also compares two different data types (numbers & strings). <br>
It is called as Type Coercion.
```javascript
1 == '1' /* This will return true with the Loose Equality Operator. */
```

### Strict Equality Operator (===)
Unlike the Equality Operator, it does not compare two different data types. <br>
Otherwise, it works similarly to Loose Equality Operator.
```javascript
1 === '1' /* This will return false in case of the Strict Equality Operator. */
```
### More Examples
```javascript
var favBook = 'Sapiens'; /* Assigns the value to the variable */

const 13 == '13'; /* It will perform a type conversion and it will return true. */

const 13 ==='13' /* It will not perform type conversion. Hence, it will return false. */
```

<br>
### A tip by {% user lukeshiru %}
Ideally, you should always use `===` and `!==`, and never use `==`, and `!=`.
Or to make it easy to use what can you do is configure your linter to always use `===` and `!==` in code editor.
The loose equality has too many pitfalls that are covered by the strict one.
<br>
##### Hope you found it helpful. Please let me know.
##### Why not connect on [Twitter?](https://twitter.com/13Prashaant)
What is the project that community wants to see?
Tags: discuss, javascript, html, css
Published: 2021-06-19 10:24:27

Hi everyone. I'm a co-creator of the first Studio that is fully dedicated to front-end. Obviously as every creator of anything I strongly believe that my project will be the one that will change the world. To the point. I want to let everyone know about existence of my tool, but in the same time bring something valuable to the community, which I think is fair exchange. So, what project, website or web app you crave to see being developed? I want to make a tutorial out of it on YouTube, explain how it's done and obviously give access to all the code of this app to everyone.
Choose your missions. Work Remotely. #job #remote #freelancer #reactnative #reactjs #nodejs
Tags: career
Published: 2021-06-19 10:22:48

---
title: Choose your missions. Work Remotely. #job #remote #freelancer #reactnative #reactjs #nodejs
published: true
description: Are you looking for a remote job?
tags: career
---
Hey everyone!

I hope you're doing great 😁

We're looking for Freelance Remote Developers on the following stacks: React native / React.Js / Node.Js

Are you one yourself? Do you have someone that fit those criteria in mind?

Then join us by filling out the form on our website 👇
http://bit.ly/rizeregistration

DISCLAIMER: Only people who are owner of a company, can be registered in any country.