teleren/devto huggingface dataset:
Function-level Scoping in pre-ES6 
Tags: javascript
Published: 2020-04-04 22:07:07

Before the introduction of `const` and `let` in ES6,`var` reigned supreme and was used for all declarations/identifiers. The use of `var` is still quite common today, either through legacy code or in new code. Although there is a lot of debate over where and when `var` declarations should be used, I want to show some of the pre-ES6 function scoping. 

```javascript
function difference(x,y) {
    if (x > y) {
        var z = x;    
        x = y;
        y = z;
    }

    return y - x;
}
```

In this example here, we have a function where we want the difference between the two numbers to be positive. If `x` is greater than `y`, then we assign the value of `x` to `z`, which is declared in this function scope. Then, we take steps to essentially switch the values of `x` and `y`. In the end, we return `y-x`, which should be a positive number.

I want to bring attention to `z` declaration in this function. `var` identifiers within functions are accessible across the whole function. They attach themselves to the nearest enclosing function, no matter where they may be within that function. So in this case, although `z` may have been declared in the if block, it still belongs to the function scope. Unlike `let` or `const`, `var` declarations cannot create their own block scope. So although `z` has been declared inside a block, it does not create a block scope. Also, to be completely clear, not all blocks create their own scopes as well. 

Theoretically then, for the function above, we could change it so that it looks like this:

```javascript
function difference(x,y) {
    var z;

    if (x > y) {
        z = x;    
        x = y;
        y = z;
    }

    return y - x;
}
```
This version of the function would exhibit the exact same behavior  since `z` belongs to the function scope. One possible argument I could have against this version, however, is that putting `z` outside the if block would signal that it's available and ready to be used within the whole function. While this is true, it's only technically needed for the set of statements within the if block. So putting the declaration of `z` inside the if block would semantically show that `z` is only needed for the part of the function inside the if block, although functionally, nothing changes. In other words, it semantically shows that `z` is block scoped.

In ES6+, we could incorporate `let` and simply swap out `var` for `let`.

```javascript
function difference(x,y) {
    if (x > y) {
        let z = x;    
        x = y;
        y = z;
    }

    return y - x;
}
```

In this ES6+ version, this `let` declaration also creates its own block scope within the if statement.
Find large files on Linux OS
Tags: linux, docker, aws
Published: 2020-04-04 21:50:22

If you work with Linux VM's, you know it can be a pain to find some deeply hidden large files sucking away at your storage. Fear not, use `du`.

```
sudo du -shx /* | sort -h
```

It will return something like:
```
...
4K	/opt
72K	/root
764K	/run
29M	/etc
39M	/boot
256M	/home
889M	/usr
33G	/var
```
Looks like our `/var` folder could use some further inspection, lets adjust our command:

```
sudo du -shx /var/* | sort -h
```
Then we see something like:
```
...
60K	/var/spool
224M	/var/cache
6.2G	/var/log
27G	/var/lib
```

It appears we have two more directories worthy of further digging.

We can adjust our command again to inspect `/var/lib/*` or `/var/log/*` respectively.

Good luck!
Can You Really Forget The Simple Things?
Tags: discuss
Published: 2020-04-04 20:32:12

I'm sure like most of us, we got some kind of power training through a Bootcamp. At least that's what I did. But with the nature and speed they teach you the topics, it's easy to forget them.

Having only a certain amount of time to try to develop skills and master them can put a strain on really knowing everything you need to know to get a job or start a freelance. 

But what about when it's all over? What happens to the techs you learned in the early portions? Are you one who wants to keep fresh with the different things learned or are you someone who rather just stick to your favorite?

For someone like myself, when I got into this I wanted to learn it all. But in reality when the bootcamp ends, so does some of the learning grit you have. It's not a bad thing in my mind because it drives me to go back and relearn what I knew. Like riding a bike again years of not. 

So all in all, just take time to go back and learn what you might have once knew or been foggy on. Because right now we got all the time we could want with what the world is going through.
MercedUI - NEW Web Component-Based Front-End Framework
Tags: webcomponents, react, angular, vue
Published: 2020-04-04 20:24:07

As I learned how to make Web Components using the Native Browser API I felt some improvements could easily be made to bring in many of the features we are used to when working with something like React. So first off here is my playlist where I go over how to create components with the Browser API.

https://www.youtube.com/playlist?list=PLY6oTPmKnKbaNVkXHOHWxgdKEZLGKuFP9

I create MercedUI a framework build on top of the Web Component API which gives you the following features in a 14kb size.

MercedElement: A base class that allows you to create components with Reactive State, Props, and Redux like global state management through static methods and properties.

m-router/m-link: Router components with a similar feel to react-router, but web components

FormTool: A class that can bind itself to a form element and makes it easy to edit, extract and clear information from a form.

captureProps: A function that can target any DOMelement and render its attributes into an object, so you can incorporate the props of elements into your logic.

getQueryHash: returns an object of any URL queries and hashes in the url

mapToString: a map function that maps over an array and concatenates the strings that are returned for creating template strings.

mapToDom: does what mapToString does but then maps the resulting template string to target Dom element.

bindData: works like mapToDom but allows you to pass data to be bound to the template and returns a function to update the data and re-render the template. Essentially a reactive non-component template.

To try out this framework, find tutorials and templates check out my website of Libraries here:
http://www.alexmercedcoder.com/jslib/
[0/15] How about 15 weeks of code?
Tags: 100daysofcode, aws, node
Published: 2020-04-04 20:23:17

**Introduction 👋** 
Hey there dev.to community! My name is Seth, and I've been working in tech and software for about 7 years. I've worked across many tech stacks, and even started my career as a mainframe operator. Much of my career has been spent working with databases and infrastructure, but lately I've really been getting the itch to become a full stack engineer. I decided to start working on a portfolio website about a week ago, and that was probably a good decision!

**Being Laid Off 🦠😔👎**
Unfortunately, I was laid off along with many of my team members last Thursday morning due to the COVID-19 situation. If nothing else, this has really highlighted the necessity of having good examples of my work available for others to see. Because of this, I've decided to commit to do #100daysofcode, but to reduce spam and better organize my time, I'm going to publish a weekly update here on dev.to.

**Planning 📝**
Over the next 100 days, I want to accomplish the following:
- Get comfortable blogging about technology (this is a good start, huh!?)
- Build a portfolio website I can be proud of
- Start my youtube channel -> create interesting content that revolves around my interests and experience
- Learn a popular SPA framework and build my html+css skillset
- Build javascript skillset -> become proficient with node/express
- Build multiple projects with REST APIs built in NodeJS, Python, and maybe Go
- Experiment with GraphQL & FaunaDB

**What I've done so far 💪**
My next post will go into greater detail, but I would like to highlight some of the work I've done so far for week 1. 

- I've purchased sethcenterbar.com, set up route53, ssl certs, cloudfront etc.
- I've played with react and svelte. Currently, I'm moving forward with svelte, but I don't have a huge preference at this point. 
- Worked on collecting all content I have to share for now
- Published WIP site

**Before following up with post[1/15] I would like to:** 🛠️
- Finish cross-browser support for navbar
- Implement routing in svelte
- Integrate with a third party api (maybe pull projects from github to display on my site)

**In Conclusion 🧑‍🚀🚀**
This has been a pretty scary time for all of us, and losing my job has been quite unsettling. I'm deciding to make the best of it. I would love to make some friends on this site and I'm always excited to talk about data, polyglot persistence, microservices, serverless, and backend dev. 

If you want to follow my website work live, -> https://sethcenterbar.com
Twilio Hackathon "Looking for Contributors" Thread
Tags: twiliohackathon
Published: 2020-04-04 20:12:30

---
title: Twilio Hackathon "Looking for Contributors" Thread
published: true
description: Need contributors to help with your Twilio Community Hackathon project? This thread is for you!
tags: twiliohackathon
---

Are you looking for contributors to help out on your submission for the [Twilio Community Hackathon](https://dev.to/t/twiliohackathon)? Then you came to the right place — this thread is for you! 

Consider turning on your open DEV Connect inbox at the top of your [settings page](https://dev.to/settings/misc) to make it easier for people to contact you.

Here are other helpful hackathon resources: 
- [Twilio Community Hackathon Announcement](https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8)
- [Help Thread](https://dev.to/thepracticaldev/twilio-hackathon-help-thread-1jno)
- [Community Update Thread](https://dev.to/thepracticaldev/your-twilio-hackathon-updates-172k)

Best of luck finding contributors to help with your project! 🙂

---

Here is a list of commenters from the [main announcement thread](https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8) who were seeking contributors:

{% devcomment n9fa %}
{% devcomment na1b %}
{% devcomment n9ph %}
{% devcomment n9lk %}
{% devcomment nabo %}
{% devcomment na3h %}
{% devcomment nada %}
Deployment of angular app to github.io pages
Published: 2020-04-04 20:12:10

---
title: Deployment of angular app to github.io pages
published: true
description: 
tags: 
---

## Deploy angular app to github.io

### Create application using angular-cli
`npm install -g @angular/cli`
`npm new <appname>`

### Install angular-cli-ghpages
`npm install -g angular-cli-ghpages`

### Build
`ng build --prod --base-href="https://<username>.github.io/<reponame>/"`

### Deploy
`npx angular-cli-ghpages --dir=dist/apps/<appname>`

### Change repo setting to use gh-pages
![Image](https://dev-to-uploads.s3.amazonaws.com/i/ojt24om2vjzl0w1sytxa.JPG)
Validating kafka Payloads
Tags: validatingspringkafkapayloads
Published: 2020-04-04 19:51:00

Validating Spring Kafka Payloads using @Valid tags with spring boot not working. Am using kafak-client -version 2.4.1.release.



I've tried both @Valid and @Validated. I've tried adding a MethodValidationPostProcessor bean. I've tried adding a Validator to the KafkaListenerEndpointRegistrar (as per the EnableKafka javadoc):

But no matter what I try, I can still pass invalid requests in and they process without error. 
Any help will be appreciated.
      @KafkaListener( topics = "${spring.tradeweb.kafka.topic}")
    public void onMessage(@Valid @Payload List<ConsumerRecord<String,  GFIRTradeWebMessage>> records) {
        logger.info("received TradewebMessage='{}'", records.size());
        List<GFIRTradeWebMessage> messageList = new ArrayList<>();


        for(ConsumerRecord<String, GFIRTradeWebMessage> consumerRecord : records){


            messageList.add(consumerRecord.value());
            // But just to make sure, let's see if hand-validating it works
            Validator validator = validatorFactory.getValidator();
            Set<ConstraintViolation<GFIRTradeWebMessage>> errors = validator.validate(consumerRecord.value());
            if (errors.size() > 0) {
                logger.debug("But there were validation errors!" + errors);
            }


        }
        //process the messages
        messageProcessorService.processMessage(messageList);

        // latch.countDown();
    }

    public CountDownLatch getLatch() {
        return latch;
    }


    @Autowired
    LocalValidatorFactoryBean validatorFactory;


    @Bean
    public MessageHandlerMethodFactory kafkaHandlerMethodFactory() {
        DefaultMessageHandlerMethodFactory factory = new DefaultMessageHandlerMethodFactory();
        factory.setValidator(validatorFactory);
        return factory;
    }

    @Override
    public void configureKafkaListeners(KafkaListenerEndpointRegistrar registrar) {
        registrar.setMessageHandlerMethodFactory(kafkaHandlerMethodFactory());
    }
git-issue: an offline-friendly project management tool with potential
Tags: programming, git, productivity, offlinefirst
Published: 2020-04-04 19:38:31

---
title: git-issue: an offline-friendly project management tool with potential
published: true
description:
tags: #programming #git #productivity #offlinefirst
---

#### Background

Before COVID-19, I've been reviewing issues on a bus to work. My team used gitlab, so without a stable internet connection on a bus, I wasn't able to concentrate. I started look for an offline friendly issue management tool and narrowed the contenders to (i) [git-issue](https://github.com/dspinellis/git-issue) and (ii) [git-bug](https://github.com/MichaelMure/git-bug).

I decided to give a shot at [git-issue](https://github.com/dspinellis/git-issue) because I liked its simplicity. My first impression of git-issue was basically an issue manager powered by git. It provided command-line tools for basic issue management like creating, editing, removing, listing issues and comments and also had additional features like logging time estimates/spent and setting milestones.
It was written in shell script.

#### The Pros and Cons List

After 2 weeks of using it here is my pros and cons list.

Pros:

- lightweight
- based on git
- supports interacting with github/gitlab

Cons:

- github/gitlab integration is buggy
- written in shell script so hard to read & debug the src code

#### My Honest Opinion

My initial motivation was doing project management when I have don't have access to the internet, e.g., on a bus. I couldn't replace my existing workflow--I used to use [GitLab's issue board](https://about.gitlab.com/stages-devops-lifecycle/issueboard/)--because there were [tons of project management features GitLab provided](https://docs.gitlab.com/ee/user/project/issues/) that I didn't realize I was dependent on. For example, I wanted

- customizable board view
- markdown preview
- issue number auto-completion the editing view

Also, I realized (i) connecting to the internet on a bus wasn't as hard via tethering and (ii) there are no severe consequences of editing issues concurrently (as in using a cloud tool). For coding (ii) is not true since doing so will likely crash your program.

I ended up mostly using git-issue when I know when exactly what to do, e.g., comment on a specific issue. While I still think it has a lot of potentials, for now, it has not replaced my goto tool, the gitlab issues/board pages on the browser.

#### Misc.

- git-issue [helper scripts for fuzzy searching issues (and editing)](https://gist.github.com/mjyc/b33ea80309161328716e59f665dc595f)
Webcam replacement advice needed
Tags: help, discuss, equipment, camera
Published: 2020-04-04 19:14:32

Hey there!

Like most of us, I find myself needing to up the ante equipment wise at the home office. I've landed a nice setup with monitors and a HyperX Quadcast mic, I'm waiting for a mechanical keyboard to land, as well as a nice, ergonomic mouse with extra buttons to minimize shifting hands from mouse to keyboard.

What I don't have is a nice camera. Sure, we all dream about that HDR 4K 60fps sweetness, but my budget is nowhere near that. I also see that the market is sucked dry for conventional webcams, especially the nicer ones like the Logitech 922, which to be honest, is also a bit pricey.

I am looking for creative, good alternatives that will work well on Ubuntu 18.04 onwards. 

My own thoughts so far has been to use my mobile phone, as that camera is better than the one in my laptop, but the software solutions I have come across sucks in some way, if they work at all.

I have also peeked at Action Cameras and Camcorders, but those camcorders get pricey fast. I still have a hope regarding actioncams, but their documentation is often very lacking with regards to supporting live streaming video to a computer over a cable, as in allowing the computer to use the camera as a video source. Another issue I've read about is that many of the actioncams has a lens leaning heavily towards a fish eye view for more snappy action videos.

Anyone out there have experience with using alternative cameras as webcams for video calls, as well as for screencast recording? Ideally Full HD 1080p @ >=30fps and HDR, but HDR is less important. Cheap 1080p actioncam without pronounced fish eye is possibly my best bet, but impossible to find reading specs in webshops...

Any suggestions or alternatives? Please share your thoughts and/or setup in the comments.

Thanks!
Combinatorics
Published: 2020-04-04 18:53:57

Combinatorics is the combination of outcomes from a finite set.
There are two major types of combinatorics.
- Permutation
- Combination
Factors that differentiate each combinatorics are
- Order
- Repetition
- Entire set/Subset

Permutation and  combination both have to do with the number of different ways to arrange or pick certain elements of a set

The major differences between the two are 
- Order: For Permutation, how the set/subset is arranged or the order is very critical while for combination, the order is irrelevant. For example, trying to decode the passcode of a locker has a lot to do with how the elements/letters would be arranged. Therefore,  this is a permutation problem
- Double Counting: For Permutation, no matter how identical two subsets are in terms of elements( not order), there are still considered distinct sets. Unlike the combination, where each combination of sets should not be identical in elements. An example is a collection of the following subsets: AB, BA, AC, CA, BC. Although there are 5 permutations, there are just 3 combinations because for combinations AB & BA are not distinct selections. This is why there would be more permutation selections than combination selections in a given set. Therefore, permutation does not take into account double counting

Permutation can be split further into two
- The vanilla Permutation
- Variation

1. Vanilla Permutation in the sense that all elements in the set would be used in the selection ways problem.

2. Variation, as the name implies, infers that we pick and arrange some elements in the given set i.e a subset(s) from a total set(n)

For example,  **how many ways can the sets: A, B, C, D, E be arranged?** can be a vanilla permutation problem while **how many ways can the sets: A, B, C, D, E be arranged in twos?** is a variation problem

I would like to say that combinations can be confused with variation permutation. One major difference is if the order is relevant. ( A second difference is obviously the formulas)

It is also good to know that both permutations and combinations have different formulas based on if the elements in question should be repeated or not. _(combination problems with repetitions are very hard to identify)_

Let's talk about the formulas. Take note of the difference in the order and repetition constraints from the image below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jutgit2ca2s9ty9axgg4.png)


I also created a decision tree to help as well
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ioi11delamlrirhb1j3.png)


The above information is not exhaustive therefore I would update as I learn more about the topic.
Memmo: Don't leave home without having it installed!
Tags: twiliohackathon, covid19, flutter, node
Published: 2020-04-04 18:52:53

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)

Hello, everybody! We're Juan (@sjdonado), Roberto and Wilson. We are  Systems and Computational Engineering students from Colombia.

We are very excited to participate and create something that will help others.

So, this is our first publication about #twiliohackathon. Every week we'll be posting 2 or 1 updates of the project.


## What We built
We are building a mobile application called Memmo to generate alerts in case any user has been too close to a person who now has covid-19.

We will collect the geolocation of each user (4am - 10pm). When new cases of COVID-19 are reported we will search for each new patient on our platform. If we find one, we will notify other users who have been within 2 meters of the patient in the last 14 days.


### How does it work?

## Demo Link
Soon

## Link to Code
- Backend: https://github.com/sjdonado/memmo_back
- App: https://github.com/krthr/memmo_app

## How We built it (what's the stack? did we run into issues or discover something new along the way?)
- Backend
  - NodeJS
  - Firebase

- App:
  - Flutter

- Twilio => SMS Auth, SMS Messages, Calls

## Additional Resources/Info
ClickConnect
Tags: twiliohackathon
Published: 2020-04-04 18:45:52

---
title: ClickConnect
published: true
description: Better Collaboration
tags: #twiliohackathon
---

## My Idea
Having been limited to Zoom and Webex meetings for the last 3 weeks, I have seen some of the issues with collaboration software as it sits now for some tasks. Screen share can be bulky. Application share is limited to a single application. My plan is to utilize a borderless real-time collaboration through the Twilio Video API. I hope to create a platform that will allow for individual applications to be delivered and viewed just likely they were to be used natively.

##Stack
Still early in the development process (I am going to working on sketches today), I believe the stack will simply be utilizing React with Twilio Serverless services (when in Rome, I suppose). I still need to figure out pricing and ensuring this is economical for a solution, but an initial price estimate should have no problem with running this.

##Security
A big question with any real-time communication is security. The first part of the security plan is to utilize the Twilio Authy service to set up 2FA, which will be a requirement for users. The Twilio API already includes encryption for the endpoints, so nothing to worry about there. Past that, I will be working on a list of good to have user options that increase security by default and design considerations that would offer the most secure experience possible.

##Repository
I will be doing all of the work from [https://github.com/jakesweb/clickconnect](https://github.com/jakesweb/clickconnect).

Let me know if anyone has any thoughts or opinions on this, or just wish me luck down in the comments. This is my first hackathon, so it will be new to me building with a deadline and goals (good experience to have though). I can't wait to see what everyone else is going to make!