teleren/devto huggingface dataset:
WTF JavaScript: A Variable with Side Effects
Tags: javascript, beginners, node, webdev
Published: 2022-01-16 22:38:12


JavaScript has many quirks and difficult-to-understand behaviors. There are hilarious talks such as [WTFJS](https://www.youtube.com/watch?v=et8xNAc2ic8) and [WAT](https://www.destroyallsoftware.com/talks/wat) that make fun of JavaScript for its strangeness.

Since I work on refactorings, I have to consider many weird and sometimes funny sides of JavaScript. I will share some of the surprising behaviors that I encounter, so if you see them (which you hopefully never will), it might hint at what's going on.

This blog post explores an innocent-looking statement:

```javascript
// ... some code

helloWorld;
```

You might intuitively think that nothing should happen here - the statement seems to do nothing because there is no obvious function call here.

However, it can do anything, for example, print "Hello World!" to the console.
```javascript
// ... some code

helloWorld;           // prints "Hello World!"
```

**How can this even be possible?**

It turns out that global variables (in this case, `helloWorld`) are properties of the [global object](https://developer.mozilla.org/en-US/docs/Glossary/Global_object). And properties in JavaScript do not have to be simple values. They can be implemented using [getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) and [setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set), which can execute code. Since the global object inherits from `Object.prototype` in modern JavaScript engines, adding properties to `Object.prototype` creates properties on the global object.

Here, `helloWorld` is defined as such a getter:

```javascript
Object.defineProperty(Object.prototype, 'helloWorld', {
  get() { console.log("Hello World!"); },
});

helloWorld;           // prints "Hello World!"
```

Thankfully this can only happen with global variables, and not with parameters or local variables.

```javascript
Object.defineProperty(Object.prototype, 'helloWorld', {
  get() { console.log("Hello World!"); },
});

const a = helloWorld; // getter is evaluated, prints "Hello World!"
a;                    // does nothing
```

I learned about this strange behavior in a [blog post about the `globalThis` polyfill](https://mathiasbynens.be/notes/globalthis). In the polyfill, a global property getter is used to access the global `this` object in different environments such as browsers, web workers, frames, Node.js, and ES modules. Have a look if you want to know more!
APIs in a simple way Explained.
Tags: tutorial, database, 100daysofcode, api
Published: 2022-01-16 22:25:30

Follow me on Instagram to see more posts like this : @abbes.dev
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2xsrdtxche739uds7sz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osy5b3nrtb2m1lujtuvn.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8cvgym8j8xmlhzi4p5r.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c41m0hmgwyejramhdnye.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmw793rcn9ecbusz3hw8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zp26fan9ida9gwh3kkk.png)
New frameworks, old traditions
Tags: javascript, webdev, programming, watercooler
Published: 2022-01-16 22:09:31

Do you know of the [red car syndrome](https://en.wikipedia.org/wiki/Frequency_illusion)?

When we learn and start using a new language, or especially a framework, we tend to see how some people do something.

But my point is not that after start learning something you start seeing everywhere and all the people using it... but that people will follow “tradition” blindly. In Python, the community has the saying of something being the “pythonic way”.

Yes, you should embrace “tradition” and make things simpler for everyone... except when you don’t.

Many React developers out there will start a project and add Redux (or MobX, or Recoil... ) without even thinking if the project will even need it.

And after they do that, since it’s already there it’s easy to just “go with the motion” and just make things in a way to use Redux.

---

> There’s this story that you might have heard, it’s about someone trying to learn the family recipe of baking fish and that “you have to cut the tail to make it good” and then they would go from parent to grandparent to ask why you have to make the cut only to be told that it’s “how it’s always been done to make it good”, and finally the great grandparent will say that the oven was too small back in the day and they had to cut it to fit...
> 

---

And as history repeats itself, if you found anything I’m saying eerie familiar, then yes, more than 10 years ago Uncle Bob wrote that developers would start a project with a database because “you always needed a database right?”.

Redux is just one of the latest... moment.js, Lodash, jQuery... remember then?

Remember that the problem is not if you are or not using then, but WHY are you using it.
Just because? Or it’s the best tool for the job?

---

Cover Photo by [Mohit Tomar](https://unsplash.com/@mohittzomar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/tradition?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Ai generated code comments
Tags: javascript, codequality, programming, productivity
Published: 2022-01-16 22:04:37

![Demo of Readable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc7ckg3mowh17z5t152n.gif)
 
I wanted to share a vscode extension which has recently been released called Readable. It's like autocomplete, but for entire comments.

Curious as to what you guys think of this. Will you end up using it?
Big Collection of free resources for product developer and designers 
Tags: react, reactnative, javascript, webdev
Published: 2022-01-16 21:42:14

## DevAssist

One of the best website found in 2022, where you will get all the free resources for you project development.

100+ best website collection at one place.

No need to google every-time just bookmark this one website.

https://www.devassist.in/
Laradock - ready to use PHP docker environment
Tags: docker, php, webdev, programming
Published: 2022-01-16 21:38:30

Laradock is a full PHP development environment for Docker. It contains a variety of popular services such as PostgreSQL, MySQL, Redis, MongoDB, PHPmyAdmin, and so on.

Let's setup empty Symfony project with a PostgreSQL database to see how it works:

####First clone project from GitHub repository: 

`git clone https://github.com/Laradock/laradock.git`

####Next enter the laradock directory and rename `.env.example` to `.env`:

`cp .env.example .env`

####Let's look at the basic settings in the `.env` file

`APP_CODE_PATH_HOST` - here you can specify the location of the directory with your project

`PHP_VERSION` - with this setting you can set up a version of PHP, unfortunately at the time of writing this article the newest available version in laradock is 8.0

I set up the location on my project to `../app` and PHP version to 8.0.

####Now we can start containers

To do so type: `docker-compose up -d nginx postgres` - this command will create Nginx and Postgres container. First start-up may take a while but next ones should be quick.

---

_If you get an error that the address is already in use just change the port in the blocking service. For example to change the port of Nginx change value of `NGINX_HOST_HTTP_PORT` variable in the `.env` file._

---

_Nginx and PostgreSQL are two of many services available in laradock. Full list of services you can check on the project <a href="https://laradock.io">page</a>_

---

####Set up our Symfony project
We need to get into Docker container by typing:
 `docker exec -it laradock_workspace_1 sh`
When we are in a container we can use composer to install Symfony:
`composer create-project symfony/skeleton .` 

After this, we can visit `localhost` in our browser to see the standard Symfony 404 page.


![Symfony 404 page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpntgm9qw3glwf5uqbdl.png)


####Setting up PostgreSQL:

In workspace container execute another command: 

`composer require symfony/orm-pack`

and then configure a database connection in Symfony `.env`, all needed configuration data we can find in laradock `.env`. The default ones look like this:

```
POSTGRES_VERSION=alpine
POSTGRES_DB=default
POSTGRES_USER=default
POSTGRES_PASSWORD=secret
POSTGRES_PORT=5432
POSTGRES_ENTRYPOINT_INITDB=./postgres/docker-entrypoint-initdb.d
```

But what's the host?

Host is simply a service name, so in our case it is `postgres`

Whole connection configuration variable in symfony `.env` looks like this:

`DATABASE_URL="postgresql://default:secret@postgres:5432/default?serverVersion=13&charset=utf8"`


And that's it, we've set up docker environment with nginx and postgreSQL. Now go and write some code!!!
Lab 1 Posting
Published: 2022-01-16 21:18:20

We need to download nodeJS, npm, open-wc, VSCode, lit?

## NodeJS

####Definition
NodeJS is a service-side platform on JavaScript to build network applications.

####Download
Google NodeJS and found its website. 

####Function
- It can add, delete and modify data on my database
- It can create, open, read, write, delete, and close files on the server

####Advantages
- It's free
- It runs on different platforms (Windows, Mac, Linux, ect)
- It's fast because it has [non-blocking I/O model](https://www.codementor.io/@theresamostert/understanding-non-blocking-i-o-in-javascript-cvmg1hp6l)
- Same code base between server and client
- It requires [less time and effort](https://nodejs.org/static/documents/2016-survey-report.pdf) to learn and work with Node.js

[Link to the nodeJS website](https://nodejs.org/en/download/)

[Video about what is nodeJS](https://www.youtube.com/watch?v=8u1o-OmOeGQ&t=14s)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1xejzrafk8xxfpjk2p2.png)
 
## npm (node package manager)
####Definition
1. It's an [online platform](https://www.npmjs.com/about) helping JavaScript developers easily share packaged modules of code (The company is acquired by [GitHub](https://github.com) in 2020)
2. It's also a [command-line tool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcfdw9vktz8zk7kd935d.png) interact with repository.
   

####Download
It's automatically downloaded with NodeJS.

####Function
- package installation
- version management
- dependency management

####Advantages
- It has local package installation which helps save on space
- It helps reduce the development time
- It provides [package-lock.json](https://www.mariokandut.com/what-is-package-lock-json/#:~:text=TL%3BDR%201%20package-lock.json%20is%20a%20snapshot%20of%20the,control%20to%20ensure%20the%20same%20dependencies%20on%20install.)


[Link to install and test NodeJS, npm] (https://phoenixnap.com/kb/install-node-js-npm-on-windows)

[Video about what is npm](https://www.youtube.com/watch?v=ZNbFagCBlwo&t=2s)

##open wc file

####Download 
type code _npm init @open-wc_

[Link to instruction on opem-wc](https://open-wc.org/guides/developing-components/getting-started/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufxwk261x82g7fve3zwy.png)
 
run the code:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4y1ikwbmqhjayh90675.png)
Programming Languages as Tools
Tags: programming, discuss
Published: 2022-01-16 21:14:15

Tools are an exceptionally useful invention. Hammers allow us to do things with our hands we'd never be able to usually. Erasers exist for fixing mistakes. Programming languages, for the countless that exist, are tools to help us to solve a problem but do not solve problem themselves. We are the ones that solve the problems - it is important to understand this, as it allows us to focus on the problem itself that we are fixing, not on the solution in our chosen language. 

When we use a hammer to nail something together when making a bed, the problem isn't that we _need_ to drive this specific nail through this specific joint. The goal is to join together two pieces of wood to create a frame. A hammer, and a nail, is the tool that we are using for the job, but there are others. We could use woodworking joints, we could use glue, straps. Anything. We may even realise that we don't even need to join together these two specific pieces of wood. 

The same idea goes for programming languages and other programming tools. 

Programming tools allow us to take shortcuts in the process of development, but it is important to take the time to understand the underlying processes that are occuring, the changes we are making, the files we are affecting etc. Similarly, every single day we use these tools built upon the knowledge, labour, and millions of collective (wo)man hours of programmers mostly without knowing it to even solve simple problems, like googling your own problems, logging into a server, or running a program.

Programming languages are just tools which are defined at a certain level of abstraction with a specific syntax to allow us to flip bits (This is a gross reductionism). The goal of a language is to flip bits. The goal of _using_ a language is to solve a problem. Each languages has it's own advantages and disadvantages which make them more, or less, appropriate in a given situation. Our goal as programmers isn't necessarily to write code. Our goal is to solve problems (or even better, [eliminate them](https://kentcdodds.com/blog/don-t-solve-problems-eliminate-them)), using the skills, resources (both human and technological), and knowledge that we have at our disposal.
Retrospective 2021: What have I posted, gained, and learned from Medium this year?
Tags: bigdata, career, datascience, database
Published: 2022-01-16 19:37:46

In this 2021 I posted about database, integration solutions, bigdata, DataOps, DataScience, this post brings together all that and more:

  https://jlgjosue.medium.com/retrospective-2021-what-have-i-posted-gained-and-learned-from-medium-this-year-ef346e4aeaee
Block Countries and Continent : Apache2
Tags: aws, devops, security, tutorial
Published: 2022-01-16 19:11:00




**install module** 

sudo apt install libapache2-mod-geoip

**enable module** 

sudo a2enmod geoip

**Method 1 – Server Wide Configuration**

sudo nano /etc/apache2/mods-available/geoip.conf

**edit conf**

```
<IfModule mod_geoip.c>
  GeoIPEnable On
  GeoIPDBFile /usr/share/GeoIP/GeoIP.dat
</IfModule>
```

**Method 2 – Virtual Host Configuration**

sudo nano /etc/apache2/sites-available/virtualhost.conf

Add the following below the **ServerAlias** directive.

```
GeoIPEnable On
GeoIPDBFile /usr/share/GeoIP/GeoIP.dat
GeoIPScanProxyHeaders On
```

## **Manage Restrictions**

### **Block Certain Countries**

Create or open the .htaccess file which is inside your web root directory and add the following snippet to block countries.

```
SetEnvIf GEOIP_COUNTRY_CODE UA BlockCountry
SetEnvIf GEOIP_COUNTRY_CODE VN BlockCountry
Deny from env=BlockCountry
```

The above configuration will block requests from the above 2 countries. You can include as per your wish.

### **Allow Certain Countries**

Create or open the .htaccess file which is inside your web root directory and add the following snippet to allow countries.

```
SetEnvIf GEOIP_COUNTRY_CODE US AllowCountry
SetEnvIf GEOIP_COUNTRY_CODE CA AllowCountry
Deny from all

Allow from env=AllowCountry
```

### **Blocking a client based on country**

This example show you how to block clients based on the country code that GeoIP sets.

```bash
GeoIPEnable On
GeoIPDBFile /path/to/GeoIP.dat

SetEnvIf GEOIP_COUNTRY_CODE CN BlockCountry
SetEnvIf GEOIP_COUNTRY_CODE RU BlockCountry
# ... place more countries here

Deny from env=BlockCountry
```

### **Allowing clients based on country**

This example show you how to allow only clients from specific countries.

```bash
GeoIPEnable On
GeoIPDBFile /path/to/GeoIP.dat

SetEnvIf GEOIP_COUNTRY_CODE US AllowCountry
SetEnvIf GEOIP_COUNTRY_CODE CA AllowCountry
SetEnvIf GEOIP_COUNTRY_CODE MX AllowCountry
# ... place more countries here

Deny from all
Allow from env=AllowCountry
```

GeoIP options

```
GEOIP_ADDR
GEOIP_CONTINENT_CODE
GEOIP_COUNTRY_CODE
GEOIP_COUNTRY_NAME
GEOIP_REGION
GEOIP_REGION_NAME
GEOIP_CITY
```
Thirty Days of Rust: Day Five
Tags: challenge, rust, webassembly, programming
Published: 2022-01-16 19:09:15

Today I wanted to take it easy a little bit and try some WebAssembly with Rust. Over the years I've gotten very used to JavaScript, but now that I'm doing this challenge, I wanted to dip my feet into WebAssembly, so that's exactly what I did. I found a [book](https://rustwasm.github.io/book/introduction.html) that basically told me everything I needed to know, and then I got started. 
### Rust Setup
So instead of a new Rust app, I needed to make a Rust lib, which I could do with:
```bash
$ cargo new day5 --lib
```
Then I added two things to my `Cargo.toml` so it looked like this:
```toml
[package]
name = "day5"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
wasm-bindgen = "0.2.78"
```
Then I went ahead and installed `wasm-pack` with cargo:
```bash
$ cargo install wasm-pack
```
### Rust Code
The only thing I wanted this app to do was add two numbers together. It's probably too simple for this challenge to really mean anything, but I didn't want to spend too much time on this because tomorrow I want to rebuild my hangman game in the browser and I figured today could be a little bit shorter.
```rust
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(n1: i32, n2: i32) -> i32 {
    return n1 + n2;
}
```
So that was simple, as I expected and now I just had to pack it together with:
```bash
$ wasm-pack build
```
### JS Setup
```bash
$ pnpm init wasm-app www
$ cd www
$ pnpm i
```
That's all, now I just imported the wasm file and console logged the result of the add function:
```javascript
import * as wasm from "../pkg";

console.log(wasm.add(21, 19));
```
Now I could just run `pnpm serve` and open up `localhost:8080` to get to my app. When I opened up the console, it showed the logged value of 40.
That's about it from me today, but I look forward to tomorrow and sorry if this one was a little less exciting.
Learn React JS the easy way
Tags: react, javascript, beginners, programming
Published: 2022-01-16 18:55:03


<p>Learn React by starting the development in three steps</p>


<ol><li>Set up project files</li><li>Create first component</li><li>Render your first component</li></ol>


<p>I have also demonstrated the concept of props in this video.</p>

👉 Link: https://10code.dev/learn-react-the-easy-way/get-started-in-react/
Nvm #Node #install #version #Linux
Tags: node
Published: 2022-01-16 18:40:14

**_CONTRALAREMOS EL USO DE LAS VERSIONES DE NODE QUE DESEES USAR EN TU PROYECTO._**

_Empezamos con el siguiente comando para poder  posteriormente realizar la instalacion de **NVM**_ :

```
curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh -o install_nvm.sh
```

INSTALAMOS EL **NVM**:

```
bash install_nvm.sh
```
PODEMOS YA ABRIR UNA NUEVA CONSOLA O SIMPLEMENTE APLICAMOS ESTO:

```
source ~/.profile
```
AHORA SI PUEDES USAR NVM, puedes instalar versiones de node y usar la que desees.

```
nvm install 12.12.0
```
LUEGO PARA QUE NODE USE UNA VERSION CON NVM LE INDICAMOS:

```
nvm use 12.12.0
```
Y REVISAMOS QUE ESTAMOS USANDO ESA VERSION EN NODE.

```
node -v
```
LISTO!
Habits to build

Tags: productivity, codenewbie
Published: 2022-01-16 18:32:41

The topic of habits is mentioned in almost every self-help book. And it is no wonder why. If I look back at what helped me last year it was just a few habits that had a tremendous impact on me. And the same seems to be true for my work as a developer. 

## Note-taking 
For me, note-taking was an ad hoc thing that was painful, but over time I managed to get better at it and even be able to have a system. The more projects, places to do things, and how to you will have the more you appreciate good note-taking systems. You will stop to ask your colleagues for that link to documentation and googling how to connect to that strange DB your backend is using, you just open your notes and there it will be.
I use zettelkatsen combined with a second brain system but there are endless options. 

## Commit clean up 
Before each commit, I go through the diff, file after file, and fix all the small issues I found. Forgotten console.logs, commented code you name it I take care of this mess before it will go public. Doing this allows your coworkers to focus on important things during the code review, instead of focusing on where you left commented code. 

## Reading 
We work in an ever-changing environment, with new frameworks, libraries, languages... Regular reading will allow you to have an overview of the emerging technologies. Pick a few quality sources (Twitter accounts, newsletters...) and regularly check them. But have in mind that you do not need to learn everything you will read about.

## Overcoming Resistance
Resistance is a concept from Steven Pressfield and his book war of art. For me regularly reminding myself that the reason why I want to "just check Twitter before I start to code that functionality" is just because I do not want to fight the resistance. 

## Automate
You will break all your habits. Even the most bake in. So why not automate them? Running test before commit? Automate it, linting your code? The same. We have tools for all of this so take advantage of them and make your life easier. 

## Conclusion
Those are the most important habits that help me with my work. There is nothing magical about them and building them hurts, but working without them would hurt me much more.

If you like this article follow me here or on twitter https://twitter.com/rejmank1. Thanks!
Telescope.
Tags: opensource, javascript, github
Published: 2022-01-16 18:24:51

## Introduction 

`People say the best speech starts with a joke;  therefore best article begins with a "promise." `

After reading this article, you will know :
>  - what is Telescope?
>  - what is my role in this project?
>  - what I'm planning to achieve as a team member of Telescope?
>  - what will be my contribution to making Telescope better?

##### What is Telescope?
The Telescope is an open-source web server and client application for aggregating and presenting a timeline of Seneca's open-source blogs. The Telescope makes it easy to see what's happening with open source at Seneca right now.

##### What is my role in this project?
As a project management team member, I'm one of the twenty-four students participating in the Telescope project.

##### What I'm planning to achieve as a team member of Telescope?
I'm excited to become a part of the vast open source project to fix bugs, improve docs, manage the flow of issues, pull requests and, of course, add new features.

##### What will be my contribution to making Telescope better?
I'm was interested in making enhancements regarding telescope cloud migration. Still, as I already have a project with cloud-based technology, I'm thinking of getting along with React Native team, GitHub Data Integration or developing dashboards.

## Conclusion

This is my first blog post for 2022, and I'm back in open source development. I had a great holiday and can't wait to start working. 

Also, I decided to change the blogging platform and leave Medium because it limits the audience by a paywall.

I'm planning to change my blog platform in future one more time, but for now, let focus on the quality of posts. 

I'm glad you read this and suggest you come back and bring your friends to read my future articles regarding my contribution to open source and Telescope.

> ⚠️ Repo for future first work: [here](https://github.com/Seneca-CDOT/telescope/issues/2648#event-5887895408)

## Links

> 🖇 git https://github.com/aserputov
> 🖇 twitter https://twitter.com/aserputov\

_p.s This post was made for my OSD class Lab 1 assignment_