teleren/devto huggingface dataset:
Supercharged Visual Studio Code - Part 1
Tags: javascript, vscode, typescript, react
Published: 2022-07-19 15:41:36

Hello everyone 😄

Do you want to get work done faster without switching applications?
There are alot of packages on vs-code that helps with important tasks.

(1). Why use postman etc to test endpoints when you can do it from your vs-code
Download **thunder client** on vs-code extenstion tab

![Screenshot 2021-11-19 at 11.37.58.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637318285590/x-KO4bP2r.png)

![Screenshot 2021-11-19 at 12.02.01.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637319731193/peedOGKy-.png)

(2). When you have your project setup in Typescript and you want to import function, components etc from any file without writing the import statement then use **Auto Import**

![Screenshot 2021-11-19 at 11.41.05.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637318471652/CDIU8aamV.png)


(3). I am cautious about the package I use while developing, on NPM package repository there are alot of packages that do one thing or the other but most of these packages are HEAVY and it will affect building time and also visual rendering, so what I do is: I minimize the use of external packages and I check the cost of importing a package. The extension I used to check the cost is called **Import Cost**


![Screenshot 2021-11-19 at 11.47.19.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637318900441/nWbr7Si_i.png)

example:

![Screenshot 2021-11-19 at 11.47.54.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637318881372/PlxY5fDjm.png)

(4). Sharing code snippet is Nice, it enhances collaboration. to do this you don't need to leave your vs-code editor, download **Polacode** and share that code with a fellow engineer 😊 😊

![Screenshot 2021-11-19 at 11.51.12.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637319095650/tTVw82key.png)

example:

![Screenshot 2021-11-19 at 11.54.25.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637319275940/53U351IGi.png)

(5). For Javascript or Typescript engineers that wants to test a concept or implement an algrorithm outside their project, you DON'T need to google -js online editor- like the former me, just download **Quokka.js** on vs-code extensions


![Screenshot 2021-11-19 at 11.56.56.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637319422058/Vyn7QHNSj.png)


I mean check my terminal 😊 😊 - so cool(you get to see the result ASAP)
![Screenshot 2021-11-19 at 11.57.24.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637319451283/SYqzVaJoB.png)



Thanks, for checking out this tutorial. (please like and add your comments)
You can also check out my other tutorials on my  [blog](https://akinolu52.hashnode.dev/) 

If you have any questions, feedback or comments, please let me know.

You can connect with me on [twitter](https://twitter.com/akinolu52) [email](mailto://akinolu52@gmail.com)

You can also reach out to me if you have a project,
gig or role for me(I do React-Native & React Js)  [twitter](https://twitter.com/akinolu52) [email](mailto://akinolu52@gmail.com)
Node: definition
Tags: opensource, microservices, embedded, luos
Published: 2022-07-19 15:36:43

A Luos node is the term for each hardware component connected to a Luos network.

⏩ https://www.luos.io/docs/luos-technology/node

In other words, each MCU connected to the system, is called a node. The node contains a package and one or more services.
Let's learn together.
Tags: discuss, watercooler
Published: 2022-07-19 15:33:16

I propose a let's learn thread where you post a topic you consistently find hard and the guys in the comments help you understand it better. 

I start by mentioning that sometimes `git checkout -b ` and setting up a new git branch to track a remote branch usually confuses me. I always have to Google how to do it. Even if I think I understood it last time. Is there a way you learned and understood this particular set of git commands?
I'm probably moving to vim
Tags: vim
Published: 2022-07-19 15:28:10

My mentor uses Emacs. And he is heavily into that ecosystem building his own plugins and such. I never got the hype around Vim, Emacs and Nano. I know enough vim to get around but beyond that I don't really know Vim like that. 

But I want to buy a raspberry Pi for the fun of it, but also so I can code from anywhere by SSH-ing into it. But I need a command line editor for this. So for the next couple months, I'm practicing vim while my raspberry pi comes to me. Maybe I'll be able to match my mentor's prowess in Emacs. Maybe I'll hate it. 

Maybe I'll finally be able to say I know how to exit vim on the first try. Maybe I'll find Emacs easier. Let's wait and see.
The Journey thus far...
Tags: webdev, codenewbie, beginners, devjournal
Published: 2022-07-19 15:04:36

Ask me 10 years ago if I'd be writing a blog post on a developer website, and I would have probably wanted some of what you were smoking cause it sounds really good. What is my point? Well life is a journey full of smaller journeys, and last fall (2021) I embarked on an adventure to learn computer programming. It began with a intro to computer science course that sparked my interest. As a result, I joined a bootcamp. I hear plenty of controversy on bootcamps and I honestly couldn't tell you if it was a better option than sticking out 2 to 3 more years of college or learning on my own. Once I weighed out my options, I made the decision to go the bootcamp route. I started my bootcamp in February of this year and I am set to complete in October. We are currently learning React. So far, I have been loving my decision and I have learned so much. I have built full stack web applications through both python and java. I even had the opportunity to participate in a Chainlink hackathon.

Though there have been successes, there have also been plenty of struggles. I experience tons of doubt in myself and sometimes believe I am not capable of any of this. I experienced a lot of fear on whether or not this was a good decision for me and frustration when I can't figure something out or grasp a concept. One of my biggest weaknesses is asking for help from my peers and the community. I understand how important it is to ask for help in this field and it is something I need to work on. Lately, I have been struggling staying proactive and consistent with learning new material.

I write this post because It has been on my heart for some time, I had never written a blog post before and I thought I would try something new. Also, I wanted to reach out to the community to say hello I am here, I exist, I am human. I am over joyed to be apart of this community. If you're reading this and you feel some of the same things I have, I hope you continue to press on in your own journey with software development I am rooting for you!

The meme above describes how I feel most of the time. I either feel overzealous about solving a problem or like a complete idiot for not understanding something. I love it though, I'm grateful to have finally found my passion. Recently, I have been trying to wrap my head around useReducer in React. I read something for my bootcamp about it yesterday and had no idea what I just read. I have found though, that just trying stuff in my code and getting my hands dirty is where I learn the most, especially when It breaks!
How to restore the People Pane in Outlook 365
Tags: outlook, microsoft365, office365, msoffice
Published: 2022-07-19 15:08:19

Microsoft has retired the People Pane, but you can still get it back ... albeit not in the Outlook desktop app itself. 

1. Log in to the corresponding Outlook web app. You can find this via `File` -> `Info` -> `Account Information` -> `Account Settings` -> below `Access this account on the web.` If you do not have a corresponding Outlook web app, this method will not work
2. In the Outlook web app, find the message you want to see people details for
3. Mouseover the name of the person of interest in the email header
4. To the right of the `Call` icon, mouseover the `V` icon

The ensuing dropdown menu provides much of the People Pane's functionality, including finding previous emails, attachments, and more.
Make you own Web
Tags: javascript, extension, browser
Published: 2022-07-19 15:08:00

Annoyed from the content hidden behind a paywall on https://www.heise.de.

No problem.

Get rid of it by using an extension that executes client scripts on load i.e. [scripty](https://chrome.google.com/webstore/detail/scripty-javascript-inject/milkbiaeapddfnpenedfgbfdacpbcbam) with this simple script.

```
const articles = document.querySelectorAll('[data-component="TeasersModule"')
for (const article of articles) {
  const isHeisePlus = article.textContent.includes('heise_plus')
  if (isHeisePlus) {
    article.parentNode.removeChild(article)
  }
}
```

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

## After
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkwn9536s4lhgwnvrj4v.png)
JavaScript Closure
Tags: javascript, closures
Published: 2022-07-19 15:06:57

---
title: JavaScript Closure
published: true
description: JavaScript Closures
tags: #javascript  #closures
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
### What is a Closure?
A closure is a function having access to the parent scope, even after the parent function has closed. Closures in JavaScript is a feature where an inner function has access to the outer function's variables. 

**A closure has three scope chains**
* Has access to its own scope [the variable defined within it's curly]
* Has access to the variables of the outer functions
* Has access to the global variables

```
var a = 10;
        function first_func(){
            var b = 20;
            function second_func(){
                var c = a+b;
                return c;
            }
            return second_func();
        }
        var sum = first_func();
        document.write("The sum is " + sum + '<br>')
```
![Closure result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcguibwbjfxbqvpwq0a0.png)

```
function temporary(){
            let counter = 0;

            return function(){
                counter +=1;
            }
        }
        const add = temporary();
        console.dir(add)
        add();
```

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

```
function temporary(){
            let counter = 0;

            return function(){
                // counter +=1;
                console.log("Death Closure")
            }
        }
        const add = temporary();
        console.dir(add)
        add();
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4twaqh0ecff9uc814uh.png)
addEventListener
Tags: javascript
Published: 2022-07-19 14:58:09

#### HTML codes
```html
<div id='container'>
    container
</div>
```

#### addEventListener function
this function listens to an event that is passed through the first parameter
and calls a function that is passed through the second parameter
```js
const container = document.getElementById("container");

function backgroundToRed(event) {
    event.target.style.backgroundColor = 'red';
}

container.addEventListener('mouseover', backgroundToRed);
```
Finding errors in datasets with Similarity Search
Published: 2022-07-19 14:54:24

Nowadays, people create a huge number of applications of various types and solve problems in different areas. Despite such diversity, they have something in common - they need to process data. Real-world data is a living structure, it grows day by day, changes a lot and becomes harder to work with.

In some cases, you need to categorize or label your data, which can be a tough problem given its scale. The process of splitting or labelling is error-prone and these errors can be very costly. Imagine that you failed to achieve the desired quality of the model due to inaccurate labels. Worse, your users are faced with a lot of irrelevant items, unable to find what they need and getting annoyed by it. Thus, you get poor retention, and it directly impacts company revenue. It is really important to avoid such errors in your data.

ML Engineer at Qdrant, George Panchuk, describes hot to define labeling errors in datasets with similarity search. Read more **https://qdrant.tech/articles/dataset-quality/**


![Category vs. Title and Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23jeua2x1ufhve3lhyw8.png)
Top 3 animation library for frontend
Tags: programming, webdev, javascript, react
Published: 2022-07-19 14:34:38


If you want to watch it instead of reading it, here is the video link.

[Top 3 animation library for frontend](https://www.youtube.com/shorts/fXk6iecUBZs)

---

**React Spring**
This is more often a spring-based animation library that provides hooks and animated components to add animation. The easy learning curve, more than 25K github stars, less in size, fast and used by many companies.
react-spring
[React Spring](https://react-spring.dev/)

---

**Framer motion**
Animation library developed by framer, that help you to develop your own website, 15 k github starts, more than 100K npm downloads, they provide easy hooks to deal with complex animations. More importantly, they deal with server-side rendering and CSS variables.

[Framer motion](https://www.framer.com/motion/)

---

**React transition group**
With more than 9K github starts and 100K npm downloads, I will put react transition group on the 3rd. They help you to animate the component when it enters and leave the DOM, they don't provide CSS on their own but are easy to use, less in size, fast and efficient.

[React Transition Group](https://www.npmjs.com/package/react-transition-group)

---

**Conclusion**
Until next time, have a good day.

Keep developing!!

Our website [iHateReading](www.ihatereading.in) || [Youtube](https://www.youtube.com/channel/UC6I-Tz6QwYbJpoIK7l0NtXA) || [Twitter](https://twitter.com/treyvijay)
How to get around Outlook 365 automatically encrypting emails you save to your computer
Tags: outlook, microsoft365, emai, encryption
Published: 2022-07-19 14:34:06

If the Microsoft Outlook 365 desktop app is encrypting emails you manually save to disk, here's how to get around that.

1. Log in to the corresponding Outlook web app. You can find this via `File` -> `Info` -> `Account Information` -> `Account Settings` -> below `Access this account on the web.` If you do not have a corresponding Outlook web app, this method will not work
2. In the Outlook web app, find the message you want to download
3. Click the `...` icon at the top right of the message
4. Click `Other reply options >`
5. Click `Forward as attachment`
6. Forward the email to yourself
7. Open the above email in the Outlook 365 desktop app. You'll notice the attached email is unencrypted
8. Save the attached email as a .msg file

You should now be able to attach the saved .msg file above without it being encrypted.

The above worked on Outlook 2016 365 on Windows 10.
Code Smell 150 - Equal Comparison
Tags: javascript, webdev, beginners, programming
Published: 2022-07-19 14:23:19

*Every developer compares attributes equally. They are mistaken.*

> TL;DR: Don't export and compare, just compare.

# Problems

- Encapsulation break

- Code Duplication

- Information Hiding Violation

- Anthropomorphism violation

# Solutions

1. Hide the comparison in a single method

# Context

Attribute comparison is heavily used in our code.

We need to focus on behavior and responsibilities.

It is an object's responsibility to compare with other objects. Not our own.

Premature Optimizers will tell us this is less performant.

We should ask them for real evidence and contrast the more maintainable solution.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/d3eda35a36e6dfe7cb292ff2be5a7b71)
```javascript
if (address.street == 'Broad Street') {
  

if (location.street == 'Bourbon St') {
  
// 15000 usages in a big system  
// Comparisons are case sensitive
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/7ecfc60fccc9053db2a7b22dc30f31cd)
```javascript
if (address.isAtStreet('Broad Street') {
    }

// ...

if (location.isAtStreet('Bourbon St') {
    }  
// 15000 usages in a big system  
  
function isAtStreet(street) {
  // We can change Comparisons to case sensitive in just one place. 
}

```

# Detection

[X] Semi-Automatic 

We can detect attribute comparison using syntax trees.

There can be good uses for primitive types as with many other smells.
 
# Tags

- Encapsulation

# Conclusion

We need to put responsibilities in a single place.

Comparing is one of them.

If some of our business rules change we need to change a *single point*.

# Relations

{% post https://dev.to/mcsee/code-smell-63-feature-envy-502f %} 

{% post https://dev.to/mcsee/code-smell-101-comparison-against-booleans-3aic %}

# Credits

Photo by [Piret Ilver](https://unsplash.com/@saltsup) on [Unsplash](https://unsplash.com/s/photos/scale?)  

* * *

> Behavior is the most important thing about software. It is what users depend on. Users like it when we add behavior (provided it is what they really wanted), but if we change or remove behavior they depend on (introduce bugs), they stop trusting us.

_Michael Feathers_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
uint vs uint256 -> Small Solidity detail that can cause big Heisenbug
Tags: solidity, bugs, uint256, delegatecall
Published: 2022-07-19 14:08:25

If we use delegate call in Solidity there is one small detail that can cause very hard to locate bug. 

In normal situation when we declare variable as `uint256` we typically write just `uint public number;` syntax. And this will be seen as alias for `uint256 public number;`. It is more efficient to write just `uint` and it is type of number most in use. And from that productivity point of view absolutely make sense to use unspecified `uint` instead of `uint256`. But if we want to make `delegatcall` and we specify just `uint` then we will induce small, totally transparent and hard to catch heisenbug. 

Here is example:


```
// SPDX-License-Identifier: MIT
pragma solidity 0.8.9;
contract TestTemplate {

    uint public amount;
    address public sender;

    function writeTo (uint _amount) public {
        amount = _amount;
        sender = msg.sender;
    }
}
```


And now contract from which we make that delegatecall:

```
contract TestTwo {

    uint public amount;
    address public sender;


    function writeTo(address _to, uint _amount) public  { 
        (bool success, bytes memory data) = _to.delegatecall(abi.encodeWithSignature("writeTo(uint)", _amount));        
    }
}
```


This `_to.delegatecall(abi.encodeWithSignature("writeTo(uint)", _amount));` is crucial for generating this type of bugs. Because if we use just `uint`, what is widely adopted practice of using allices instead of real `uint256`, we are in trouble. 

But instead if we use:  `_to.delegatecall(abi.encodeWithSignature("writeTo(uint256)", _amount));` 
we will live happy long after.

Now from outside perspective it looks as arbitrary decision that on the level of language we can use one way to declare variable in one case and second and more strict one in another. Most probably there are some deeper language designee reasons why this is the case. But from practical point of view this can be a bit tricky. That is why for consistency reason I start to use only `uint256` all across the bord avoiding this type of issues entirely.
Using a 10 years old Acer for code testing [🐧]
Tags: discuss, watercooler, career, linux
Published: 2022-07-19 14:03:24

Hey DEV Coders and engineers 👋

It was a Saturday morning, despite the fact that we are in July, it was raining that day ☔, I went to a coffee shop to do some modifications on the FARM stack course that I have published last year.
FARM stack course: https://github.com/BekBrace/FARM-Stack-Course

Originally, I wanted to change React for Vue, for one simple reason: I tend to like Vue more, this doesn't mean I hate React, I like React but something about Vue that catches me, the state management and the routing system is much easier to handle in Vue than in React / faster I'd add.

{%youtube Hrb5HfH9K5A%}

But what happened is that I decided just to change MongoDB with PostgreSQL.

To be honest, I wouldn't have done it without the Penguin 🐧, I can't imagine working on a Core i5 processor with 8 GB of Ram using Windows 10, not to mention that it's impossible to work on Windows 11. 
p.s. I've never been a Mac guy, although I own a very old one that I bought in 2009 !

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

I use Ubuntu, nothing fancy.
But before that I had Kali installed on my machine; and let me tell you that I've been so much criticized for using Kali to create SAPs with React or Vue, but the truth is I am learning Cyber security and pen testing, that's why this machine was always available, but I lately have installed Ubuntu, just to not be morally disturbed! 

Do you have a favorite laptop / PC that you feel it has certain connection with you ? somehow with the years, you two have established this connection of mutual understanding and agreed upon an invisible pact of productivity ? hehe, well this is Antoshka, or my Acer that I bought in 2012 in Moscow, Russia!

Tell me about your machine(s) and your sense of connectivity to your computer(s)

Also, coffee is one of the essential elements that I cannot live without especially when I am programming or re-factoring an old code.

Thank you guys and have a fantastic day !
How to Make a Dental Website Using Html CSS JavaScript
Tags: css, javascript, tutorial, beginners
Published: 2022-07-19 13:56:24

{% youtube q0WvF0OVWVg %}

How to Make a Dental Website Using Html CSS JavaScript

This video will show you how to make a dental website using html css javascript

[Live Website](https://codewithsadee.github.io/dentelo)
[Github Repo](https://github.com/codewithsadee/dentelo)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[If you want to practice with me, Download this starter file](https://drive.google.com/file/d/1-yqpdfRrs0J7gEfYR2-88dMOzqqk3hiC/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:25 - File structure
4:57 - Project initial
9:43 - Header
25:00 - Hero section
33:50 - Service section
39:33 - About section
42:51 - Doctor section
53:11 - CTA section
55:43 - Blog section
1:04:16 - Footer
1:18:37 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)