teleren/devto huggingface dataset:
Arrow Functions in JavaScript for Beginners 
Tags: javascript, beginners, functions, es6
Published: 2020-02-25 03:28:19


A function is a subprogram designed to perform a particular task. Functions combined, become the main “building blocks” of the program.  
JavaScript has many built-in/ anonymous functions. We can create functions of our own as well.

Arrow functions, introduced in the latest version of JavaScript ES6, provides a concise way to write functions in JavaScript. 

![ES5 vs 6](https://i.imgur.com/pZio0Wjl.png)

"Var", which is a way to declare a variable, is used in ES5. Functions are written using the "function" keyword with arguments. These functions have existed since the beginning of JavaScript.

ES6 allows you to declare a variable using "const" and "let". Arrow functions can be used, making writing code shorter! The same code(top) can be written shorter with the arrow method (bottom). As shown in the diagram, a lot of the syntax required in ES5 is optional for the ES6 arrow method. The parenthesis is optional when there is one argument, and the braces and keyword "return" are optional.  
 
 
Named Functions into Arrow functions:
### **Example 1**:
![ES5 1st function](https://i.imgur.com/000UuHWh.png)

Above is a regular function (ES5). The function takes a name "message" and returns "Green Light District". When we "console.log(message())", the message shows up in the console. 

![ES5 1st function in Arrow](https://i.imgur.com/ag5C8xSh.png)

Above is the same function, using the arrow method. It has the same output but shorter code! In order to change the first function into an arrow function, the function name has to be turned into a variable. The arrow is created with the equal sign and greater than symbol, "=>". The string "Green Light District" is being returned implicitly after the arrow symbol.    

### **Example 2**:
![ES5 2nd function](https://i.imgur.com/LpPOsbHl.png)

Another function that takes in an argument and interpolates the argument with a string in the result. Below is the function turned into an arrow function:

![ES6 2nd function](https://i.imgur.com/ABkPZ3gl.png?1)
 
### **Example 3**: 
![ES6 3rd function](https://i.imgur.com/AXvVMxXl.png)

The function above is an arrow function taking in two arguments. There will be two argument within the parenthesis, after the variable is declared. Both "a" and "b" will be interpolated after the arrow sign.  

As I mentioned before, JavaScript has many built-in or anonymous functions. These functions can also be written as arrow functions. 
### **Example**:

![ES6 4th function](https://i.imgur.com/IYsLPl3h.png)

As an arrow function:
![ES6 4th function](https://i.imgur.com/UOKn5tYh.png)

Given an array of objects, the .map method can be used to take in an array of numbers and creates a new array containing the return value of your choice. 

This arrow function, as the others above have replaced the "function" keyword effectively with the arrow "=>" and had optional syntax's, making concise code.
Why it's time to use Vue.js?
Tags: vue, codenewbie, beginners, webdev
Published: 2020-02-25 02:37:29

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue is one of the easiest front end frameworks to start building UIs with. Here's why we should starting using Vue for our front end apps.

# Easy to Get Started

It can be used with a `script` tag or we can also use the Vue CLI to build a web UI.

This means that it's suitable for quick prototypes, enhancing legacy apps, and full production apps alike.

Vue libraries can also be included with a `script` tag, so we can use them without any build step. This is something that's unique to Vue. There're any other popular frameworks that can use libraries included from a `script` tag.

For instance, the following is a very simple Vue app:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">{{name}}</div>
    <script>
      new Vue({
        el: "#app",
        data: {
          name: "James"
        }
      });
    </script>
  </body>
</html>

```

As we can see, it's amazing how simple it is. We just include Vue with a `script` tag in the `head` and then we add another `script` tag to instantiate Vue. Then we got our own Vue app.

# Routing and State Management are Covered by Official Libraries

Vue Router is the official routing solution and it's included as an option when we run the Vue CLI to create an app.

This is the same as the Vuex state management library.

With those, we got the most important parts of a single-page front end app covered. We don't have to decide on which libraries to use ourselves, which saves us lots of time and headaches.

# Fast Rendering

Vue has the virtual DOM which makes rendering fast since Vue diffs the old DOM with the one that it's going to render and make incremental changes based on the old DOM.

The Vue library with Vue Router and Vuex is only 30KB gzipped. This means that apps load faster and more speed for users.

# Big Ecosystem

The ecosystem is also good as more teams are using it for their production apps. Lots of Stack Overflow questions are being asked and answered. Also, lots of libraries like Material Design libraries and Bootstrap are made for it. There's also a big list of other libraries made for Vue [here](https://github.com/vuejs/awesome-vue).

Creating an app will take no time with all this support.

# Conclusion

Vue is a very good front end framework that takes the deficiencies of other front end frameworks and libraries and made them better. The ecosystem is also big that there're people that'll answer questions and libraries to help us do anything.

As a result, it's a great framework to start building UIs today.
The Best Frameworks to Build a Minimum Viable Product
Tags: career, startup, productivity
Published: 2020-02-25 02:24:13

If you're working on a startup, you're probably don't have lots of money or time. You have to release a prototype as quickly as possible and show your prospects what you got.

We'll look at the best frameworks to build your minimum viable product currently.

# Front End Frameworks

You can build a minimum viable product with a decent interactive front end with some frameworks and libraries.

## React

React is very popular as a front end library because we can build a lot with it in a short time. It lets us build a rich UI with the libraries that are available for it.

It's often used with React Router for routing and Redux as its state management solution.

There're also lots of UI libraries made for it. Bootstrap, Material design, etc., are all available for React without creating them from scratch.

With those issues out of the way, we can build the UI in no time.

## Vue

Vue is up-and-coming and provides a more complete solution for building front ends. It comes with Vuex for state management and Vue Router for routing as options.

We can use it to build a UI quickly with all the libraries that are available.

# Back End Frameworks

To make your app useful, you have to make it store data. We have to do this on the back end.

To make building back ends easy, we can use frameworks to do this.

## Rails

Rails are the back end framework that many other back-end frameworks take their inspiration from.

You can use it to create an app that makes a database and save data to it with a few commands.

Debugging is also quick and easy with the Rails console. It's a great way to add data and test it without doing the same thing from the front end.

Also, it has lots of libraries made for it to do things like file upload. Sending emails is a feature that's built-in.

It has a big community so you can get help fast.

## Express

Expres is a back end microframework for Node.js. It lets us build simple apps without much effort. It also has lots of libraries to extend its functionality to do what we want.

You have to add your own database manipulation solution and it doesn't come with any way to debug things easily on its own, so it's good for simple apps, which a minimum viable product should be.

# Conclusion

To create a minimum viable product, we've to use frameworks to build a prototype fast. It's good to stick with the popular frameworks that let us build things fast.

For front end, this would be React and Vue, for back end Rails and Express does the job.
Explain the Externalizable interface?
Tags: java, tutorial
Published: 2020-02-25 01:57:09

The Serializable interface gets us automatic serialization capability for objects of our class. On the other hand, the Externalizable interface provides a way to implement a custom serialization mechanism.

A class that implements the Externalizable interface is responsible to save and restore the contents of its own instances.

The Externalizable interface extends the Serializable interface and provides two methods to serialize and deserialize an object, writeExternal() and readExternal().

Happy Learning! 😇
Easy as a pie Big O notation. Part 1: Time.
Tags: beginners, codenewbie, webdev, algorithms
Published: 2020-02-25 01:24:06

In coding, as in life, there's always more than one way to approach problems as long as you're creative enough. But how would you know which one of the bunch is the **best**?

_Note: Also, keep in mind that the best is a relative term. You define this according to what your needs are. Faster? Less memory use? More readable?_

That's when "the Big O notation talk" comes into the picture.

###What?

Basically, it’s a way of generalizing our code and comparing it and its performance to other pieces of code. With big-O we can talk formally about the runtime of an algorithm as the inputs grow. 
It's important to note, that we care about the trends and not details.


###Why?

Knowing the big-O of our code allows us to:
- Have a more precise way to talk about performance
- Lets us identify parts of the solution that might be inefficient
- Help us discuss trade-off of several approaches 


###How?

We count the number of operations that our functions need to be executed.

More formally, we can say that algorithm is  *O(f(n))*  if the number of simple operations that we have to do is eventually less than a constant time *f(n)*  as n increases.
*f(n)* means it could be linear, *f((n)=n^2 )* means it could be quadratic, or *f(n) =1)* means it is constant. 
An *O(1)* would mean that as n grows, it has no change reflected in runtime. 
An *O(n)* operation inside of an *O(n)* operation equals *O(n^2 )*. (Nested loops are a great example of this).

Regardless of the exact	number of operations, they tend to grow roughly proportionally with n. So if n doubles, the number of operations will also roughly double.


###Can we make it simpler?

There's something important to take into consideration to simplify a big O. At the end of the day, as we said before, we're looking to spot trends and not details. This means we're interested in the big picture, which translates to: 
- We can take out the constants. We’re looking at the big picture so *O(2n)* can be translated into *O(n)* and *0(500)* can be *O(1)*
- Small terms are not important either. Again, think of the big picture. If we have *O(n+10)* we can forget about 10 and translate it into *O(n)*.


###Important tips to look out for

- Arithmetic operations are constant
- Variable assignment is constant
- Accessing elements in an array by index or object is also constant
- In a loop, complexity is the length of the loop times the complexity of what’s inside of it


###Which one is best?

![complexity table](https://dev-to-uploads.s3.amazonaws.com/i/gqdikmy892uf1m9gdl2o.png)
Ideally, we should be striving to get *O(1)*, *O(log n)* or *O(n)*.

*O(log n)* refers to space complexity, which will be addressed in the second part of this article series.

Got something to add? Please feel free to [reach out](https://twitter.com/miss_elliev) for any question, comment or meme.
Run npm NodeJS scripts with Fiddler
Tags: fiddler, node, npm
Published: 2020-02-25 00:57:11

When you have an npm script that does use a NodeJS library (through gulp for example) that does web request that you want to monitor with Fiddler, checkout this simple script!

When Fiddler is started, it uses the http://localhost:8888 by default as the proxy port. If this port is taken you will see the following message:

![Fiddler alternative proxy port](https://dev-to-uploads.s3.amazonaws.com/i/91sz7l8cyculpkofet7f.png)

To see the port used by Fiddler, go to `Tools –> WinINET Options... –> LAN settings –> Advanced`

Now create the Powershell script `fiddler-npmscript.ps1` next to your `package.json` file:

```powershell
param(
    [string]$NpmScript = "watch", 
    [int]$ProxyPort = 8888
)

$env:https_proxy="http://localhost:$ProxyPort"
$env:http_proxy="http://localhost:$ProxyPort"
$env:NODE_TLS_REJECT_UNAUTHORIZED=0
npm run $NpmScript
```

This script can be called as `.\fiddler-npmscript.ps1` when using the `watch` script with the default proxy port 8888.

When using for example the `build` script on port `2046` call the script as `.\fiddler-npmscript.ps1 build 2046`.
Day 86: Look Deeper
Tags: hiphop, code, coding, lifelongdev
Published: 2020-02-25 00:09:08

_liner notes_:
- Saturday : Did a solo show a few hours after getting in from Atlanta. So yeah, I was tired. haha. I think show went really well. Of course you can check out the show's recording at https://kNOwBETTERHIPHOP.com

![Radio show episode image with Huey P Newton sitting in a chair the words February 22 2020, Whole Lotta 2s](https://dev-to-uploads.s3.amazonaws.com/i/cuekdiamoflkv5yjmb5z.jpg)

- Sunday : Went to my parents' place real quick. Mowed my lawn. Did some post radio show work. Got my laundry done. Did some research on the web to look deeper into some side projects. Then I pretty much rested.

- Professional : Reviewed some documentation code. It's about 3 years old and I'll be working on updating it. Did some research for my next blog post. Spoke with my manager. Had a good talk. Pretty good day. Oh and I started working on my trip to Europe at the end of March.

- Personal : Fixed an issue I found with my email not sending my messages. Put together a list of some new things I want to add to my personal site: https://lifelong.dev 

![Sunset in the Moab, Utah desert with the sun shining through a stone arch](https://dev-to-uploads.s3.amazonaws.com/i/1co3eq169e0hlj18rfi3.png)

Going through some tracks for the radio show. Want to get an early start and do a little each day.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube dWZvknaXk-4 %}
Ignore Directories in Tree
Tags: bash, zsh, linux, unix
Published: 2020-05-28 14:42:49

---
title: Ignore Directories in Tree
published: true
date: 2020-02-25 00:00:00 UTC
tags: bash, zsh, linux, unix
canonical_url: https://tech.serhatteker.com/post/2020-02/ignore-dirs-in-tree/
---

`tree` displays the structures of the given directory.

For instance below command,

```bash
$ tree src/
```

would show something like below:

```
src
├── core
│   ├── __init__.py
│   └── __pycache__
│       └── __init__.cpython-36.pyc
└── templates
    └── .gitkeep

3 directories, 3 files
```

If no directory given it shows the current directory's structure:

```
.
├── config
│   ├── __pycache__
│   │   ├── settings.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── wsgi.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── .editorconfig
├── .env
├── .gitignore
├── LICENSE
├── Makefile
├── manage.py
├── .pytest_cache
│   ├── CACHEDIR.TAG
│   ├── .gitignore
│   ├── README.md
│   └── v
│       └── cache
│           ├── lastfailed
│           ├── nodeids
│           └── stepwise
├── pytest.ini
├── README.md
├── requirements.txt
├── run
│   ├── db.sqlite3
│   └── .gitkeep
├── Session.vim
├── src
│   ├── core
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       └── __init__.cpython-36.pyc
│   └── templates
│       └── .gitkeep
└── tests
    ├── .gitkeep
    └── __pycache__
        └── basic_test.cpython-36-pytest-5.4.1.pyc

12 directories, 29 files
```

To ignore directory/directories you can give `-I` flag. For instance to ignore `__pycache__` directories:

```bash
$ tree -I __pycache__
```

```
.
├── config
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── .editorconfig
├── .env
├── .gitignore
├── LICENSE
├── Makefile
├── manage.py
├── .pytest_cache
│   ├── CACHEDIR.TAG
│   ├── .gitignore
│   ├── README.md
│   └── v
│       └── cache
│           ├── lastfailed
│           ├── nodeids
│           └── stepwise
├── pytest.ini
├── README.md
├── requirements.txt
├── run
│   ├── db.sqlite3
│   └── .gitkeep
├── Session.vim
├── src
│   ├── core
│   │   └── __init__.py
│   └── templates
│       └── .gitkeep
└── tests
    └── .gitkeep

9 directories, 24 files
```

To exclude multiple directories you can use pipe, `|`:

```bash
$ tree -I '__pycache__|*test*'
```

```
.
├── config
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── .editorconfig
├── .env
├── .gitignore
├── LICENSE
├── Makefile
├── manage.py
├── README.md
├── requirements.txt
├── run
│   ├── db.sqlite3
│   └── .gitkeep
├── Session.vim
└── src
    ├── core
    │   └── __init__.py
    └── templates
        └── .gitkeep

5 directories, 16 files
```

This command will skip `__pycache__` and all directories that match `*test*` regex expression.

All done!
Sending SMS Messages for Form Data with RingCentral and Netlify
Tags: staticsites, javascript
Published: 2020-02-25 18:41:26

---
title: Sending SMS Messages for Form Data with RingCentral and Netlify
published: true
date: 2020-02-25 00:00:00 UTC
tags: static sites,javascript
canonical_url: https://www.raymondcamden.com/2020/02/25/sending-sms-messages-for-form-data-with-ringcentral-and-netlify
cover_image: https://static.raymondcamden.com/images/banners/oldpayphone.jpg
---

A few days ago I blogged about using [RingCentral’s APIs](https://developers.ringcentral.com/) to send a SMS message when your Netlify-based site builds ([“Adding a SMS Alert for Netlify Builds with RingCentral”](https://www.raymondcamden.com/2020/02/22/adding-a-sms-alert-for-netlify-builds-with-ringcentral)). I thought I’d follow it up with a related example - sending a SMS with form data. To be clear, this post isn’t too much different from the previous one, but I thought it was an interesting enough example to share.

Last year I [blogged](https://www.raymondcamden.com/2019/01/15/customized-form-handling-on-netlify-with-serverless-functions) about using Netlify serverless functions for form submissions. In that post I detail the data sent to the serverless payload (since, ahem, Netlify still doesn’t document this). Based on that, here’s the code I used to take the form submission and send it as a SMS:

```js
const SDK = require('@ringcentral/sdk').SDK;

// used for sms
RECIPIENT = process.env.SMS_RECIP;
RINGCENTRAL_CLIENTID = process.env.RINGCENTRAL_CLIENTID;
RINGCENTRAL_CLIENTSECRET = process.env.RINGCENTRAL_CLIENTSECRET;
RINGCENTRAL_SERVER = process.env.RINGCENTRAL_SERVER;
RINGCENTRAL_USERNAME = process.env.RINGCENTRAL_USERNAME;
RINGCENTRAL_PASSWORD = process.env.RINGCENTRAL_PASSWORD;
RINGCENTRAL_EXTENSION = process.env.RINGCENTRAL_EXTENSION;

var rcsdk = new SDK({
  server: RINGCENTRAL_SERVER,
  clientId: RINGCENTRAL_CLIENTID,
  clientSecret: RINGCENTRAL_CLIENTSECRET
});
var platform = rcsdk.platform();

exports.handler = async (event, context) => {

  let payload = JSON.parse(event.body).payload;
  let name = payload.data.name;
  let email = payload.data.email;
  let comments = payload.data.comments;

  console.log(`name, ${name}, email, ${email}, comments, ${comments}`);

  const text = `
A form was sent by ${name} (email address of ${email}), with these comments: 
${comments}`;
  await sendSMS(text);

}

async function sendSMS(text) {

  await platform.login({
    username: RINGCENTRAL_USERNAME,
    password: RINGCENTRAL_PASSWORD,
    extension: RINGCENTRAL_EXTENSION
  });

  let resp = await platform.post('/restapi/v1.0/account/~/extension/~/sms', {
    from: {'phoneNumber': RINGCENTRAL_USERNAME},
    to: [{'phoneNumber': RECIPIENT}],
    text: text
  });
	
  let data = await resp.json();
  return data;
}

```

Basically - I create a formatted string and pass it to a function to handle sending the SMS. The result is much like my previous example:

![Screen shot of text sent by RingCentral](https://static.raymondcamden.com/images/2020/02/nsms.png)

As a reminder, that text watermark in front would _not_ be there in a production-released RingCentral application.
Situation: A new computer
Tags: watercooler, discuss
Published: 2020-02-24 23:45:40

Recently, I installed a fresh installation of Ubuntu on my eight-year-old laptop. Specifically, I used - don't judge me - Elementary OS. Before I wiped the hard drive, I made a list of the tools I had on my laptop and used frequently. The list included developer tools such as postman and node, utilities such as spotify and dropbox, and office software like LibreOffice and Inkscape.

> What are the very first tools you just need to install on a fresh operating system?
Google released a Lighthouse extension for Firefox!
Tags: webdev, firefox, google, news
Published: 2020-02-24 23:27:30

Get it while it's [hot](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/).

No devtools version yet (real [or planned](https://github.com/GoogleChrome/lighthouse/pull/10332#issuecomment-587960003)), that's a more significant rewrite.  This extension can only audit public websites via their API.  But that's still great!

Source: [9to5google](https://9to5google.com/2020/02/24/google-lighthouse-extension-firefox/).
Blog[0] = "My First_Blog"
Tags: rails, productivity
Published: 2020-02-24 23:10:50

Hello Everyone, I'm new to the dev.to community, but I am glad I'm here. Let me introduce myself, my name is David, I went to college pursuing an engineering degree, I was doing pretty well, while working part-time, but I realized there were many uncertainties in that option. Not only was I in an area where I can't grow in my interests, I was more put on this direction by other people, so I wasn't sure if I was in the right place. As I was searching for a path that would involve my interests and something I can see potential and a future in, my uncle introduced me to coding and I fell in Love. 
    My journey started off with a simple code I read upon on, and watched some videos on it. I was quite intrigued by it, I was able to try it out and run some simple code on my own, collaborating with the language as a whole and producing a result. 
   It caught my attention, because this was my first time seeing the structure of how things work behind the visual of a software. Back then I still lacked understanding, and didn't understand much of the code... but still decided to play around, and searched a place where I can receive a better understanding and grow.
    And now I'm here, this is my second month in a full stack immersive software curriculum. So far I have been jamming my head in the wall, getting through Ruby, SQL, Active Record, Sinatra, Rack, and now I'm running my journey in Rails.
    Even though it has been a hard journey, I am glad that I'm on this journey, the funny thing is every-time I learned a language, I found another gem or language that practically replaced all my hard work, but I realize even though there is magic out there, it's good to know the foundational stuff....in case you catch a bug. Anyway I am glad to meet you all, and pray that I finish my journey!!!!!