teleren/devto huggingface dataset:
Starting my journey of overcoming my greatest fear... CODING!!!!!!
Tags: codenewbie, 100daysofcode, javascript
Published: 2019-11-27 19:58:35

Hi everybody....A big Hello to all the talented developers here!!! This is Anusrita.I m not new to Tech World. But am planning to start off to learn serious coding now.

At this point I am really confused, where and what to start off with. Everything looks so vast from where I stand right now. Feeling like I am the last person standing in queue. A gap of 2 years makes me feel all the more rusted! 

I have studied computer science, been in IT world, done coding, but have somehow always avoided coding at the first place. It has been somehow a nightmare for me. I always felt that this is not my cup of tea and everytime accepted defeat even before trying. Now, this is something that I obviously am not very proud of. 
But,this time I want to give it my all and overcome that fear of writing codes.

For now, I am starting off with some bootcamp and hope that soon I will learn new things that I can share with you all. 

Phew!!!! Let us begin the journey and hope that you guys will stay with me throughout.

Thanks for any kind of suggestions in advance! I am really excited to be here! 😊

PS: I want to become a good front end developer and build responsive websites...

I have built websites using HTML and CSS... but when it comes to coding( like the main logic part), my brain shuts down.
👟 Executing JavaScript in the page context of puppeteer
Tags: javascript, puppeteer, webdev
Published: 2019-11-27 19:47:39

So far we learned how to do Screenshots, how to create PDFs, how to set Cookies and how to click elements and type into pages using puppeteer.

Now we will learn how to execute our own JavaScript in a page context. In this example, we will again load the dev.to homepage, change the background by executing a JavaScript snippet and take a screenshot of the changed page.

First, let's make sure our snippet for changing the background color of the body of a page works. Just past that into the console.

```js
document.body.style.background = "#000";
```

![dev.to darkmode](https://thepracticaldev.s3.amazonaws.com/i/8jyodqkm0vdf14b42v56.png)

dev.to Darkmode ;)

And now let's look at the complete example:

```js
// npm i puppeteer
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // let's navigate to the dev.to homepage
  await page.goto('https://dev.to');

  // evaluate will run the function in the page context
  await page.evaluate(_ => {
    // this will be executed within the page, that was loaded before
    document.body.style.background = '#000';
  });

  // and let's take a screenshot
  await page.screenshot({
    path: 'home.png',
  });

  // we're done; close the browser
  await browser.close();
})();
```
Accessibility on The Session revisited
Tags: a11y, aria, thesession
Published: 2019-12-11 02:13:15

---
title: Accessibility on The Session revisited
published: true
date: 2019-11-27 12:43:23 UTC
tags: accessibility,a11y,aria,thesession
canonical_url: https://adactio.com/journal/16174
---

Earlier this year, [I wrote about an accessibility issue I was having](https://adactio.com/journal/14863) on [The Session](https://thesession.org). Specifically, it was an issue with Ajax and pagination. But I managed to sort it out, and the lesson was very clear:

> As is so often the case, the issue was with me trying to be too clever with ARIA, and the solution was to ease up on adding so many ARIA attributes.

Well, fast forward to the past few weeks, when I was contacted by one of [the screen-reader users on The Session](https://thesession.org/discussions/43264). There was, once again, a problem with the Ajax pagination, specifically with VoiceOver on iOS. The first page of results were read out just fine, but subsequent pages were not only never announced, the content was completely unavailable. The first page of results would’ve been included in the initial HTML, but the subsequent pages of results are injected with JavaScript (if JavaScript is available—otherwise it’s regular full-page refreshes all the way).

This pagination pattern shows up all over the site: [lists of what’s new](https://thesession.org/recordings/new), [search results](https://thesession.org/tunes/search?q=humours), and more. I turned on VoiceOver and I was able to reproduce the problem straight away.

I started pulling apart my JavaScript looking for the problem. Was it something to do with how I was handling focus? I just couldn’t figure it out. And other parts of the site that used Ajax didn’t seem to be having the same problem. I was mystified.

_Finally_, I tracked down the problem, and it wasn’t in the JavaScript at all.

Wherever the pagination pattern appears, there are “previous” and “next” links, marked up with the appropriate `rel="prev"` and `rel="next"` attributes. Well, apparently past me thought it would be clever to add some ARIA attributes in there too. My thinking must’ve been something like this:

- Those links control the area of the page with the search results.
- That area of the page has an ID of “results”.
- I should add `aria-controls="results"` to those links.

That was the problem …which is kind of weird, because VoiceOver isn’t supposed to have any support for `aria-controls`. Anyway, once I removed that attribute from the links, everything worked just fine.

Just as [the solution last time](https://adactio.com/journal/14863) was to remove the `aria-atomic` attribute on the updated area, the solution this time was to remove the `aria-controls` attribute on the links that trigger the update. Maybe this time I’ll learn my lesson: don’t mess with ARIA attributes you don’t understand.
An interesting tool/technology I encountered in preparation for Bootcamp
Published: 2019-11-27 19:27:29

If you could ask anyone who joined Andela as a junior developer, what the most challenging phase of the whole recruitment process was, they would most definitely all answer that it was the Bootcamp phase.
In this phase, you are recommended to use all kinds of tools used by developers around the world, these vary from Version Control to Software testing tools. One of the tools that I found most interesting to me was a Project Management tool called <strong><em>Pivotal Tracker</em></strong>.

With Pivotal Tracker, you can create stories where each story represents either a feature, chore, bug or release. On the creation of a <em>feature story</em>, you get to set points and this can help determine the velocity of an individual or a team of developers working on that story. A story also has a description where you can write a short description of what outcomes are to be expected after the tasks are completed, but you can also add in more details like what the story's git branch-name would be called and more.
Another cool feature is that you can connect a Pivotal Tracker Project with its Github repository. Then in that way, any changes made to the repository are automatically tracked and can be registered as a means of finishing a particular story. 

This tool was extremely useful to me because it has helped in organizing how the development tasks are carried out, and working on the project that was assigned to us in the Development Challenge.
Build Ionic 4 Firebase CRUD App with Angular 9|8
Tags: angular, ionic4firebase, crudappwithangular98
Published: 2020-02-01 19:37:07

---
title: Build Ionic 4 Firebase CRUD App with Angular 9|8
published: true
date: 2019-11-27 19:10:38 UTC
tags: Angular ,Ionic 4 Firebase, Ionic 4 Firebase, CRUD App with Angular 9|8 
canonical_url: https://www.positronx.io/build-ionic-firebase-crud-app-with-angular/
---

The post [Build Ionic 4 Firebase CRUD App with Angular 8](https://www.positronx.io/build-ionic-firebase-crud-app-with-angular/) appeared first on [positronX.io](https://www.positronx.io).

**A complete step by step tutorial on creating Ionic 4, Firebase Realtime Database, Cordova and Angular 8 doctors appointment CRUD (Create, Read, Update, Delete) mobile app.**

In this Ionic 4 Firebase and Angular 8 tutorial, we will learn how to build CRUD (Create, Read, Update, Delete) app. In this doctor’s appointment CRUD mobile application, we will learn how to store app data in the Firebase Real-time NoSQL Database.

[Click here to read more](https://www.positronx.io/build-ionic-firebase-crud-app-with-angular/)
Serverless AWS Lambda Node Express MongoDB Boilerplate🚀
Tags: javascript, github, opensource, webdev
Published: 2019-11-27 18:47:08

# Serverless-AWS-Lambda-Node-Express-MongoDB Boilerplate🚀

[Boilerplate for Creating Restful API using Express.js, Node.js, MongoDB and Setting up on AWS Lambda](https://github.com/realabbas/serverless-lambda-node-express-mongodb)

- 🚀[Star on Github](https://github.com/realabbas/serverless-lambda-node-express-mongodb) 

![Serverless-AWS-Lambda-Node-Express-MongoDb Search Results](https://mattwelke.com/assets/img/free-tier-sls-mongo-atlas/heading.png)

- Prerequisites

  - `AWS IAM Role`
  - `Mongodb Atlas Cloud`
  - `Serverless Framework`
  - `Node.js`
  - `Express.js`
  - `Mongodb`
  - `body-parser`
  - `Serverless-offline`
  - `loadtest`

**Installation Steps**

In the root directory run the following command:
- `npm install`
It will save all the dependencies and dev-dependencies present in package.json

**Setup the IAM Role and configure the serverless(sls) command line.**

**Create an account on Mongodb Atlass Cloud and Whitelist the IP Address 0.0.0.0/0. Also create a user in database and setup it in secrets.json**

**Create Restful API using Express and Node**

**Deploy the codebase using ``` sls deploy ``` for the development stage**
For production switch over to ``` production ``` in secrets.json

After ``` sls deploy ```. Code will be deployed on AWS Lambda. Head over to AWS Lambda and test it using Postman or Insomnia. After that for scaling test, use ``` loadtest ``` and send 100 GET concurrent requests for 10 simulatenous users and watch the latency that comes around to be ~5 seconds.

Cheers! **AWS Lambda Auto Scaling with an increase in requests.**

- 🚀[Star on Github](https://github.com/realabbas/serverless-lambda-node-express-mongodb) 

*Resource: Thanks Hackernoon*
Profit Flow - Trading Journal (No DB, Client Side only)
Tags: codepen, javascript
Published: 2019-11-27 18:35:05

<p>Are you a stocks trader? I've built an amazing notebook for your Day Trading Operations. It does not use database, so do not reload the page!</p>

<p>So far this is one of the coolest individual projects I've developed. <a href="https://github.com/iagocalazans/day-trade-notebook">You can contribute</a> and <a href="https://github.com/iagocalazans/day-trade-notebook/archive/v1.0.zip">download</a>.</p>


{% codepen https://codepen.io/iagocalazans/pen/LYYwGRp %}
Break your Search Loop
Tags: career, watercooler, discuss
Published: 2019-11-27 18:20:15

Don't lie, you've done it. You searched for one thing and ended up learning about 12 things you didn't even know you needed.

![python while-loop
while searching:
    keep_searching
    print("still searching")](https://thepracticaldev.s3.amazonaws.com/i/b93w4v0p9ivaqwt6zz7f.png)


Stop doing this! You're wasting your energy. By the time you're done reading that last thing you looked up, you probably don't remember the thing you were looking for, to begin with.

So, slow down a bit. No matter if you're just beginning or you've been doing this for a while, you need to give yourself a break. Contrary to your belief, you do not need to know every single detail before you start something.

{% twitter 1196978569181900800 %}

If you remember, what's the last thing you searched for?
Async/Await: The Simplicity of Writing Asynchronous JavaScript
Tags: softwaredevelopment, node, javascript, webdev
Published: 2020-01-15 00:00:51

---
title: Async/Await: The Simplicity of Writing Asynchronous JavaScript
published: true
date: 2019-11-27 18:12:11 UTC
tags: software-development,nodejs,javascript,web-development
canonical_url: https://medium.com/javascript-in-plain-english/async-await-the-simplicity-of-writing-asynchronous-javascript-2e37a0066ba6
---

[![](https://cdn-images-1.medium.com/max/1600/0*7PWTioxuaCKY5ALW.jpg)](https://medium.com/javascript-in-plain-english/async-await-the-simplicity-of-writing-asynchronous-javascript-2e37a0066ba6?source=rss-5676ca6163ee------2)

Async/Await: The Simplicity of Writing Asynchronous JavaScript

[Continue reading on JavaScript in Plain English »](https://medium.com/javascript-in-plain-english/async-await-the-simplicity-of-writing-asynchronous-javascript-2e37a0066ba6?source=rss-5676ca6163ee------2)
CSS Box Model Explained
Tags: css, webdev, tutorial, beginners
Published: 2019-11-27 18:00:51

The box model in CSS is used to add spacing to different aspects of elements in an HTML document. There are four parts to the box model; the content that is displayed on the webpage, the border, padding, and the margin of the element. 

The image below shows a graphical representation of the box model. The part in the center, labeled 'content', is where the text will be displayed that is put inside the HTML tag. The next layer shows the padding, this is spacing between the content and the border. Outside the border of the element is the margin, this is additional spacing between other elements in the HTML document. Using the padding or the margin depends on where you want the spacing to be, inside or outside the border. You can also use both the padding and margin in one element, they can be used in conjunction or independently.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nvzt7bdc7rvj1oq1ep17.png)

To apply either padding or margin to an element in HTML you set the numeric CSS value of the 'padding' or 'margin' property respectively. The value of the padding or margin can be in pixels, percentage, em, etc. The code below shows an example of some CSS that is setting the border, the padding, and the margin. The padding and margin are applied to all four sides of the element.

```css
border-style: solid;
border-width: medium;

padding: 4px;
margin: 4px;
```

You can also specify different values per side of an element. You could have different padding, border, or margin per side of an element. Left, right, top, and bottom, are the different sides available in CSS. Below is a code snippet that shows how the sides of an element can be set by using a suffix to the property dependent on which side you want to set.

```css
border-left-style: solid;
border-left-width: medium;
padding-right: 4px;
margin-top: 3px;
```

These CSS properties can be written in smaller lines of code too. The code snippet below shows how to set similar properties but in fewer lines of code. The first line shows setting attributes of an element's border, just by using the 'border'. You can also set every side of the margin or padding property by supplying more numeric values to the 'margin' or 'padding' property. These values will be applied to the top, right, bottom, and left in that order. The below code will apply a padding and margin of 1px to the top, a padding and a margin of 2px to the right, 3px to the right, and 4px the left of the element. Only supplying one numeric value to the 'padding' and 'margin' property will apply it to every side of the element. 

```css
border: 3px solid black;
margin: 1px 2px 3px 4px;
padding: 1px 2px 3px 4px;
```

This article was originally posted on my website: https://acroynon.com/
Open Source Developer Podcast is looking for your Projects
Tags: opensource, podcast, javascript
Published: 2019-11-27 17:45:13

---
title: Open Source Developer Podcast is looking for your Projects
published: true
description: We need your projects because open source is important!
tags: open source, podcast ,JavaScript
---

Hey Guys, James here from the Open Source Developer Podcast!

I am looking for more projects to cover in the Open Source Developer podcast, if you would like your project covered and listened to by my listeners (We average around 300+ listens per Podcast Episode), or maybe you have been using an open source project for a while and you tell everyone.. Well tell me, if we haven’t covered it yet I will absolutely add it to the list of future episodes.

Never heard of the podcast? Check it out at any of your favorite podcast applications or [opensourcedevpod.com](https://www.opensourcedevpod.com) and listen right from your Computer!

Enjoy your Thanksgiving (If you celebrate)
An interesting technology I encountered in preparation for Bootcamp
Published: 2019-11-27 17:37:37



Since I started to know more about programming, I use to hear many people talking about teams that worked on certain projects. And I was curious to know how a group of people work on the same project at a time and how each member takes a task and after merge everyone’s task to be one project. In the preparation of Andela Bootcamp, I had a chance to learn and use GitHub. A repository of hosting services. There were many tools that were my first time to use, but the GitHub was the one I was curious to know more about it. 

I found this very interesting for the time that I pushed my first work. Many developers were so excited about it too. I have taught that when a developer makes changes, those changes are made directly to the repository. Another thing that I wanted to know how it works, is to take a system online and make some changes, and put it online with those changes you have made.  

We have been told to follow the git workflow, by dividing the task into small pieces and create a branch for each work. I was not familiar with that as a beginner, I used to work on the task as a whole and then push it as it is. For someone who understands git workflow well, this is not how it works. Because I had to create stories on Pivotal tracker (Project management tool) and then use ID of each story to create a branch of the task which is going to be built. 

However, as I worked on tasks, that’s how I received helpful feedback which helped me to know areas improve. I kept improving but when it comes to conflict issues, I use to create a new repository every day. All I had to is to try until I make it. I found that you can only remove or resolve merge conflicts on GitHub that are caused by competing changes, such as when two or more developers made different changes to the same line of the same file. Or you resolve the conflict locally on the command line by deleting the current changes or old changes, according to what you want to have. 

The best thing about GitHub allows your work to share skills with other developers due the how easier is, to make documentation of your project on the repository. Moreover, it is one of the largest coding communities, using it can also provide wide exposure for your project and for you.
Advent of Code is Almost Here!
Tags: adventofcode
Published: 2019-11-27 17:31:28

---
title: Advent of Code is Almost Here!
published: true
description: It's my favorite time of year, and one of the reasons is the 25-day, 25-puzzle coding challenge known as Advent of Code.  Here's how to join in!
tags: adventofcode
---

Advent of Code starts on Sunday, and I'm so excited!

I was going to write a whole post on how to join in, tips and tricks for success, and more, but then I found this post by Jon Bristow (@jbristow):

{% link https://dev.to/jbristow/get-ready-for-the-2019-advent-of-code-2gl9 %}

His article hits all of the points that I wanted to make and more, much more eloquently.

So the short version is this.  Advent of Code is happening.  It starts on Sunday, December 1st.  Last year we had a small-ish group of people that took part by posting their solutions in daily discussion threads here on DEV.  We also had a community leaderboard (not for the competitiveness of it, but just to see how everybody is doing).

You should join in if this sounds fun!  Even if you've never done it before.  *Especially* if you've never done it before!

Here are some things you can do to get ready!

 - Ask me any questions you might have or things you might be worried about.
 - Tell us what your plans and goals are!  
 - What language(s) are you planning on trying?
 - Did you do it last year?  Or in the last few years?
 - Are you doing anything special to get ready?
 - If you're up for it, I made a leaderboard (or, community support/encouragement board! 😄).  You can use code `224198-25048a19` to join!
 - I'll be back on 12/1 with the first day's discussion post on Dev.to, but if you're at all interested in helping out with those posts and leading some or many days of the discussion yourself, I'd love the help!  Let me know.

![I'm so excited!](https://thepracticaldev.s3.amazonaws.com/i/bhyten5lmta1f1m6z1hz.gif)

Merry Coding!
Angular custom validators and some weird ones 
Tags: angular, material, javascript
Published: 2019-11-27 16:51:04

After some time I'm at it again. I want to share something with YOU. So that you don’t bang your head on the table as I have.  I'm working on an angular & angular material project. So we have basic validation on a numeric input field.


```html
<div class="example-container">
  <mat-form-field>
    <input matInput 
      type="number" 
      placeholder="Some number ..."  
      [(ngModel)]="someNumber" 
      #someVal="ngModel"
      min="0" max="10">
    
  </mat-form-field>

</div>
```
Nothing special here. Right? We want to enter a value from 0 to 10. If we use arrows on the control, no problem. But we can input value by hand. So if we enter -2. We would expect to see mat-error message. Wrong. Validator min is not registering that -2 is lower than 0 and by that, it is not throwing an invalid. The same thing is happening if we enter 12. Why?
I don’t know. But I really think it is an issue with min and max validators. 


>Why should it be easy when it can be complicated. 

We need to write some validators. 
First, we are going to write a top border value validator.


```javascript
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Directive({
  selector: '[maxValueValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: MaxValueValidatorDirective, multi: true}]
})
export class MaxValueValidatorDirective implements Validator{
  // our limit value
  @Input('maxValueValidator') maxValue: string;
  validator: ValidatorFn; 
  numValue: number; 
  constructor() { this.numValue = +this.maxValue}
  //needed by the Validator interface
  validate(control: AbstractControl): ValidationErrors {
    return this.maxValueValidator()(control);
  }

  // If value is valid it will return null 
  // if it's not it will return {'maxValueValidator': { value: control.value}}
  maxValueValidator(): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      return control.value > this.maxValue ? {'maxValueValidator': { value: control.value}} : null;
    };
  }
}

```
Simple right. (Now you can write the lower border value) .
Custom validators are cool! Right.
 
```html
<div class="example-container">
  <mat-form-field>
    <input matInput 
      type="number" 
      placeholder="Some number ..."  
      [(ngModel)]="someNumber" 
      #someVal="ngModel"
      min="0" max="10" minValueValidator="0" maxValueValidator="10">
    <mat-error *ngIf="someVal.hasError('minValueValidator')">Number must be positive value!</mat-error>
    <mat-error *ngIf="someVal.hasError('maxValueValidator')">Number must be under 10!</mat-error>
  </mat-form-field>

</div>
```

You can view and try this example here. Enjoy.
{% stackblitz angular-jin3ma view=preview%}