teleren/devto huggingface dataset:
Clean JavaScript Code
Published: 2021-02-02 10:20:29

We all just code but do not know how to arrange our work and components so that even the non-programmers can understand our work this is what is called 'clean code.'
Ways of writing clean JavaScript Code:
Variables
1.Use meaningful and pronounceable variable names
2.Use the same vocabulary for the same type of variable
3.Don't add unneeded context
4.Use explanatory variables
Functions
One should limit the number of functions in order to make testing easier. One should not use more than three parameters.
1.Functions should do one thing. When functions do more than one thing, they are harder to compose, test, and reason about.
2.Function names should say what they do
3.Remove duplicate code. Duplicate code is bad because it means that there's more than one place to alter something if you need to change some logic.
4.Don't write to global functions
Polluting global is a bad practice in JavaScript because you could clash with another library and the user of your API would be none-the-wiser until they get an exception in production.
5.Encapsulate conditionals
6.Avoid negative conditionals

Objects and Data Structures
1.Use getters and setters
Using getters and setters to access data on objects could be better than simply looking for a property on an object.
Makes adding validation simple when doing a set.
Encapsulates the internal representation.
Easy to add logging and error handling when getting and setting. 

Dependency Inversion Principle (DIP)
This principle states two essential things:
High-level modules should not depend on low-level modules. Both should depend on abstractions.
Abstractions should not depend upon details. Details should depend on abstractions.
Don't ignore caught errors
Doing nothing with a caught error doesn't give you the ability to ever fix or react to said error. Logging the error to the console (console.log) isn't much better as often times it can get lost in a sea of things printed to the console. If you wrap any bit of code in a try/catch it means you think an error may occur there and therefore you should have a plan, or create a code path, for when it occurs.

Comments
Only comment things that have business logic complexity.
Comments are an apology, not a requirement. Good code mostly documents itself.
Flutter Flexible vs Expanded widgets
Tags: flutter, responsivedesign
Published: 2021-02-02 10:20:22

Both the flexible and the expanded widgets are tightly bound to a Row or Column, which means these widgets can be used only inside a Row or Column.

__Flexible Widget__

Consider the scenario where we have a Column inside which we have two containers, consider the first container is of height 600 and the second container is also of height 600. __The problem__ is the second container won't have enough space to occupy in smaller screens and we would encounter a __Bottom overflowed error__. 

__Solution__

We can wrap the second container to a Flexible widget and we have a property named __fit__ and it can have values such as __loose fit__ and __tight fit__

__Flexible with loose fit__

If we set the property to loose fit, we know that the second container is of height 600. Loose fit means the container will take the __least available space__, if the available space is 600 pixels or more, it will take only 600 pixels and also when the available space is less than 600 pixels for example 350 pixels, it will take only 350 pixels.

__Flexible with tight fit__

If we set the property to tight fit, flexible is going to consider the height property of the child element, it is going to take whatever space is available. For example even if we specify the height as only 10 pixels, when the available space is around 200 pixels, it will take the entire space.

__Expanded widget__

Flexible with Flexfit.tight is an Expanded widget, it is a shortcut for the above method.
How does WebdriverIO work
Tags: webdriverio, learnwebdriverio, webdriveriotutorials, wdio
Published: 2021-02-02 10:09:42

Sooooooo the elements of a Webdriverio Automation framework, what does it have?

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

Of course, we need a `browser`  where we can execute our scripts

An environment, `Node.js` where we can write scripts to pass commands

An `IDE`, Vscode where we can edit and write code efficiently with various extensions

A scripting language, `Javascript` or `Typescript` which the Node.js platform understands

A bunch of libraries/node modules `Webdiverio Pupetteer Allurereports Cucumber` etc.. to help achieve the various task we are wanting to achieve

Put this all together **...Booommmm!** We can achieve what we want to in Automation

Since webdriverIO is Node.js based we have the entry into `package.json` first from there the control shifts to the `wdio config file`

`Config file` is the control room of this Automation execution with this js file holding all the critical information like 

* what browser
* how many browsers
* what files to test
* where are the test files located
* what framework
* what kind of reports
* where to run 
etc.

Finally, when we try to execute the scripts by entering `npm test` in the terminal then the terminal transfers this to npm which will inturn search in the package.json

Once the specific command is executed {usually to run the config file with node} then the flow goes to the config which then handles the rest.

Cool, If you are interested in learning more about webdriverio, keep a watch here or my youtube channel

You can watch all this with a small demo in the below video 
{% youtube iW43mznyZnA %}

Cheers!
Ap
Interview Tips for Developers Part 2
Tags: codenewbie, webdev, javascript, python
Published: 2021-02-02 09:41:09

This is the continuation of the blog [INTERVIEW TIPS FOR DEVELOPERS PART 1](https://dev.to/chryz_codez/interview-tips-for-developers-part-1-5h86), i would really advise anyone reading this now to kindly click the link above to have the full understanding of the message been passed across here.

**>CONTINUATION>......;**

**> Interesting people are interesting**

- Showing interest in the goals and visions of the company through the questions being asked will surely make them find you more interesting.

**> Ask questions during interviews; **

- Always come prepared with questions for the interviewer. If you are been asked, if you have a question and you reply in the negative this might make you look dumb.

- Never ask any question pertaining to money or any self centered question (time-off etc).

- Never ask obvious questions that can be easily answered from their website.

**> The end of an interview**

- Always ask for the interviewer business card, if they don't have presently with them ask for their name or better still their email.

- Always send a thank you letter to the mail of everyone who interviewed you. An advice.. never expect a reply so that you .

Please kindly comment below for feedback and you can link up with me at [Twitter](https://twitter.com/chryz_codez) and on this platform also for more engagement and interaction! :)
How Productivity Tools Make You Productive?
Tags: productivity
Published: 2021-02-02 09:37:49

In a Post Pandemic world, Productivity has now become a very common term that managers and team leaders use. Every business across the globe has had to worry about employee productivity during the year of 2020. Most companies adopted productivity software to keep track of work, deadlines, and tasks. 

There are a number of task management software that is available in the market. But some fundamental questions that businesses should ask themselves is how effective are they? Will they really make me and my team productive? Will it simplify my work or is this just another complex productivity tool that marketers across the globe are trying to sell?

However, expecting that a tool magically starts working and delivering output is unrealistic. It is important for businesses to analyze and keep a clear vision of what processes are mundane and can be avoided on a day-to-day basis so as to ensure that all team members are able to give their best. Being productive is a mixture of skills and tools.

<b> <a href="https://www.taskopad.com/blog/productivity-tool-make-you-productive/">Read More : Productivity Tool </a> </b>
Stay Secure
Tags: remoteworking, security, vpn, password
Published: 2021-02-23 07:02:38

---
title: Stay Secure
published: true
date: 2021-02-02 09:31:38 UTC
tags: remoteworking,security,VPN,password
canonical_url: https://x-team.com/blog/stay-secure/
---
The office is passé. People work from home now. A great thing, if you ask us, but cybersecurity professionals are probably tearing their hair out. Our home networks and personal devices have become much juicier targets for hackers and cybercriminals.

More than ever, we need to protect ourselves from cybersecurity attacks. How? Firstly, with a **password manager**. Create complex, long passwords in an instant without having to remember them. Never use the same password twice.

_Pro tip: it's better to make passwords longer than it is to make them complex. Eight-character passwords are now [easy to crack](https://securityintelligence.com/the-inconvenient-truth-about-your-eight-character-password/). Twelve characters are the bare minimum._

Secondly, **secure your home network**. We beg you, don't keep the default password on your router. Change its SSID and password at the very least. Limit access to its settings if your ISP allows you to.

Thirdly, **[use a VPN](https://x-team.com/blog/remote-work-tools-software-developers/#security) on public wifi**. Protect yourself against anyone else connected to that shopping mall wifi. This counts both for your laptop and your phone. Oh, and pay for a good VPN. Free VPNs make money in suspicious ways.

Fourthly, as best you can, **separate work from home**. Don't send work emails with your personal email address – we're looking at you, Hillary – and avoid using personal devices for your work. Importantly, keep your kids away from your work devices. Gremlins attract malware.

Fifthly, **enable multi-factor authentication** wherever possible. Any banking website? Toggle MFA. Any social media website? Toggle MFA. Any ecommerce website? Toggle MFA. It makes your accounts so much harder to crack. Just make sure you store your backup phrase somewhere secure too.

Finally, **never leave your devices in plain sight**. Don't leave your laptop on the table as you order coffee. Don't leave your phone in the shopping cart as you shop for vegetables. And never leave your Nintendo Switch in the passenger seat of your car.
Build an In-Browser Transpiler
Tags: javascript, esbuild, transpiler, react
Published: 2021-02-02 09:23:51

Recently I wanted to build an In-Browser transpiler for my react project. So in this article I will try to explain the process of building one.

##Understanding Transpiling

###Let us first understand what is transpiling?

Transpiling is nothing but process of converting your source code from one language to another. Transpiling is done by a software program called transpilers or source-to-source compilers.

###Why do we need transpilers?

We know browser only understands javaScript. So transpilers helps us to write different languages, like CoffeeScript, TypeScript, or ClojureScript which during execution can be compiled to plain javaScript.

The most famous transpiler in javaScript world is Babel, but in this article we will use esbuild which I personally found out to be quite fast and it also allows us to do In-Browser bundling( will talk about this in future post😉 ).

##What are we building here?

We will be building a simple react application that will  take the JSX code in textarea and will transpile the code into ES2015 javaScript.

###Initializing

```
npx create-react-app react-transpiler
cd react-transpiler
npm install esbuild-wasm
```
> Node and npm should be preinstalled.

###Building The App

After initializing, open the code editor at current path.

####Index.js
```
import * as esbuild from "esbuild-wasm";
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const ref = useRef<any>();
  const [input, setInput] = useState("");
  const [code, setCode] = useState("");

  const startService = async () => {
    ref.current = await esbuild.startService({
      worker: true,
      wasmURL: "https://unpkg.com/esbuild-wasm@0.8.27/esbuild.wasm",
    });
  };
  useEffect(() => {
    startService();
  }, []);

  const onClick = async () => {
    if (!ref.current) {
      return;
    }

    const result = await ref.current.transform(input, {
      loader: "jsx",
      target: "es2015",
    });

    setCode(result.code);
  };

  return (
    <div>
      <h2>JSX Transpiler</h2>
      <textarea
        value={input}
        style={{ height: "300px", width: "500px" }}
        onChange={(e) => setInput(e.target.value)}
      ></textarea>
      <div>
        <button onClick={onClick}>Transpile</button>
      </div>
      <pre>{code}</pre>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

```

##Output

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

Hurray🎉🎉

We built an In-Browser JSX transpiler using esbuild.

##Wrap Up!

Thank you for your time!! Let's connect to learn and grow together. [LinkedIn](https://www.linkedin.com/in/nikhil-tatpati-097184194/)
<a href="https://www.buymeacoffee.com/nikhiltatpati" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="300"></a>
Online shopping for men's and Women's Clothing
Tags: onlineshopping, tshirtformen, onlineclothing
Published: 2021-02-02 09:18:52


Bewakoof.com the brand has maintained its class through its trendy and comfortable apparel. Its trendy styles and a wide range of color combinations have made it a top brand among the youth. Winter jackets of the brand are available in different patterns, designs, and colors to give a cool and casual look. This green solid quilted casual winter jacket works well for men who want to flaunt their style game. Featuring a zip closure and mandarin collar, this winter jacket is something that you should have in your wardrobe.

Bewakoof.com was conceived in 2012 with the spirit of reimagining the usual, mundane things in our day-to-day lives differently. This is the same spirit that has been carried over to date. Bewakoof.com strives to have all the products, including phone cases, on our platform with the trendiest prints and design. Undoubtedly, we are and remain the number one place for stylish mobile covers via online shopping.
https://www.bewakoof.com/
How to Put a "Send us a Private Message" Button in a Tweet
Tags: twitter, tutorial
Published: 2021-02-02 09:17:35

Today, I want to show you how to put a "Send us a private message" button in a tweet. Something like this:
![Twitter message me button - Nima Owji](https://dev-to-uploads.s3.amazonaws.com/i/74j9xxqw2newbowtjzag.jpeg)
Let's start!

# Finding Twitter ID
First of all, you should find your Twitter ID. You can get your ID from many websites. I found a website called "TweeterID". Click here to open it.

You should give your Twitter handle to it and it will convert your Twitter handle to Twitter ID!
![How to Put a "Send us a Private Message" Button in a Tweet by Nima Owji](https://dev-to-uploads.s3.amazonaws.com/i/hs1r8mo4oi6xzgd144kw.jpeg)
If this website isn't available, you can simply search "Find Twitter ID" and find another website. When you got your ID, copy it!

# Creating the button

Okay, now you should compose a new tweet. In your tweet, you can write anything. After that, you should paste this link into your tweet! (This link is that button).

```https://twitter.com/messages/compose?text=[Your Message]&recipient_id=[Your Twitter ID]```

You should assign a message to "text". When people click on this button, this message will appear in the textbox!

You should also assign your Twitter ID to "recipient_id".

# Finished!
Finished! You can tweet it. It will convert to a button automatically!

I hope you liked this! Don't forget to like this article. If you liked it, please share it in a tweet and mention me too! Please follow me on Twitter. My name is Nima Owji. I am a 14-year-old programmer. Thanks.

Special thanks to Chris Messina!
Parallel mode Drone.
Tags: drones, python, parallelmode, linefollower
Published: 2021-02-02 09:02:54

Hello everyone,

I am have seen the Mavic Air 2 Active Track Follow Me drone which has the feature (parallel mode) and I am interested in programming a drone in the parallel mode; therefore, could anyone give me any hints on how to start or where to find some similar codes?

Thank you in advance.
API Testing using vREST NG - How vREST NG works
Tags: testing, api, vrest
Published: 2021-02-02 09:02:27

Hi friends, we are starting up a video series on API Testing using vREST NG. Today we have added our first video to the series on How vREST NG works by detailing its major components.

The link to the video is:
https://youtu.be/HJFV9NTcJqM

The link to the playlist is:
https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

We will be adding more videos to the playlist on a regular basis. So stay tuned. 

If you found the video helpful then please like the video and subscribe to our channel. And also share your useful suggestions.
Creating a simple Python3 script to hash a file.
Published: 2021-02-02 09:00:11


First, create and a Python file:
```
touch sock.py && code sock.py
```
Also, let’s create a sample text file to modify. Use nano to create the file and add whatever content in the simple GUI you’d like.

```
nano sample.txt
```

We’ll start in the sock.py file. This is by and large thanks to this entry on StackOverflow; the explanatory comments added are my own: `https://stackoverflow.com/questions/22058048/hashing-a-file-in-python`.

```
import sys
import hashlib # This is a builtin Python library that knows tested hash functions.

buffer_size = 65536 # This will read the data in 64kb chunks.

md5 = hashlib.md5() # The first mainstream hash function; now considered low-security and not recommended.
sha1 = hashlib.sha1() # Developed by the US; currently used. 

with open(sys.argv[1], 'rb') as f: #Open the terminal file. 'rb' = read bytes
      while True: 
        data = f.read(buffer_size) # read the file in 64kb chunks into 'data'
        if not data: # if the file is over
            break
        md5.update(data) # update the hash object with this file
        sha1.update(data) # update again in a second format

print("MD5: {0}".format(md5.hexdigest())) # hexdigest outputs in hex code
print("SHA1: {0}".format(sha1.hexdigest()))
``` 

If you run sock.py with your sample.txt included as an argument, you should receive an output in your terminal that looks like this:

input:

```
python sock.py sample.txt
```

output:

```
MD5: 6c5dec6d2deb0f0c1c5fe7d58fdf02c8
SHA1: aedc80ce7e42b12a0ffe0d363043ed22f143c74f
```

Part of why SHA1 is considered better is simply because it’s longer. Every added bit in the length of a hash is an exponential gain in security. Hashing is useful because it compresses non-uniform files etc. into a uniform size, more easily handled and exchanged. With SHA1, it is nearly impossible for two files to outcome to the same hash, but MD5 is vulnerable to ‘hash collisions’ where a duplicate hash record can be created that contains potentially hazardous content, but passes a computer’s hash recognition.
Additional Hooks in React - useMemo()
Tags: react, javascript, webdev, beginners
Published: 2021-02-02 08:29:04

This blog post continues the series about [React Hooks](https://reactjs.org/docs/hooks-reference.html ).

It covers one of additional hooks in React - **useMemo()**.

## What is useMemo()?

**useMemo()** is JavaScript function, which returns a *memoized* value. What kind of value is that?

In computing, **memoization** is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

Function is considered *expensive*, when it synchronously calculates a value which is computationally expensive to calculate or has a long `for` loop. Expensive operations can be costly in either time, memory, or processing. In addition to potential technical issues, this may lead to poor user experience.

So, this hooks returns a cached value of an expensive function.

Let's look at this hook more closely below.

## How and when use useMemo()

To use this hook, you need to import it first from React library like this:

```react
import {useMemo} from 'react';
```
You can use this hook without import as well like this - `React.useMemo()`, for me it's just more convenient to import and destructure first this function and then use it when need in the code.

Afterwards we can set up this hook like this:

```react
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
Here we create a variable to store the result of useMemo() hook, which is the memoized value.

**useMemo()** accepts 2 arguments:

1.*expensive function* (in out example- computeExpensiveValue(a, b))
2.*array of dependencies* (in our example - [a, b])

The **dependencies** are the elements *useMemo* watches: if there are no changes, the function result will stay the same. Otherwise, it will re-run the function. If they don’t change, it doesn’t matter if our entire component re-renders, the function won’t re-run but instead return the stored result. This optimization helps *to avoid* expensive calculations on every render.
If no array is provided, a new value will be computed on *every render*.

## Conclusion

**useMemo** is used mainly for performance optimisation. When looking to implement useMemo, you can check with profiling tools to identify expensive performance issues (those which are using up a lot of resources (like memory)). If you are defining a good number of variables in a function at render, it makes sense to memoize with **useMemo**.

BUT - if you implement useMemo too often in an application, it can harm the performance. The more you use the hook, the more your application has to allocate memory. Use it wisely!

Thank you for reading my blog. Feel free to connect on [LinkedIn](https://www.linkedin.com/in/olenadrugalya/) or [Twitter](https://twitter.com/OlenaDrugalya) :)

<a href='https://ko-fi.com/J3J42JOOA' target='_blank'><img height='12' width=30% style='border:0px;height:12px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
Threading in Python
Tags: technology, python, tipsandtricks
Published: 2021-02-09 20:46:23

---
title: Threading in Python
published: true
date: 2021-02-02 09:00:00 UTC
tags: Technology,python,tipsandtricks
canonical_url: 
---

Just another quick tip and trick for Python, and that is how you implement threading. This is surprisingly simple in Python, but basically it involves installing the threading library using pip

```

pip install threading

```

From there the process is the following:

```

numThreads = 10
threadList = []

def RunTest(self, name):
	print(f"Hello {name}")

for x in range(numThreads):
	t = threading.Thread(target=RunTest, args=(x))
	t.start()
	threadList.append(t)

```

This will then kick off each thread and let them run in the background, now the next logical question being how do I wait for a thread to complete, and that would be the following:

```

for t in threadList:
    t.join()

```

That’s really it, overall pretty easy.