teleren/devto huggingface dataset:
🌳Say goodbye to LocalStorage 🚀
Tags: react, angular, vue, browser
Published: 2020-09-01 10:48:54

---
title: 🌳Say goodbye to LocalStorage 🚀
published: true
tags: react, angular, vue, browser
---

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

Being a front-end developer one of the common things that we wanted is to store and share data in the client browser, And most of us really rely on local storage. So what is  **localStorage**..?
according to MDN:
>The `localStorage` provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. data stored in  `localStorage`  has no expiration time. Data in a  `localStorage`  object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.

So the data stored in `localStorage`  **is specific to the protocol of the page**. In particular, data stored by a script on a site accessed with HTTP (e.g.,  [http://example.com](http://example.com/)) is put in a different  `localStorage`  object from the same site accessed with HTTPS (e.g.,  [https://example.com](https://example.com/)).

The keys and the values are  _always_  in the UTF-16  [`DOMString`](https://developer.mozilla.org/en-US/docs/Web/API/DOMString)  format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.


### So what are `localStorage` disadvantages..?

- data stored in `localStorage` has no expiration time
- ` localStorage` will be available for any tab or window in the browser,
- Have to constantly keep back up of data to prevent loss
-   The user is completely responsible for the safety of the data
-   Takes up more storage space if you store locally

## Switching to session storage

 `Window.sessionStorage` is a better alternative option for `localStorage`.
 A page session lasts only as long as the browser tab is open, and it will survive over page reloads and restores. But opening a page in a new tab or window will create a new session. And we have a storage limit is larger than a cookie (at most 5MB)

## Using Session storage

#### setting data

We can store data using `setItem` method.
syntax :

```js
sessionStorage.setItem('key', 'Value');
```

the above code will add the given key-value pair to session storage.
EG:![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4tpad95fm1mmpn4ow75e.png)

so the session storage now  has  data with key `MyCat`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8epkroovwuki7fthr0uj.png)
#### Getting data

We can get data using the `getItem` method.
syntax :
```js

sessionStorage.getItem("key")

```
the above code will return data of that key from session storage.
EG: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yvaujc0zbxalzyiyyj7l.png)

#### Removing Data
We can remove data using `removeItem` or `clear`method.
syntax :

```js
sessionStorage.removeItem("key")
sessionStorage.clear()
```

`removeItem` will remove a specific key from session storage, whereas the `clear` method will clean up the entire session storage
Career Advice
Tags: career, datascience, webdev
Published: 2020-09-01 10:46:30

Hello All,
I am a freelance nodeJs developer and as far as my work is concerned I am pretty satisfied with where I am right now. I have enough money and time at my hands to pursue a Masters degree, and as luck would have it I have also secured admission in Data Science Master program in one of the best institution of my country. Should I go for it? or should I concentrate on my freelance career only?

Note that I intend to keep working as a freelancer even after my Masters (If I go with it).
JavaScript `this` in a flash!
Tags: javascript, this, context
Published: 2020-09-01 10:45:59

`this` in JavaScript can be the one of the most confusing concepts to grab at first. If you want to understand `this`, just remember only ONE rule. Yeah, just one rule. Consider the following two scenarios below,

```js
function person() {
	console.log(this === global)
}

person(); //true
```

```js
var person = {
	getPerson: function() {
		console.log(this === person);
	}
}

person.getPerson(); //true
```

In the first snippet, the function is called directly. If that's the case, it'll always have the context (this) set as global. (In the browser it's window).

In the second snippet, the function is called from an object. In this instance `this` is the object itself.

Therefore the rule is: "If it's called directly without creating an object, `this` equals to global context, if a function is called by creating an object, then `this` equals to the context of the calling object".

By following this rule, other behaviors can be understood very easily. In JavaScript, there are different way to call methods. `call`, and `apply` are used to call methods by specifying objects and arguments explicitly. Both of these can change the context based on the provided object. Again apply the singular rule. The context of the method will depend on the object that is calling the method. Below snippets shows this behavior. (Note: call and apply differs with the way arguments are passed)

```js
var person = {
	getPerson: function() {
		console.log(this.name);
	}
}

var jack = {
	name: "jack"
}

person.getPerson.call(jack); //jack, reason: even though the method is called from person object, jack object is given as the argument in call function explicitly, therefore it binds to jack object. 

person.getPerson(); //undefined, reason: person object doesn't have name in it's context
```

In the below snippet, `person.getPerson.call(jack);` and `person.getPerson();` will give two outputs.

```js
var person = {
	name: "nancy",
	getPerson: function() {
		console.log(this.name);
	}
}

var jack = {
	name: "jack"
}

person.getPerson.call(jack); //jack

person.getPerson(); //nancy, reason: as method is called from the object and it has a name in it's context.
```

When we consider all the above scenarios, it comes down to the singular rule that we established at the start.
The best Ways to Write a Modern Resume in 2020
Tags: career, beginners
Published: 2020-09-01 10:44:44

The differences are certainly there, and they focus primarily on telling a career narrative and keyword optimization. What is the modern resume? Or more importantly, how does the modern resume compare to the traditional resume?

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

## 1. Keyword optimization
As mentioned, many recruiters search for specific keywords or terms when finding their ideal candidates. Believe it or not, your resume needs to include relevant keywords in order to be considered for the job.

By strategically implementing relevant keywords, you increase visibility in highly competitive markets and heavily populated resume hosting sites, and ensure your resume gets through to a hiring manager. Also, many companies utilize applicant tracking software to help scan through the hundreds of applications they receive for a job posting, looking for the correct terms relevant to the job.

These terms are a must-add to [any resume](https://www.cvsimply.com/blog/download-free-resume-templates-for-freshers) and are ideal for the “Areas of Expertise” section on any resume. This means that if your resume isn't optimized, this system will dispose of your resume before it reaches human eyes.

## 2. Format and style
First, it's imperative to insert a career summary at the beginning of your resume. Career summaries are two to four lines that are typically like your elevator pitch, outlining why you're qualified for the job. Next, you can elect to insert six to nine “Areas of Expertise” bullet points utilizing keywords taken from the job descriptions you've been looking at to highlight your relevant skills and improve visibility on major resume hosting sites.

This begins with the removal of the objective statement and references, which have been deemed outdated. These two sections of the resume have been removed to include more comprehensive content, including a career summary and an Areas of Expertise section.

Modern industry standards call for more comprehensive formats and narrative career storytelling. With this, it is essential to “trim the fat” off of your resume and optimize its content. The idea is to get the document to two pages filled with relevant information that highlights why you're the best candidate for the job.

## 3. Length
According to a study that involved almost 500 recruiters, hiring managers, and HR professionals and nearly 8,000 resumes, recruiters are 2.3 times as likely to prefer two-page resumes over [one-page resumes](https://www.cvsimply.com/blog/how-many-pages-a-resume-should-be), regardless of a candidate's job level.
While traditional resumes or CVs can vary in range or length, the typical length of a modern resume usually hovers around one to two pages.

This means if you have enough information to go on to that second page, do so. If you don't, leave it at one page. If you have many years of experience, you should still cut your resume down to two pages. In fact, more and more recruiters actually prefer two pages over one page, even if you're an entry-level candidate.
My #100DOC - Day 6
Tags: 100daysofcode, challenge, log
Published: 2020-09-01 10:44:19

### Day 6: September 1, 2020

#### **Today's Progress**: 
1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (1h):<br>I reviewed JavaScript loops and the ways to iterate over them. Also, I started challenge 5.
    
#### **What I learned**: 
* Review of JavaScript loops and iteration.

#### **Total time**:
1h 00min.
Mconnect Track order and Shipment Status Extension for Magento 2
Published: 2020-09-01 10:43:12

The first thing every buyer wants to know after ordering a product on an eCommerce store is when will their order gets delivered. Having order tracking functionality is the most expected thing by the customers. More than 95% of the online shoppers need order tracking functionality and each step of shipment status with ease. The default Magento order tracking is not that much capable to provide the exact location of your parcel. Therefore, you need something that provides the order tracking and shipment status to your customers effortlessly. 

Mconnect Track Order and Shipment Status Extension for Magento 2 helps customers with tracking their orders and provides them shipment status with no need to login to their account. With the order ID and registered email, they can easily track their order and know the shipment status on the go. The extension is capable to provide the latest detail of their orders. Also, the customers can view the invoice and shipment details and even print them if needed. Having this functionality integrated into your store is necessary because many shoppers may abandon the carts if they don’t find the order tracking functionality. Also, the extension saves your precious time, which was previously wasted in solving the order tracking related queries. Overall, it creates healthy and loyal relationships with your customers. 

Features of the Mconnect Order Tracking and Shipment Status Extension for Magento 2:

Customers won’t have to log in to know the whereabouts of their orders. 

AJAX integration helps to retrieve orders details quickly.

If needed, then widgets can be set to track orders at multiple locations.

Ability to email customers with a link to track their orders.

The option provided to set widget anywhere on any page or sidebar.

Option to set custom unavailability messages to show customers.

Shipment status with an invoice is displayed.

Customers can print the status of their tracked order.

Orders tracking queries would reduce once the extension takes place, thus saves your time.

It helps in building healthy relationships as well as providing great shopping experience to customers.

For more such Magento 2 Extensions visit Mconnectmedia.com

Download now: https://www.mconnectmedia.com/track-order-magento-2.html
What do you expect from a job offer?
Tags: discuss, career
Published: 2020-09-01 10:19:20

---
title: What do you expect from a job offer?
published: true
description: what it job positions can offer and what people want
tags: discuss, career
cover_image: https://specials-images.forbesimg.com/imageserve/5e33ab078b6cf300071d7cd7/960x0.jpg?fit=scale
---

I would like to see what you expect from a job offer, because it's what we want what modify the rules. 

There are tones of different specs that a position can offers to us, specially on IT.

If all people wants flexible scheduling then the best programmers will be hired by companies that offers that, so others will have to equate and that's how the market works! 

I would like you to share your thoughts and desires
YOU, ME AND POWER APPS
Published: 2020-09-01 10:03:56

Do You Need Power Apps? Or better Yet do you know what  are Power Apps and how they can be of help to your business ? In this piece I'd like to give a brief introduction to Power Apps.



Earlier this year as I was interacting with some of my friends ,I was sharing about how I'm working on a website and one of them suggested that I'd actually create the website with little or possibly no code at all.This really got to me and I was extremely curious to know what  this Power Platform is all about. This are some of the things that I've learnt so far. 

Power Apps is an initiative by Microsoft that allows developers and nontechnical users to build mobile applications from  a selectable template.                        

The objective of Power Apps is to enable business users to build new capabilities via apps, without requiring that they have code expertise.


Power Apps allows one to create Apps that run on Android,ios,windows .It uses the same concept of a mobile App but runs through any modern web browser instead of a mobile app.

Power Apps can also be built to work both Online and offline mode depending on the developers preference. 

Every user of a Power App needs a license So, the minimum license plan a user needs is "Power Apps for Office 365 and Dynamics 365".
However Any customer can sign up for a free trial and Microsoft 365 admins can buy Power Apps plans for their teams or organization. 

I'd like to conclude my short piece by elaborating the following:
Power Apps: Build apps in hours—not months—that easily connect to data, use Excel-like expressions to add logic, and run on the web, iOS, and Android devices.
Power BI:  Unify data from many sources to create interactive, immersive dashboards and reports that provide actionable insights and drive business results.
Power Automate:Include powerful workflow automation directly in your apps with a no-code approach that connects to hundreds of popular apps and services
Power Virtual Agents:Easily build chat bots to engage conversationally with your customers and employees—no coding required.
I hope this piece answers the question of whether or not you need power Apps and if the answer is yes I have provided links to resources that will help you build your App and scale up your business to the next level.



https://powerapps.microsoft.com/en-us/
https://docs.microsoft.com/en-us/powerapps/
Nodejs + TypeScript Boilerplate
Tags: node, typescript
Published: 2020-09-01 10:01:43

I created a repo for nodejs + typescript + eslint + prettier + husky.

This repo allows me to start nodejs project with typescript quickly. This has the following npm-scripts.

If I use `yarn dev:watch`, I can develop a project without converting ts to js and I don't need to run node-mon since this is using `ts-node-dev`. All I need to do is to use `src/index.ts` as an entry point.


## npm-script
#### `yarn clean`
This command will clean up dist folder that is for build files(.js files)
```zsh
"clean": "rimraf dist/*",
```

#### `yarn dev:watch`
This commands allows run index.ts file without compile and monitor the changes on the file
```zsh
"dev:watch": "ts-node-dev --respwn src/index.ts",
```

#### `yarn dev`
This commands allows run index.ts file without compile
```zsh
"dev": "ts-node src/index.ts",
```


#### `yarn format`
This commands will format all files with the rules that are based on `.eslintrc.js`
```zsh
"format": "prettier --write 'src/**/*.{js,ts,json}'",
```

#### `yarn lint:all`
This command will lint all ts files and run `tsc` without generating any .js files
```zsh
"lint:all": "yarn lint && yarn tscCheck",
```

#### `yarn lint:fix`
This command runs `lint` and modify codes to fix lint errors.
```zsh
"lint:fx": "eslint src/**/*.ts --fix",
```

#### `yarn lint`
This command check all ts files with the rules that are based on `.eslintrc.js`
```zsh
"lint": "eslint src/**/*.ts",
```


#### `yarn start`
This command compiles ts files and run build file which is `dist/index.js`
```zsh
"start": "tsc && node dist/index.js",
```

#### `yarn tsc`
This compands ts files
```zsh
"tsc": "tsc",
```

#### `yarn tscCheck`
This command shows tsc compile errors if there are any issues.
```zsh
"tscCheck": "tsc --noEmit"
```


The repo is here.
{% github koji/node-typescript-boilerplate %}


## ToDo
These will be done soon 😎😎😎
{% github https://github.com/koji/node-typescript-boilerplate/issues/1 %}

{% github https://github.com/koji/node-typescript-boilerplate/issues/2 %}
Technical founders should answer this question
Tags: startup, watercooler, writing
Published: 2020-09-01 09:25:37

---
title: "Technical founders should answer this question"
published: true
description: "How would you (re)build your product if storage, compute and scaling weren't a concern at all?"
canonical_url: 'https://francescodilorenzo.com/question-for-technical-founders'
tags: discussion, startup, watercooler, writing
---

As a technical founder coming from engineering, I have this background process in my head that constantly thinks about how things will scale, even when talking product.

It's not easy to turn it off, unless you are aware of it.

In a way it's an asset, because it assesses in real time the difficulty of what you are discussing and can steer you in the right direction. 

Most of the time though, if you are a product decision maker, it is severely limiting. Especially when having open-ended discussion in which you think broadly about a direction to take.

To fight this, I came up with this question that I answer completely disregarding technical details:

> How would you (re)build your product if storage, compute and scaling weren't a concern at all?

- What basic assumptions would you change?
- What feature would you add?
- What would you allow your users to do?

This exercise is useful because we are trained to deeply consider technical concerns at all times. It's second nature. How would I implement this? Which data structure? Which algorithm? The DB schema? *This is bullshit.* 

We are at a point where scalability is an implementation detail, not something that should cloud your judgement when thinking about product. It should have way less space in your head.

We have established technologies that make scaling someone else's problem for cheap (S3, DynamoDB, Lambda, ...)


You can fix your scalability issues once you strike gold. Once your idea is its final PMF form. Avoid premature optimization until then. That's what I'll try to do.

Unlearning is part of becoming the best at what you do.
Mconnect Store Locator / Google Map Extension for Magento 2
Published: 2020-09-01 10:00:44

Sometimes customers or your dealers may need to contact you in person to solve their queries or shop from your physical store. One way you can do this is by providing them with an address or provide them Google map location, which they can follow and reach you in no time. To let your customers or dealers know the location of your dealer store, you can use Mconnect Store Locator Google Map Extension for your Magento 2 store. 

The extension will help you manage the Google map locations of multiple stores. It provides ease and speed to customers to find the location of your physical stores. This dealer store locator extension helps customers with the addresses, open time, in-store events, etc. Also, all this information can be imported through the CSV file. The friendly user interface of the extension provides an appropriate amount of search criteria, which will help customers to locate your stores easily with minimum efforts. With the integration to Google map, the direction and navigation to your store will also become simple even if your store is five or ten miles away. The main aim of the store locator extension is to increase the traffic volume at your physical store so that when a product is not available at one store, the customers can find it on another store location. 

Features of Mconnect Store Locator Google Map Extension for Magento 2:

The whole list of stores with their addresses are available to the customer.

The location of the stores with their icons will be visible to customers on Google map. 

Option to choose between the satellite or map view.

Option to filter store location and addresses with tags.

Customers can also search stores with the help of zip code, a specific city, state/province, or country.

Option to add multiple store locations by importing the CSV file.

Facility to add various other store information like store open hours, in-store events, etc.

For more such Magento 2 Extensions visit Mconnectmedia.com

Download now: https://www.mconnectmedia.com/store-locator-magento-2.html
5 TOOLS TO SPEED UP YOUR R&D TEAM IN 2021
Tags: productivity, github, opensource, javascript
Published: 2020-09-01 09:57:53

As strange as this year has been, we are already nearing the end of summer and the changes and consequences of working remotely are here to stay, at least until the first half of 2021. Here are five free tools any tech-lead can adopt to speed up the development processes and collaborate with other developers.

Read More: https://blog.xscode.com/1334/5-tools-to-speed-up-your-rd-team-in-2021/
React-Manual-configuration-with-Webpack-from-scratch
Tags: react, javascript, webpack, css
Published: 2020-09-01 09:54:03

Github code: https://rb.gy/r1tjme

What you'll get in this webpack configuration for the React App?

Below the list is given:

* dev and production environment separation
* project structure like create-react-app
* sass config
* HTML template
* PWA Feature config
* CSS and JS minification
* hashing
* file loader and much more

[Live Demo ](https://rb.gy/w6lmch)

Note: I use this webpack config in one of my project which is hariSalon React App

[Live App](https://hairshop.netlify.com)
[Github code](https://github.com/Alidhuniya/hairSalon-with-React-Strapi)