teleren/devto huggingface dataset:
Strict Mode in JavaScript
Tags: javascript, html, tutorial, typescript
Published: 2020-12-28 07:31:22


It is new feature included in ES5.
It is used to execute the code in **"strict mode"**. we can achieve this by adding 'use strict' in the beginning of your script or function. only the code below the assignment comes under strict mode.

Declaring in the beginning of your script makes it available globally in the code (inside the function as well).
Declaring inside the function make it available locally inside the function.

##Strict mode helps out in a couple ways:
* It catches some common coding bloopers, throwing exceptions.
* Strict mode eliminates some JavaScript silent errors by changing them to throw errors.
* It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
* It disables features that are confusing or poorly thought out. 
* Strict mode makes it easier to write “secure” JavaScript.


### List of features 
* Disallows global variables(object literal also).
```javascript 
x=20;
```

* Assignment to a reserved keyword (inc eval & arguments) is not allowed
```javascript
var undefined = 5; // throws a TypeError
var Infinity = 5; // throws a TypeError
```


* Writing to a read-only property is not allowed:
```javascript
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable: false});
obj.x = 3.14;  // This will cause an error
```

* Writing to a get-only property is not allowed:
```javascript
var obj = {get x() {return 0} };
obj.x = 3.14;            // This will cause an error
```

* Deleting a variable, object, function is not allowed
```javascript
delete obj //SyntaxError: Delete of an unqualified identifier in strict mode
```

* Attempts to delete undeletable properties will throw 
```javascript
delete Object.prototype //throws error
```

* Requires all property names in an object literal to be unique 
```javascript
var x = {x1: "1", x1: "2"} //throws error
```

* Function parameter names must be unique 
```javascript
function sum (x, x) {...}//throw error
```

* Octal numeric literals are not allowed:
```javascript
var x = 010; // This will cause an error
```


* with statement is not allowed:
```javascript
with (Math){x = cos(2)}; // This will cause an error
```

* eval in strict mode does not introduce new variables
```javascript
eval ("var x = 2");
```

* deleting plain names throws error.
```javascript
var x
delete x;
```


###SOME EXAMPLES/ OBSERVATIONS

```javascript
function func() {
    "use strict"
    y=100; //this will not throw an error till the function is not called
}
```


```javascript
"use strict"
function func() {
    y=100; //this will not throw an error till the function is not called
}
```


```javascript
function func() {
    myGlobal = 5  //this will NOT give error
  }
  
  (function() {
    "use strict";
    func()
  })()

  function func_strict() {
    "use strict";
    myGlobal = 5 //this will give error
  }
```


We hope that this post is helpful for you.
If really, Please rate us and let us know your review in the comment.

that's it my dear devs :)


If you like it please give a 👍

Thank you,
CapsCode
www.capscode.in
Understanding Docker: part 24 – Events
Tags: docker, devops, beginners, cloud
Published: 2020-12-28 07:28:12

---
title: Understanding Docker: part 24 – Events
published: true
description: Serie of sketchnotes about Docker. Explaining in a visual way Docker principles.
tags: Docker, DevOps, beginners, Cloud
series: Understanding Docker in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/i9p8wks4rivbf1mz4hdc.jpeg
---

Understanding Docker can be difficult or time-consuming. In order to spread knowledge about Cloud technologies I started to create sketchnotes about Docker. I think it could be a good way, more visual, to explain Docker (and other technologies like Kubernetes and Istio).

We continue the series of Docker sketchnotes with a not well known feature: Docker events.

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

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

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).

If you are interested, I published all the sketchnotes on Docker (and new ones!) to make a "book" of 93 pages: ["Understanding Docker in a visual way"](https://gumroad.com/aurelievache#YTLzM).
Software Engineering done right — 5 things I wish I knew as a Software Engineer (5 Part Series)
Tags: webdev, leadership, codenewbie, beginners
Published: 2020-12-28 07:20:23

Software Engineering is one of the most talked about and sought after career paths in the current world. During my journey as a Software Engineer, I worked with some wonderful people, latest technologies and great projects. As I reflect on my humble beginnings and gradually progressing to be an Engineering Manager currently, I wish I knew some key aspects of the craft of Software Engineering back then.
...
Below is a list of those 5 key traits. We will explore each trait individually as a separate topic in a series of posts.
...
**Key Traits:**
1) [Spreading too thin](https://dev.to/anandsafi/key-point-1-spreading-too-thin-5-things-i-wish-i-knew-as-a-software-engineer-234b)
2) [Focused on implementation only] (https://dev.to/anandsafi/key-point-2-focused-on-implementation-only-5-things-i-wish-i-knew-as-a-software-engineer-f3k)
3) Not POCing enough
4) Communicate & Collaborate
5) Mastering a niche vs Smart Generalist
...
Do share what other key traits one should consider in the comments below!
...
On to [Key Trait #1 - Spreading too thin...](https://dev.to/anandsafi/key-point-1-spreading-too-thin-5-things-i-wish-i-knew-as-a-software-engineer-234b)
Tracking long queries into csv
Tags: activerecord, rails, database
Published: 2020-12-28 07:13:05

If you have tons of queries executed in a Job or in a method, and you want to monitor which queries are slow and need attention, how do you track them ?

I was wondering what really dragging my cache job running time. The job supposed to be done in under 4 minutes suddenly spiked to 22 minutes. 

I found [`query_tracker` gem](https://github.com/kirillshevch/query_track) which displays all the info I needed. It also allows slack integration. In my case, I wanted it to store query informations into CSV. Fortunately the gem allows [custom handlers](https://github.com/kirillshevch/query_track#custom-notifications-handlers). 

Below is how I did my custom handlers :
```
QueryTrack::Settings.configure do |config|
  config.duration = 0.5
  config.notifications.custom_handler = -> (sql, duration, trace) {
    CSV.open("log/query_tracker.csv", "a+") do |csv|
      csv << [Time.now, duration, sql, trace]
    end
  }
end
```

notice the `a+` open type, that will prepend the file.

Now all the queries information are visible for your next action :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zr2np32zjlxkeoldqexw.png)

You can always use the sort function to get more insights :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hgdp6rmtxuwid3loxhhj.png)

In my case, this is my queries that needs attention :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a0fcooqtj4fdzqnaghfe.png)

Thank you :)
YouTube Video | ReactJS Tutorial for Beginners -18
Tags: react, youtube, webdev, showdev
Published: 2020-12-28 07:05:46

We will learn to do http request in this final part.

{% youtube VypOL5vKLig %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | ReactJS Tutorial for Beginners -17
Tags: react, youtube, webdev, showdev
Published: 2020-12-28 07:04:22

We will learn about Context in this part.

{% youtube mCTnSyosTrE %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | ReactJS Tutorial for Beginners -16
Tags: react, webdev, showdev, youtube
Published: 2020-12-28 07:02:55

We will learn about Render props in this part. They are also used like HOC to share common functionality between components.

{% youtube VKrtemTQZRw %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | ReactJS Tutorial for Beginners -15
Tags: react, youtube, webdev, showdev
Published: 2020-12-28 07:01:13

We will learn about Higher Order Components(HOC) in this part.

{% youtube KWHi8RRjDE0 %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
YouTube Video | ReactJS Tutorial for Beginners -14
Tags: react, webdev, showdev, youtube
Published: 2020-12-28 06:58:41

We will learn about Portals and Error Boundary in this part.

{% youtube 2Y3d7dlYTZw %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
4 JavaScript Tricks!
Tags: javascript, webdev, bash, help
Published: 2020-12-28 06:57:56

Hey Mates, I am BrokenHead today I will share 4 JavaScript tricks
###**WHAT IS JAVASCRIPT?**
**JavaScript** is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.
###**IS JAVASCRIPT EASY?**
**JavaScript** is a simple and easy-to-learn programming language as compared to other languages such as C++, Ruby, and Python. It is a high-level, interpreted language that can easily be embedded with languages like HTML.

Now let's see the 4 awesome tricks.

###4 Awesome Tricks For Your Website!

**1.** Always Use Javascript As External Script.
       **REASONS**
1. It's Hard To Debug Inline Javascript.
2. Inline JavaScript Have more error.
3. Most extensions for debugging work only on the external scripts.
4. It makes the code messy.

**2.** Add Dark Mode To Your Site.
**Dark** Mode looks awesome on websites I am adding a codepen embed it's a simple dark mode toggler with transitions.
{% codepen https://codepen.io/Phoenix-POOP/pen/QWKOYJg %}

**3.** Defining functions in a single line 
This trick is really cool. If you have any knowledge in Python, you probably know the lambda function which behaves as an arbitrary function and is written in a single line. Well, we don’t use the lambda function in JavaScript, but we can still write one-liner functions. Say we would like to calculate the product of two numbers a and b, we can do it in a one-line script. We need not specifically write the return statement as this way of defining already means that it will return the output on its own.

**CODE**
<html> 

<body> 
	<p> 
		One Line Variable
	</p> 

	<p id="demo"></p> 

	<script> 
		const productNum = (a, b) => a * b 

		document.getElementById("demo") 
			.innerHTML = myFunction(4, 3); 
	</script> 
</body> 

</html> 

**4.** Make your site alive
Make some stuff like when a user visits your site he fell in love with the site.
One more stuff I have seen on Sean Halpin Site
https://seanhalpi.io 
is that when you move your cursor an eye keeps seeing your cursor!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kzikgz36vj9u0i7m5a7p.PNG)
This made the website look greater...
       That's all

Join Our Community And If You Need Any Help Feel Free to Ask.
Discord: https://dsc.gg/helifam



Thanks for reading...
YouTube Video | ReactJS Tutorial for Beginners -13
Tags: youtube, react, webdev, showdev
Published: 2020-12-28 06:56:55

We will learn about React Refs in this part.

{% youtube NxlJNg6MFYs %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
How to Start a Personal Blog?
Tags: startup, tutorial, personalblog, devops
Published: 2020-12-28 06:51:38

To start a personal blog, the first thing you need to have is the hosting for your blog, you should have good hosting so that you can create and place your personal in front of the public.

So, here we will know step-by-step how you can purchase hosting from Hostinger for your personal blog.

Pro Tip – Start with Shared Hosting and later upgrade to Cloud or VPS when the traffic will grow.

**Step1:** Visit Hostinger.com and choose your plan, usually bloggers prefer to choose WordPress for their blog, you can also say it is a WordPress Blog. So you can also choose WordPress Hosting if is suitable for you.
**Step2:** Click on Add to Cart when you choose a plan to start a personal blog.
**Step3:** Next, choose a perfect monthly or yearly plan for your blog.
**Step4:** After this, you have to create an account on Hostinger if not yet created.
**Step5:** The final last step before you start a personal blog, select a mode of payment, and enter your billing details and Submit.

##7 Reasons and Benefits to start a Personal Blog!
If you are thinking about how starting a blog can be helpful for you, then that is a genuine question that everyone thinks and asks. So, here we are going to tell you the same thing that how starting a blog can be beneficial for you and can be a way to earn income.
Okay, go through these important points that will tell you why you should start a blog and how it can be beneficial for you.
1 – Fame
2 – Monetize your content
3 – Learning and Skill Enhancement
4 – Networking
5 – Establish yourself as a Brand
6 – Grow your audience
7 – Online Product Sales

##6 things you should ask yourself before starting a Personal Blog
1 – Which audience will you target?
2 – Why you are starting a blog?
3 – How you bring traffic to your blog?
4 – What will be the name of your blog?
5 – How much time you can spend on your blog?
6 – Which platform you choose to host your blog?

Learn more on <a href="https://cheapandbesthosting.com/what-is-personal-blog/">how to start a personal blog</a>
MongoDB Atlas Security (and IP Address range?)
Tags: mongodb, help, security, database
Published: 2020-12-28 06:50:46

What is the best way to ensure MongoDB Atlas security and access control? (for Node.js / Golang)

There are too many choices.

### API key

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

### Database users

- Password
- Certificate
- AWS IAM

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

## About IP Addresses

What should be the IP address range? How often do YOU had to assign new IP address permission?

I believe it is not only about Mongo, but anything 12-factor'd. 

How does it apply to Heroku? 

And, WHY IP address, not MAC address, for development machines?
Redux Concept
Published: 2020-12-28 06:37:27


These days I am revising some concept which I learned while doing some projects. These concepts are useful if you are creating any website using react or some other technology. So we know that react uses props and states to manage the design and flow of data on any website. When working on small projects with a simple tree structure, it is easier to maintain the states of the components and pass the data between the components. For this, the data needs to reside in a single component so that it can be passed on to the sibling components. The method needed to update the state also needs to reside in the parent component and be passed to the sibling components as props.  So state management gets messy when the app gets complex. 

Here comes the concept called redux. Redux is an open-source JavaScript library for managing application state. 

![Image From https://miro.medium.com/max/1086/1*a15Fjk16s4CVlfHaTkO73w.png](https://miro.medium.com/max/1086/1*a15Fjk16s4CVlfHaTkO73w.png)

There are some terminology for the Redux.
* Types
* Reducers
* Actions

First of all, we need to create a store where our states will store. To change something in the state, we need to dispatch an action. Actions get the data (or something accordingly) and according to the data, it will call the reducers to change or update the state. Lets understand with an example.

```
import { createStore } from 'redux';
const USER_LOADING = 'USER_LOADING';

const initialState = {
  isLoading: false,
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case USER_LOADING:
      return {
        ...state,
        isLoading: true,
        error: null,
      };

    default:
      return state;
  }
}

const loading = () => (dispatch, getState) => {    //This is action.
  dispatch({
    type: USER_LOADING,
  });
};

const store = createStore(
  rootReducer,
);


```

So here in this example if we need to change the state of isLoading state to true we just need to call the action loading() in the component and it will automatically update the state for all.
This is it for now, if you have any question you can dm me.
Contact shared in my [portfolio](https://prashantpandey.ml/).
Netgear Orbi Login
Tags: orbiwifilogin, orbiroutersetup, orbiwifisetup
Published: 2020-12-28 06:26:01

Orbi system required Orbi application to access. After buying, set them up with your phone or computer system. Download Orbi application from online store. Sign in with your Orbi account. In case you don’t have any Orbi account, follow onscreen instructions to create and access Orbi account.
If you are having any issue while accessing Orbi wifi system, contact us. We will help you instantly. Any kind of issue will be resolved easily.
Website : https://www.orbi-logiin.com/
How do you guys promote open-source projects?
Tags: promotion
Published: 2020-12-28 06:13:28

Recently, we built an open-source pixel-art editor tool, called **PixelCraft**, It's on github,


https://github.com/rgab1508/PixelCraft


We had not intended to promote it and even without promotion, it started getting 15-20 stars, so, we decided to write a detailed documentation to use it, after that, it got more attention from the community. It feels like the project has potential to grow, I want to utilise that by putting some effort into promotion.


I would love to hear feedback from dev community and also suggestions on how do I get this project to it's target audience, Please recommend some ways to promote it, your help will be highly appreciated.
LuckyFlow - The Basics
Tags: crystal, lucky, testing
Published: 2020-12-28 06:02:40

[LuckyFlow](https://github.com/luckyframework/lucky_flow) is the browser-based testing library for [Lucky](https://luckyframework.org/). It uses headless Chrome to test your web-app as close to actual users would as possible.

## Navigation

```crystal
# go to /users
visit Users::Index

# go to /users/:user_id with user credentials
visit Users::Show.with(current_user.id), as: current_user
```

## Finding Elements on Page

```crystal
# `el` supports normal CSS selectors
el(".class")
el("#id")
```

You can also select elements by passing in text. This is helpful when there are multiple elements with the same selector but they are distinguished by their text.

```crystal
el(".list-item", text: "Item 123")
```

Keep in mind that `el` is lazy so an error won't happen if you try to find an element that doesn't exist until you try to use the result.

### Note: `flow-id`

Beyond CSS selectors, LuckyFlow and `el` support a custom attribute called `flow-id`. This is to allow selecting elements to be more specific and less susceptible to test breakage.

```crystal
# notice the usage of `@` to reference a `flow-id`
el("@custom-flow-id")
```

## Clicking Links

There are two ways to click an element. You can select it using `el` or pass a CSS selector directly to `click`.

```crystal
el("@my-link").click
click("@my-link")
```

## Filling Out Forms

LuckyFlow provides a nice integration with [Avram](https://github.com/luckyframework/avram), Lucky's ORM, to make filling out forms easy.

```crystal
fill_form CreateUser,
  name: "John Doe",
  email: "john@example.com"
```

## Assertions

```crystal
# expect the element to be displayed on the page
el("@custom-flow-id).should be_on_page

# expect the current path to match
# self is weird here because I have been showing
# all the code as if it was inside a Flow
# (more about that in a future post)
self.should have_current_path(Users::Index)

el("@custom-flow-id).should have_text("Hello, world!")
```
 
In future posts, I want to go more in-depth on LuckyFlow and show how I use it to write clean specs.
How to format a memory in Windows FAT32 for Raspberry Octoprint
Tags: raspberrypi, fat32, octoprint
Published: 2020-12-28 05:57:02

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

If you have a 3D printer, probably you need a system for managment your printer easiest. I good option is Octoprint for raspberry if ypu now more information you could check the next page:
[Octorpint Page] (https://octoprint.org)
In this page you find the link for download and information about the project.

Requeriments for the project:
* Raspberry Pi(whatever version)
* Memory SD 8GB or more
* Windows computer
* [Octoprint (last version)] (https://octoprint.org/download/)
* [FAT32-GUI (guiformat)] (http://ridgecrop.co.uk/index.htm?guiformat.htm)
* [balenaEtcher] (https://www.balena.io/etcher/)

Ok... You have all to start the project.

1. Conect the memory in your computer and verify if you computer find the device.
2. When your computer identify the memory execute **guiformat.exe**
3. A windows will be displayed, select your device.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yt91syn7p91it6tbklem.png)
4. In this case I select in *Allocation unit size:* **32788** (depents the size of your memmory when you have a memory to size 64GB+ you need a similar program to format your memory in this format)
5. Put the name and press **Start**
6. Confirm the change and press **Close**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9sfqqz9xp5zofro36hgp.png)
7. Install and excecute **balenaEtcher**
8. Select **Flash from file**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vem0gp4hrux035skzy3g.png)
9. Search the file in your computer and select the image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jaxf9drwyrkunvhs9fe0.png)
10. Select the device
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yoan2sclgva10rezqqgl.png)
11. **Press Flash** and ready
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5lobvvdf1p2bq97j9qik.png)
12. Wait...
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vom1h69tao5mf3vkitpb.png)
13. And now! Check the memory en your Raspberry you can deployment in monitor and connect in the local network.
Create your own State Management solution in one line
Tags: webdev, javascript, tutorial
Published: 2020-12-28 05:33:37

---
title: Create your own State Management solution in one line
published: true
description: Create your own State Management solution in one line
tags: webdev, javascript, tutorial
//cover_image: https://direct_url_to_image.jpg
---

Not clickbait.

Create a file and name it **Store.js**. Put the following one line of code in it.
```javascript
// Store.js
export default {};
```

Now you can store any data you want and share it across your modules and components without polluting the global namespace.

###Example Usage
```javascript
// main.js
import Store from './Store.js';
import Settings from '../api/Settings.js';

async function init() {
  const response = await Settings.getAll();
  Store.SETTINGS = response.data; // store XHR response in Store module
}

// Module.js
import Store from './Store.js';

function getSetting(key) {
  return Store.SETTINGS[key]; // get a specific setting from the Store
}

// Task.js
import Store from './Store.js';

function loadTask(id) {
  Store.currentTaskId = id; // Store the current id in Store.js
}
```

###Extending the Store

How would extend this simple concept to add options for the following items?

1. Immutability
2. Persistence
3. Transformation