teleren/devto huggingface dataset:
Is it the end of var? Here’s a better solution known for years.
Tags: javascript, typescript, reactnative, var
Published: 2021-07-08 09:19:37

Var is a great thing. It served people well all across the world for years. But its time has passed. No one likes it anymore and now we all know it can even cause serious problems. Luckily there’s a better solution and it’s been a while since it was released (June 2015!). Why then do people still use var?

Ok, this is not about football, as some of you probably may think. Of course it’s about JavaScript. I’m a React Native developer, right? It has to be about JS.

Let me take you to the point.

Yep, a replacement for var is obviously let and const. How is it different from this var everyone hates now? 

###The scope
Scope of var is the whole body of the function it’s declared in. Not a tragedy. But when it’s declared outside of a function, the scope is global. Now this is bad news. It can lead you to some unexpected or even unpredictable stuff in your code.

Scope of let and const on the other hand is only a block. A block, means i.e. a function, but also if/else statement, for/while loops, switch/case statements and whatnot. Basically, it’s between the brackets {}. So this is much more reliable and much safer to use because it stays exactly where you declared it. It won’t go outside.

What’s more, const will make you sure the value of what you declared will not be changed in the future. How great is that?

###The end of var?
To be honest, I don’t even remember the last time I have used var instead of let or const. I’m not sure of statistics, but it’s also less and less seen in existing legacy projects I work on. Of course var has its use cases, but there aren’t many of them and still, we can do better than that.

###Joke’s over
Ok, I won’t say more here. There have been a ton of blog posts written since let and const were first introduced, this one is more like a social experiment. I hope you already forgave me the clickbaitish title!
Ups and Downs and reflecting on others' reflections.
Published: 2021-07-08 05:08:46

For the past two days, I've been paired with an awesome classmate on a really tough sprint. This sprint was all about utilizing and creating callback functions in Node. It turns out this is something that's just not intuitive for me, and even now, I feel like I only *kinda* get what's going on and how those callbacks really operate. It's taken a lot of energy to even get to where I am in my limited comprehension -- sifting through documents and our codebase, and watching a helpful solution video.

I've found it all really hard to parse.

Well, not my pair partner. While I'm tracing the callbacks and trying to mentally stitch together the function interactions, she's a step ahead, actually connecting those functions in the code editor. It's not like she was flying through it, but she was navigating the work adeptly.

Which was a bit of a surprise given our initial pair session meeting. She described feeling really behind on a recent sprint, like she was playing catch-up on the material the whole way. That was on material (React) that I felt some resistance on, but ultimately now feel pretty confident with.

Who was this person that struggles on thing A but rocks thing B, when I have it the other way around? How do I make sense of this situation?

It's an important question. A person's confidence in this program, and indeed with code in general, can wax and wane from sprint-to-sprint, hour-to-hour, function-to-function. Those slips in confidence are counter-productive, and I think illusory. You're no worse a programmer now than when you felt really good about your progress the day before. The highs are probably non-productive to some degree, too.

I think what I'm observing in my partner's and my own inverse experiences throughout recent work is that consistency is the goal. But it's really hard to achieve in something that you're new to. I think it's also that we're not just who we are right now, but who we've been over X time period. You might screw up, but that doesn't make you a screw-up. And you might do something great, but that doesn't make you great.

What I'm aiming for is to improve, yes, but also to improve my consistency. It's hard to separate the two, but I think they're distinct. Another way to frame it is: am I trending in the right direction?

I believe I am.
Chip-8 Emulator using JS
Tags: javascript, html, microcontroller
Published: 2021-07-08 09:00:32

Hi there 👋, my name is Puranjay
I created chip-8 emulator
The Chip-8 is a virtual machine from the mid-1970s designed to make game development easier. There are a number of classic video games ported to CHIP-8, such as Pong, Space Invaders, Tetris, and Pac-Man. There are also applications like a random maze generator and Conway’s Game of Life.

I created new classes in JavaScript for each piece of hardware, to emulate the memory, the display, the sound card, and the keyboard, after that, I jumped into the so expect Chip-8, I first implemented its registers and then I implement each of its 35 opcodes.

This project uses a lot Javascript and OOPS concepts
It was a fun project to combine my knowledge of Microcontrollers and Web-Development. Plus I never ever implemented my own ROM and emulator . So I learnt a lot from this project about XOR / OR / AND implementations in a ROM.

Visit my github page to view the files
If you want me to make a tutorial on how I created this in detail.
Then please let me know in the comments section 

Skills: JAVACRIPT / HTML / Microcontroller Architecture

🔭 I’m currently working on Making my Personal Website Scalable And using Microservices Architecture
🌱 I’m currently learning Assembly / C / SQL / Python
👯 I’m looking to collaborate on Node.js / React.js / MERN / MongoDB
💬 Ask me about Node.js / OpenSource Projects / Javascript / GSAP / WebGL / Three.js / React
📫 How to reach me: work.puranjay@gmail.com
⚡ Fun fact: Working on Atari game project using Assembly
5 Best VS Code Extensions As a Web Dev
Published: 2021-07-08 08:46:51

Today I will show my personal favourite and best Visual Studio code extensions as a web dev.


##1. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
######*by Ritwick Dey*
This is the VS Code extension I use the most. It can open a HTML file in the browser and it automatically reloads. But what's the best, that it creates a server, so you can do PHP, import libraries in JavaScript and more.
##2. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
######*by Prettier*
Prettier is just a code formatter for JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less HTML, Vue, Angular, GraphQL, Markdown and YAML.
##3. [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
######*by CoenraadS*
This extension colorizes every bracket pair (as the name says).
##4. [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
Live Sass Compiler compiles/transpiles your SASS/SCSS to CSS with live browser reload.
######*by Ritwick Dey*
##5. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
It renames a pair of tags with multicursor.
######*by Jun Han*

These were my personal 5 best Visual Studio Code Extensions. And sorry for the bad writing skills, but this is my first post! :P
Introduction to Dockerize series
Tags: docker, react, go, node
Published: 2021-07-08 08:44:04

## Introduction

Hey, welcome to the Dockerize series. Here, I will be discussing how to use docker with your applications during both development and production.

We'll also use techniques like Builder pattern, multi stage builds to optimize our production builds.


This will serve as in introduction to upcoming articles where we'll dockerize our React, Node, Go applications!

## Docker...What and Why?


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

Docker is a software platform for building applications based on containers, which are small and lightweight execution environments.

It also helps to eliminate environment specific issues since you can replicate your production environment locally, which provides consistency across our teams.

## Docker compose

![docker compose](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dggbomqzi96semopyqj7.jpeg)

Compose is a tool for defining and running multi-container Docker applications. With Compose, you use a YAML file to configure your application's services. Then, with a single command, you create and start all the containers from your configuration.

_Note: It's is not advised to use `docker-compose` to run your application in production environment. Use a container orchestration tools like [Kubernetes](https://kubernetes.io/), [Openshift](https://www.openshift.com/), [AWS ECS](https://aws.amazon.com/ecs/) etc._

## Builder pattern 

In Builder pattern we use a docker image (which usually contains the whole runtime) to create small build artifacts and then use those binaries/artifacts in another smaller image hence reducing size of our built image.

Let's take Node images for example, They're usually upwards of `850mb` in general (some slim variants are bit smaller) as they contain the full runtime and other things which might not be useful to us in production. So we can use builder pattern to do the following:

- Derive from a Node base image with the whole runtime/SDK
- Copy your source code
- Install dependencies
- Produce build artifact/bundle (usually done with bundlers like [webpack](https://webpack.js.org/), [parcel](https://parceljs.org/)) etc
- Use the built artifacts in a much smaller images like [Alpine](https://hub.docker.com/_/alpine/)
- Push the small image to a repository of your choice like [AWS ECS](https://aws.amazon.com/ecr/), [Dockerhub](https://hub.docker.com/) etc.

## Multi stage builds

Multi-stage builds makes it easier to use the builder pattern without hassle of creating multiple files, copying builds to host system and other things we had to do to implement builder pattern. More info [here](https://docs.docker.com/develop/develop-images/multistage-build/)

![multistage-builds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr60sw1164d4eye8lew7.png)

_I go over builder pattern and multistage builds in this article_

{% link https://dev.to/karanpratapsingh/art-of-building-small-containers-3g6c %}

We're good to go! See you in the next part!
Laravel 8 Image Resize And Upload
Tags: image
Published: 2021-07-08 08:25:05

##Laravel 8 Image Resize And Upload Example

In this post we will give you Laravel 8 Image Resize And Upload Example, hear for Laravel 8 Image Resize And Upload Example we will give you details about it.

Read more : https://www.onlinecode.org/codeigniter-4-tcpdf-integration-create-pdf-page/

The intervention package is provided by Laravel. so we can easily create resize an image to thumbnail in Laravel. let’s follow the below steps to resize an image in Laravel 8.

Read more : https://www.onlinecode.org/codeigniter-4-tcpdf-integration-create-pdf-page/

we are going on how to resize an image to thumbnail in Laravel 8. so here we are using the intervention package for resizing images.

Read more : https://www.onlinecode.org/codeigniter-4-tcpdf-integration-create-pdf-page/

Step 1: Install Laravel
Step 2: Setting Database Configuration
Step 3: Create Table using migration
Step 4: Install Package
Step 5: Add providers and aliases
Step 6: Create Route
Step 7: Create a Model and Controller
Step 8: Create Blade Files
Step 9: Run The Application

Read more : https://www.onlinecode.org/codeigniter-4-tcpdf-integration-create-pdf-page/
AWS EBS root volume expansion
Tags: aws, linux
Published: 2021-07-08 08:23:00

** 
Modify Volume 
**																								
EC2 > Volumes > Actions > Select Volume  > Modify Volume																								
																									
It can be changed while EC2 Instance is running.																							
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q08varkppzyzoagboj2p.png)
  																									
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t4cne77ztm6h7wyrfdx.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zr83k8uih12cvpuh3yg9.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnohaxn1mzom51pvog5n.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh6uwu1sx68pwz3jdpx8.png)
																									
・Restriction																									
																								
Once changed, it cannot be changed for 6 hours.																								
																									
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsbn1p1wuedf4eal3v85.png)
 																								
**Command**																									
```
	df -h																								
	lsblk																								
	sudo growpart /dev/xvda 1																								
	lsblk																								
	sudo xfs_growfs /dev/xvda1						For Linux 1 AMI: resize2fs /dev/xvda1																		
	df -h	
NVME
	sudo growpart /dev/nvme0n1 1
        xfs_growfs /dev/nvme0n1p1																						
```																									
																									
・EC2 Instance (Command)																									
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1dm56vnkduwgk4ay8xl.png)
 																									
Ref https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html
The one about the button - WEEK 9
Tags: codenewbie, beginners, javascript, html
Published: 2021-07-08 08:12:18

I can now say that I am 100% fully comfortable with NOT being uncomfortable.

Seems like the common trend on the Northcoders bootcamp is to expose to you different ways of doing the same god damn thing. Of course, for the obvious reasons.  

First sprint of the week was to create a mini-app using the DOM to extract the information. I proudly, and wholeheartedly admit that the outcome of a two day sprint was a bloody button. Needless to say, there was a lot going on behind the scenes and lot of trial and error implementing other features, but the final output was this beautiful button. It was, in fact, a very good button. 

Later in the week, we created a matching cards game and had a shot at form validation using RegEx. I still hate RegEx.

React was the meal deal of the week. Kicking off with a 'pizza parlour' app. Since I am a master at creating buttons now, this app had maybe one to many. It was fun though, creating add pizza buttons, delete pizza buttons, clear basket buttons, add to order buttons. Buttons, buttons, buttons.
Setting up rust
Tags: rust, systems
Published: 2021-07-08 08:07:35

## Rust
A short description of rust from wikipedia:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buoud4h6afg6bthxyllz.png)

Rust can be used for a variety of applications like networking, game dev, or anything else, on the web (using webassembly), embedded systems, etc.

## Setting it up (Unix-like OSes)
 Installing rust is *very easy*. It uses toolchain management tool called `rustup`.

Just run this command to install rust:
```zsh
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
After following the setups it provides, it most likely added rust in your `PATH` environment variable. Refresh the current terminal environment, and run `rustc --version`, if it fails, then try adding `~/.cargo/bin` to your path manually.

## Keeping Rust updated
Just run `rustup update` once in a while to be up to date.

## More information to get started with rust
[Getting started with rust](https://www.rust-lang.org/learn/get-started)
A Patreon like website for developers
Tags: fan, developers, patreon
Published: 2021-07-08 08:05:32

##Kunming.io is a membership platform that enables creators to be paid by their fans.##

![Screen Shot 2021-07-12 at 6.06.03 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzpdtmgx7xb7kgx8hwyj.png)
 

July 1, 2021  G9MD launched [Kunming.io](https://kunming.io). Co-Founders, Justin Anderson, Xiaoduo Wang and Asif Thebepotra, found  a solution to developers community problem: millions of people loved how developers answer issues and fix bugs during developing, even people like this way to find what solutions they need. but for developers for what they are doing, they deserve more, And this way does not make sense, They deserve more than just a "Thank You", They should be paid for what they are doing to fix so many things on programming languages development. So we tried to find a new way to fix this problem and that's why kunming.io online and try to serve developers, creators and more for what they are doing, they should be paid for.

{% youtube 5V7irMacGkg %}

###Kunming.io Features###
Fans support creators/developers subscription system
Users be able to set the monthly subscription price
Users can set tip price
Beautiful user account dashboard with statistics and balance
Completely codes playground with popular program languanges
Support Photos, Videos/Audios, Zip and Codes Share on Activity Feeds with Free and Paid
Notifications in Real-time
Be able to Copy & Paste a single post directly
Online/Offline User Status
Google reCAPTCHA Protection
Edit User Page/Profile 
Account Verification By Uploading ID or Passport
Display Verified Users Badge
Create unlimited Posts Free and Premium
Support Creators Change Name, Username & Password
Posts Management By Creator/Owner
Multiple Categories
Profile Picture
Page/Profile Cover
Email Verification
Users can like or manke comment in posts
Complete Payment Solutions
And... many more features wating for you to come and check them out yourself.
Make cross-browser testing hassle-free with Comparium
Published: 2021-07-08 07:52:24

One of the biggest problems faced by website developers is the lack of cross-browser compatibility, especially different browser version testing. Cross-browser compatibility is usually understood as the ability of a site to be display equally well, regardless of the browser in which the user is viewing the pages. For testing, you can use online service, like Comparium.

This is a multifunctional service using which you do not have to search and install [old version of Chrome](https://comparium.app/blog/old-browsers-emulator/old-chrome-versions/), since you can access any version in a matter of minutes and check your site for compliance in combination with different operating systems.
UiPath Survey - Packt
Published: 2021-07-08 07:50:53

UiPath has been leading the Robotic Process Automation industry over the years now and has brought many changes in the way the digital workforce has been driving the transformation. UiPath has given many proven results for the businesses and scaled up their automation initiatives to achieve quick results and improved business outcomes.

We at Packt are actively looking to seek your views to develop community-driven learning resources to enhance user knowledge and would like to know more about how you see UiPath fitting into your work and strategy. This short survey would help us gain insights into the current state of UiPath and the key challenges you face while working with UiPath, hereby allowing us to serve your unmet needs better.

Please find the link to the survey below, should take you about 5 mins to fill this out.

https://forms.office.com/r/JguiXh0erZ
Simplify condition rendering in React.js

Tags: react, javascript, webdev, showdev
Published: 2021-07-08 07:43:03

As a professional developer you are forced to stay up to date with the latest trends in technology. This year I've added Svelte to my bucket list as a new framework to learn.
While researching Svelte I was surprised by the way they handle condition rendering.
Take a look at this example found in their docs:

```javascript
    {#if user.loggedIn}
      <button on:click={toggle}>
	    Log out
      </button>
    {/if}
```
Everything is neatly wrapped with if clause and separated from normal flow.

After a quick prototyping I present to you the most powerful component I have ever written, an IF component.

```javascript
   const IF = ({ condition, children }) => {
     if (!condition) return null;
     return <>{children}</>;
   };
```

By offloading condition into a separate component this will improve code cleanness and readability by quite a margin (for free).

Let’s imagine the Svelte example in our React app. It would go something like this:

```javascript
…
return (
    <>
      {user.loggedIn && <button>Log out</button>}
    </>
  );
...
```
This is not an end of the world issue when you have just one condition but as our apps grow, so do the conditions. 

Take a look at the same component now refactored to use IF:

```javascript
…
return (
    <IF condition={user.loggedIn}>
      <button>Log out</button>
    </IF>
  );
...

```

Now it’s easier to track down conditions and debug faulty ones, plus the code looks way cleaner now that conditions are gone from JSX. 


Hope you found this helpful :heart:
Undash-Javascript utility Library
Tags: javascript, opensource, node, contributorswanted
Published: 2021-07-08 07:26:24

I have created a JS library that is similar to that of underscoreJS and Lodash with extra functionalities. Feel free to use/test/contribute to my project. I could use some help with a contributor.
Code: https://github.com/abhilashSreenivasa/undash
Sanitize Facebook Feed - OnlyFriends
Published: 2021-07-08 06:51:57

---
title: Sanitize Facebook Feed - OnlyFriends
published: true
description: Sanitize your facebook feed by removing liked and followed pages from your account. You will see more posts from your real friends.
tags: 
//cover_image: https://direct_url_to_image.jpg
---

This small script will unfollow and unlike all pages from your facebook account. It'll bring sanity to your endless feed by including more posts from your real friends.

```
/**
* Unlike/unfollow pages in facebook.
* Open https://www.facebook.com/pages/?category=liked and scroll down till all liked/followed pages loads.
* Once all pages loads, copy paste this code in console and wait till all pages unliked/unfollowed (Use Google Chrome).
*/

var pages_followed = document.querySelectorAll('[aria-label="Following"]');
var pages_liked = document.querySelectorAll('[aria-label="Liked"]');

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function remove(pages) {
    for (let i=0; i < pages.length; i++) {
        try {
            let page = pages[i];
            page.click();
            console.log(`Page ${i+1} removed`);
        } catch {
            console.error(`Page ${i+1} remove failed`);
        } finally {
            await sleep(1000);
        }
    }
}

await remove(pages_liked);
await remove(pages_followed);
```
How to Install Tor Browser in Kali Linux
Tags: linux, tutorial, programming, javascript
Published: 2021-07-08 06:16:12

Kali Linux is a security distribution of Linux derived from Debian and specifically designed for computer forensics and advanced penetration testing. 

It was developed through rewriting of BackTrack by Mati Aharoni and Devon Kearns of Offensive Security. 

The Tor Browser is a web browser that anonymizes your web traffic using the Tor network, making it easy to protect your identity online. 

Here is my YouTube video that will guide you on how to install Tor in your Kali Linux

{% youtube KgcDGIE1euw %}