teleren/devto huggingface dataset:
Interesting Things About Javascript Arrays
Tags: javascript, beginners, node
Published: 2020-09-11 15:46:59

---
title: Interesting Things About Javascript Arrays
published: true
description: Some interesting things about array in javascript =)
tags: #javascript #beginners #discuss #node 
cover_image: https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/237/thinking-face_1f914.png
---

A handful of interesting facts about javascript arrays.
## A javascript array is just an object.
```
let arr = [1, 2, 3];
let arr2 = {
  '0': 1,
  '1': 2,
  '2': 3
}
```
The only difference is that arr inherits from the Array prototype so it has all the array methods(map, reduce, etc...) and the length property.

## You can create new properties
Because Arrays are just objects, they're slow when compared to arrays in other languages and you can create new properties.
```
arr.total = function() {
  return this.reduce((acc, i) => acc + i, 0)
}
console.log(arr.total()); // 10 
```
## The length is not necessarily the length 
It's just the last element index + 1;
```
let countries = [];
countries[1000] = 'Brazil';
console.log(arr.length); // 1001 🤷
```
## You can change the length directly
You can remove elements in an array just by changing the length
```
let arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]
```  
You can also add new slots just by changing the length of the array.
```
let arr = [1, 2, 3, 4];
arr.length = 100;
console.log(arr); // [1, 2, 3, 4, 96 empty items]
```
## No index out of bounds errors
You don't have index out of bounds errors in javascript, any index not initialized or non-existent it will return undefined.
```
let arr = [1, 2, 3];
console.log(arr[999]); // undefined
```
## Map is not called on empty items
Map, filter, reduce, etc.. doesn't work in empty(not initialized) items 
```
let arr = Array(5); // [5 empty items] 
arr = arr.map(() => 1);
console.log(arr); // [5 empty items]
```

## empty !== undefined
Empty is not the same as undefined, in other words, an index with an undefined item is not empty.
```
let arr = [undefined, undefined];
arr = arr.map(() => 1);
console.log(arr); // [1, 1]
```
But if you query for an empty item the returned value is always undefined
```
let arr = new Array(3);
console.log(arr[2]); // undefined
```
## Initializing items 
You can initialize all object with Array.from
```
let arr = Array.from(Array(10));
arr = arr.map(() => 1); // map will work now
// Array.from can receive a second argument that is a map
let arr = Array.from(Array(10), () => 1);
console.log(arr); // same result as above without creating the intermediate array
``` 

If you have any more interesting facts about javascript arrays please leave a comment :)
Building FullStack Serverless Application using AWS-SAM — Part 4
Tags: aws, serverless, vue
Published: 2020-09-11 15:46:00

Part 4/5 - https://www.youtube.com/watch?v=-hIG2B4tNm0

Have kept my accountability this far just 1 more episode to knockout. I will be glad if there is traction but this whole exercise is more about me than the audience and to follow the inner invocation and delivering on commitment.

Another article that I wrote based on this Exercise - https://dev.to/vinodhthiagarajan1309/how-to-learn-vue-js-quickly-fj7
Cloud Startup Patterns
Tags: startup, discuss, writing
Published: 2020-09-11 15:44:50

I am working on writing a new article about Cloud-native startup patterns.  To start, I create an outline.  

How do you outline?  I use mind mapping, rather than traditional document-based outlining. Lately I've been using the [MindMup](Mindmup.com) tool.  

What about you - how do outline? What tools do you use?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i6gac5vz44bxfwyrkn61.png)
How to learn Vue.js Quickly
Tags: aws, vue, serverless
Published: 2020-09-11 15:34:27

This is not exactly the entire topic about Vue but it's about, for a non-UI developer how long does it take to get up and running with Vue.js. This came up as a part of my Serverless Series and I wanted to showcase a complete package of a Serverless application. When I peeked into the UI world in 2020 and researching what it has to offer, I evaluated React first and moved to Vue and got what I want.

This is not a biased view of Vue because now I think that React is equally or even more powerful. But it all boils down to where you learn from and how concise and modular the material is. I trust my Udemy course finding instincts and also I search for tutorials on other platforms too. 

Believe me, there is much more material out there to learn React and Angular compared to Vue. But the hours of training range from 7+ to 40+ hours. They do cover fine-grained details of React starting from Basics to much more advanced topics like Redux and Webhooks. But I was not sure what all I needed to know in the first place, like do I need to know about Redux? Typescript? How long do I need to spend to bring up a simple Single Page Application which will hardly take 1 hr for a seasoned UI developer to give a proto/wireframe? 

I even started learning React and after an hour or so, these videos were not taking me anywhere. So stumbled upon more comparisons and read this phrase by luck in on the blogs and this is how it goes,

`When You Want to Hire a talented Vue.js Developer, just look for a talented Javascript developer because he can get the swing of Vue in a week or so..`

Lines like above gave me more confidence to go with Vue. That's all it took and then again I stumbled upon `VueSchool` and `VueMastery` as they were recommended on the Vue website to learn from. I went with [VueMastery](https://www.vuemastery.com/) because all it took for me to put together a production-grade Single Page Application was 2 hrs.

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

The site offers 3 paths and I took the Beginner Path which has about 10 hrs of materials spanning over 7 modules and each module is complete in its own way and I just took the first 2 courses and got what I want.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5x8yqfugary5g63ex38u.gif)

The above shows a very simple yet functionally decently wired UI that I was able to produce. 

Even though the video link is a part of a bigger module this is exclusive to Vue and you will get the context of it, my terminologies will be sloppy as I'm not a UI developer. But if you are a Backend Developer like me and want to wire something quickly to showcases stuff, Vue was very promising.

I do talk about other UI hacks for NON - UI developers, let me know what you think.

[![FullStack Serverless - Building UI with Vue](http://img.youtube.com/vi/-hIG2B4tNm0/0.jpg)](http://www.youtube.com/watch?v=-hIG2B4tNm0 "FullStack Serverless - Building UI with Vue")


Vinodh
Hacktoberfest Workshop Kit: How to Submit Your First Pull Request on Github
Tags: hacktoberfest, github, codenewbie, beginners
Published: 2020-09-11 15:31:03

Are you looking to share [Hacktoberfest](https://hacktoberfest.digitalocean.com/) with new learners? We've got just the resource for you!

![Hacktoberfest Workshop Kit](https://dev-to-uploads.s3.amazonaws.com/i/f2r3h3aximtlh1sdmelp.png)

[This workshop kit](https://www.digitalocean.com/community/meetup_kits/hacktoberfest-workshop-kit-how-to-submit-your-first-pull-request-on-github) helps an instructor guide an audience without a background in version control or open source projects through the steps of submitting a pull request from beginning to end in roughly thirty minutes. 

Attendees will finish the workshop with an understanding of version control, open source, Git, and GitHub. 

Feel free to use this resource at your next meetup or educational Zoom meeting today, and Happy (almost) Hacktoberfest!
Send and Receive message in WhatsApp using twilio & python
Tags: python, flask, twilio
Published: 2020-09-11 15:25:14


Previously, i made WhatsApp automation using python selenium, this time i thought to do more with it and used twilio to send and receive messages from WhatsApp using twilio and flask 
  
 prerequisite:
 ```sh
$ pip install flask
$ pip install twilio
install ngrok
make twilio trial account
```

first for most integrate your number with twilio sandbox

### app.py

packagae to  import :

```
from flask import Flask, request ,render_template
from twilio.twiml.messaging_response import MessagingResponse 

from twilio.rest import Client 

```

For sending message  
### app.py

```
@app.route("/" , methods = ['GET' , 'POST'])

def index():
    
    if request.method == "POST":
        fname = request.form['fname']
        lname = request.form['lname']
        pname = request.form['pname']


        sid = 'account_sid'
        auth = 'auth_token'

        client = Client(sid,auth)

        message = client.messages.create(
             from_='whatsapp:+14155238886',  
             body='hello ' +  str(fname) + " " +  str(lname) +  ' welcome to Tanzible',   
             to='whatsapp:+91'+str(pname)
        )

        return 'registration successfully'

    return render_template('index.html')
```


### for receiving message 

first we have to configure ngrok to put localhost to on public address

so download ngrok and install it via command line where is you ngrok file
```
./ngrok http 5000 
```
5000 is by default port given by flask 

```
def msg(request):
    if request.method == 'POST':
        resp = MessagingResponse()
        resp.message("Thank you for contacting us! Our team will shortly in touch with you ")
        print(resp)
        return str(resp)
        

```


That's all folk ! 

check code in my GitHub https://github.com/cyber-hoax/WhatsApp_twilio
🚀10 Trending projects on GitHub for web developers - 11th September 2020
Tags: react, javascript, webdev, css
Published: 2020-09-11 15:18:18

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Boilerplate App for SaaS Product

Open source web app that saves you weeks of work when building your own SaaS product.

{% github async-labs/saas %}

---

### 2. react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React

{% github atlassian/react-beautiful-dnd %}

---

### 3. VvvebJs

Drag and drop website builder javascript library. By default the editor comes with Bootstrap 4 and Widgets components and can be extended with any kind of components and inputs.

{% github givanz/VvvebJs %}

---

### 4. eleventy

A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML.

{% github 11ty/eleventy %}

---

### 5. better-scroll

BetterScroll is a plugin which is aimed at solving scrolling circumstances on the mobile side (PC supported already). The core is inspired by the implementation of iscroll, so the APIs of BetterScroll are compatible with iscroll on the whole. What's more, BetterScroll also extends some features and optimizes for performance based on iscroll.

{% github ustbhuangyi/better-scroll %}

---

### 6. Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript.

{% github captbaritone/webamp %}

---

### 7. urql

A highly customisable and versatile GraphQL client

{% github FormidableLabs/urql %}

---

### 8. Reactjs-popup

Reactjs-popup is a simple react popup component that help you create simple and complex Modals, tooltips and Menus for your next React App.

{% github yjose/reactjs-popup %}

---

### 9. Docker Curriculum

Learn to build and deploy your distributed applications easily to the cloud with Docker

{% github prakhar1989/docker-curriculum %}

---

### 10. Spectre.css


Spectre.css is a lightweight, responsive and modern CSS framework.

{% github picturepan2/spectre %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
CSS Animated Sticky Navbar with Smooth Scroll
Published: 2020-09-11 15:11:30

The name "Sticky navbar" itself is self-explanatory. If I explain in a sentence, I would say, a navbar that sticks on the top or bottom of the web page even after the visitor scroll down or up the page called a sticky navbar, and most of the developers use this technique widely in their websites. In this blog, here I have should a simple way to create a pure CSS animated sticky navbar with a smooth scrolling effect using HTML and CSS. <a href="https://www.codingflicks.com/2020/08/pure-css-animated-sticky-navbar-with-smooth-scroll.html">Download the code</a>
Building Amazon* with ReactJs!
Tags: beginners, javascript, html, webdev
Published: 2020-09-11 15:06:13

Recently I've been working on building real clone projects, in the line of #100daysofcoding I've build Messenger clone, Spotify Clone, Progressive Weather App, Slack Clone and now I am working in Amazon Clone... 

So far, Amazon Clone has been the most rewarding! In the journey  of becoming a fullskack #programmer / #webdeveloper this is by far the most clean look that I have achieved for the front end. 

I am sharing a short video of Amazon build. 
Would love to hear your feedback and suggestions for improvement..

**For Video Demo visit** 👇🏾 
https://www.loom.com/share/777ddfca7ee449c4ba8033f5eb2e97c2


<br/>
>Main Screen 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fh57efn5887vw4rubc5x.PNG)
<br/>
>Login Page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6xexna41xsn7sa5ar34c.PNG)

>Checkout Page

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7a1jst31j0dn0unsjalp.PNG)
Playwright for E2E testing?
Tags: discuss, testing, node, webdev
Published: 2020-09-11 14:48:01

I'm a fan of [Cypress](https://cypress.io) for end to end testing (E2E), but I'm wondering about the Playwright project from Microsoft.

{%github https://github.com/microsoft/playwright/ %}

It's essentially cross-browser Puppeteer from what I've understood and there are some new goodies in the 1.4 release.

{% twitter 1304428408806539265 %}

I'm going to take it for a spin, but curious if others on DEV have used it.

<center>

![Fire beside desk of IT crowd employee](https://media.giphy.com/media/dbtDDSvWErdf2/giphy.gif)

</center>

Drop your comments, posts or whatever you got in the discussion below.
Maintaining `.rubocop.yml`
Tags: ruby
Published: 2020-09-11 13:28:54

For a while now, every time I update `rubocop` gem to the latest version in my projects and then run `bundle exec rubocop` I would get a message that looks like this

```
The following cops were added to RuboCop, but are not configured. Please set Enabled to either `true` or `false` in your `.rubocop.yml` file.

Please also note that can also opt-in to new cops by default by adding this to your config:
  AllCops:
    NewCops: enable

Lint/DuplicateRequire: # (new in 0.90)
  Enabled: true
Lint/EmptyFile: # (new in 0.90)
  Enabled: true
Lint/TrailingCommaInAttributeDeclaration: # (new in 0.90)
  Enabled: true
Lint/UselessMethodDefinition: # (new in 0.90)
  Enabled: true
Style/CombinableLoops: # (new in 0.90)
  Enabled: true
Style/KeywordParametersOrder: # (new in 0.90)
  Enabled: true
Style/RedundantSelfAssignment: # (new in 0.90)
  Enabled: true
Style/SoleNestedConditional: # (new in 0.89)
  Enabled: true
Rails/AfterCommitOverride: # (new in 2.8)
  Enabled: true
Rails/SquishedSQLHeredocs: # (new in 2.8)
  Enabled: true
Rails/WhereNot: # (new in 2.8)
  Enabled: true
For more information: https://docs.rubocop.org/rubocop/versioning.html
```

I am not the _"opt-in to new cops by default"_-guy and prefer to add and configure new cops manually.

I also like to have the cops in alphabetical order.
However, manually putting new cops into order would take me some time and was an annoying task, so I wrote a script that did this work for me.

Eventually I put the script into a gem named `ruboclean` so anyone with the same "fetish" can use it.

Today, all I do is copy-paste the new cops into `.rubocop.yml` and then run `ruboclean`... done.

---

![Screenshot of the resulting rubocop.yml file after running ruboclean](https://dev-to-uploads.s3.amazonaws.com/i/d0iluihf25fnc0vft460.png)

Satisfying. 🙂

For more information, please visit [https://github.com/lxxxvi/ruboclean/](https://github.com/lxxxvi/ruboclean/).

(Cover image by [nrd on unsplash](https://unsplash.com/@nicotitto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText))
Personal update
Published: 2020-09-11 14:22:16

Hello human

It feels strange to write here again. I didn't write a line since the beginning of march. 

Like many of us, I was hit hard by this coronavirus shitshow and gave up things I used to enjoy. Including writing.

I'm fortunate though to live in Berlin where the good life came back at the beginning of July.

Now feels like a good time to resume writing. 

Well I'm a bit afraid to do it to be honest. But since I announced it, I have no choice now :) 

Oh and I also started again to work on my open-source project [gradle refreshVersions](https://github.com/jmfayard/refreshVersions) . And it just reached **666** stars, which just feels perfect for a software that targets **dependency hell**.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gvy9mje4ze5h320xdunp.jpeg)
kotlin not-null judgment
Tags: kotlin
Published: 2020-09-11 14:11:56

#?
When declaring an object instance,add ? after the type name indicates that the object can be null
When an object method is called, add ? after the instance name to indicate that null is returned once the instance is empty
#?.
var length = str?.length;
when str is null,return null;when str is not null,return str.length.
#?:
var length = str?.length?: -1
if str is null, return -1,else return str.lenght
#!!
var length = str!!.length
if str is null,trow NullPointerException
Build Ionic framework App Source and Artifact Android Apk Action
Tags: actionshackathon
Published: 2020-09-11 14:03:23

### My Workflow
his GitHub Action "Get Android Apk" is designed to automate the developers work to:

- Configure the Java,Node.js,Ionic cli
- Build from latest Ionic Source and make android source
- Then Build the Android app from latest Source
- Upload The build to the the Artifact for Testing on every changes done in master branch

## Submission Category: 

### - Maintainer Must-Haves, DIY Deployments


### Yaml File or Link to Code
```
name: Get Android APK

on: [push, pull_request]

jobs:
  build:
    name: Build APK
    runs-on: ubuntu-latest
    steps:
      - name: checkout source
        uses: actions/checkout@v2

      - name: setup java sdk
        uses: actions/setup-java@v1
        with:
          java-version: '9.0.4'
          
      - name: setup Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 13.x

      - name: Install Cordova
        run: npm install -g cordova

      - name: Install Ionic cli
        run: npm install -g @ionic/cli

      - name: Install app dependencies
        run: npm install

      - name: build the app
        run: npm run build
    
      - name: remove existing folder if there 
        run: rm -rf {path of your android folder dir.} # eg. /home/runner/work/Bookie/Bookie/android
        
      - name: Add to android
        run: npx cap add android
  
      - name: sync with source
        run: npx cap sync

      - name: Generate the Android App Apk
        working-directory: {working android directory} # eg. /home/runner/work/Bookie/Bookie/android 
        run: bash ./gradlew assembleDebug --stacktrace

      - name: Upload dev APK
        uses: actions/upload-artifact@v1
        with:
          name: app-dev
          path: android/app/build/outputs/apk/debug/app-debug.apk
```

{% github hpnightowl/Bookie %}


### Additional Resources / Info

{% github actions/checkout %}
{% github actions/setup-java %}
{% github actions/setup-node %}


Made with ❤️ by hpnightowl
Explain the challenge of generating random numbers like I'm five
Tags: explainlikeimfive
Published: 2020-09-11 13:55:47

---
title: Explain the challenge of generating random numbers like I'm five
published: true
description: Why is it so hard to generate a truly random number? 
tags: explainlikeimfive
//cover_image: https://direct_url_to_image.jpg
---

- Why is it so hard for computers to generate random numbers? 
- What's all this business about _pseudo-random_ vs. _truly-random_?

Please, ELI5
1000DaysOfCode | Day 33, 34, 35
Tags: 100daysofcode, python, challenge, beginners
Published: 2020-09-11 13:35:56

▄█ █▀█ █▀█ █▀▄ ▄▀█ █▄█ █▀ █▀█ █▀▀ █▀▀ █▀█ █▀▄ █▀▀
░█ █▄█ █▄█ █▄▀ █▀█ ░█░ ▄█ █▄█ █▀░ █▄▄ █▄█ █▄▀ ██▄

Hey everyone 
I'm here again to share my experience about 3 days ago.
Still moving forward in __100DaysOfCode Challenge__ so powerful.
I had a stomachache 3 days ago, that was so damn painful...
I lost one of the days cuz I was in the hospital,  not feeling good :( 

But after a day I came back stronger, Spending around 5 hours satisfied me a little bit ...
Working with __Flask__ sounds like Cool :)
I'm still playing around with __Flask__ and making a Login and Registration page.
I think that will be a really awesome project to start with __Flask__, so wait and see my progress.
I'm still a Beast in my journey, so follow me cuz I'm gonna show you how wild I am!!!!!


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b2m3k2kxikpgym0uazkg.jpg)<figcaption>Be like a Beast!</figcaption>

#Keep Moving Forward ツ

##Enjoy Your Journey 👊

##Code with 💛

__🅑🅐🅝🅙🅘__
What font do you use in your editor?
Tags: beginners, fonts
Published: 2020-09-11 13:32:09

Hey 👋 tell me, what is your favorite font for your editor? What font size???

Here’s mine:

Until a few days ago I used Consolas, but decided to change to increase readability.

- Font: Fira Code.
- Size: 13px on 27” external monitor, 15px on 15” laptop.
What is Laravel Jetstream and how to get started?
Tags: laravel, php
Published: 2020-09-11 13:07:32

Laravel 8 was released on September 8th along with Laravel Jetstream.

Laravel Jetstream is a new application scaffolding for Laravel. Laravel Jetstream replaces the legacy Laravel authentication UI available for previous Laravel versions.

I just wrote a short post where I give a quick introduction to what exactly Laravel Jetstream is and how to get started with it:

**[What is Laravel Jetstream and how to get started?](https://devdojo.com/bobbyiliev/what-is-laravel-jetstream-and-how-to-get-started)**
Quick question about time estimation ⏰📆
Tags: watercooler, productivity, agile, question
Published: 2020-09-11 12:55:37

---
title: Quick question about time estimation ⏰📆
published: true
description: Hi guys, my question is how close are you to your time estimations normally on a project.
tags: #watercooler, #productivity, #agile, #question
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3der2hb9f297igzxfdee.jpg
---
Hi everyone, sorry to bother you. I hope you all are having a nice day 😁, just a quick question.

**¿How accurate are you and your teams on your time estimations for your stories?**

Lately my team has been failing on our time estimations (about the last 2 sprints), and our PM keeps nagging 🤬 about our performance, but neglecting the complexity of the project (since most of our code base is legacy code, and we find ourselves stumbling once we start working).

So in result, we exceed the estimated time, even with the double of the originally defined time 🤯.