teleren/devto huggingface dataset:
2 Methods for Dealing with Nulls in TypeScript
Tags: typescript, webdev, productivity, tech
Published: 2020-09-10 16:53:19

TypeScript is such a cool language, and learning to use the more advanced features of it can be a real benefit to your code base.

I'd like to talk about one specific item: dealing with non-nullabe types.

Often times in our code we do something like the following:

![image](https://cdn-images-1.medium.com/max/800/0*-j6H5y9-b10yGyLd?)

This function should only run on actual users, but if user objects can possibly be null we guard our functionality by writing a null check around our code.

What we would **like** is the following:

![image](https://cdn-images-1.medium.com/max/800/0*g-MspbXnsjbrABpg?)

And we can have this with TypeScript. There's a couple of ways to go about it:

**Method 1:**

The first is to just make your entire code base require you to explicitly declare nulls. You can do that with the **- strictNullChecks** flag which ensures that all variables are non-nullable unless you explicitly declare them as such. For example:

![image](https://cdn-images-1.medium.com/max/800/0*kMr8PdZ6GfSSIkH6?)

The above code would throw an error with the strict null check. You're creating a user, and initializing it to null, but not declaring it as a nullable type. In order to do that, and make it possibly be nullable, use the union operator like so:

![image](https://cdn-images-1.medium.com/max/800/0*FNvn7-xJ_yttSyBf?)

This won't throw a TypeScript error. this user object can now either be a User or a null.

This way, you never have to write the null check unless the function can operate on both real objects AND nulls.

**Method 2:**

Now maybe making the entire code base explicit is too much. In that case, you can instead mark specific identifiers as non-nullable using the NonNullable generic type. For example, the above function can be re-written like this:

![image](https://cdn-images-1.medium.com/max/800/0*KS4me6m1gN8zfoyI?)

TypeScript will then give you errors if you ever try to call this function with an object that could possibly be a null. VERY easy and simple.

Now of the two methods, I personally prefer the first one. Yes, it seems like it's more restrictive, but in my experience, most variables will never need to contain a null value for most of the execution. So it's easier to just explicitly mark the few places where you can either have an actual value or a null.

Utilize these tips, brought to you by the [Angular Denver conference](https://is-tracking-link-api-prod.appspot.com/api/v1/click/4786366313922560/~Tokens.Link~) to make your TypeScript code a bit more manageable.

Happy coding!

Signup for my newsletter [here]().

Visit Us: [thinkster.io]() | Facebook: @gothinkster | Twitter: @GoThinkster
Constructable Style Sheets?
Tags: css, angular, javascript, typescript
Published: 2020-09-10 16:42:52

This article in Feb 2019 discussed [Constructable Style Sheets](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)

The concept is similar to Angular's View Encapsulation.  We've mentioned previously that Angular's View Encapsultation is somewhat handicapped.

Maybe Constructable style sheets are an answer to View Encapsulation woes?  Wait a minute Angular doesn't use shadow dom...

Thoughts?
Developer Dictionary: The Story of Git
Tags: beginners, codenewbie, firstyearincode, computerscience
Published: 2020-09-10 16:18:38

####This post is part of a resource called Developer Dictionary. More about why I'm writing this [here](https://bhumimakes.com/developer-dictionary/)

***

There are many tutorials, videos, books, and blog posts about the internal workings of Git. This writing is more of a story of Git — what it is, why it exists, and how it came to be. 

###Why Do We Need Git?

Git is an open source distributed version control system. What does that mean? and what is it good for?
  
**Version Control:** Imagine you were editing a document or a spreadsheet with your friends or family members. You're planning a trip and everyone is adding different locations. You'd want to combine (aka merge) everyone's changes and have it all available in the final document right? And you'd want to be able to make these changes at the same time without stepping on each other's toes ideally. It would be to see what the document looked like last week and go back to that older version in case someone messed up something.  It would also be nice to see who changed what and when.
 
A version control system allows for all of the above functionality. Git is one such version control system. We talk about Git in the context of tracking code but it can track any collection of files.
 
**Distributed:** This means that each peson has their own copy of the code on their local machine. There is no central server that keeps a master copy of the code. (This distinction is relevant to those familiar with other version control systems prior to Git. Many were centralized and had one master copy of the code).
 
**Open Source:** This means that the source code for the tool Git is not proprietary. You can see the code for Git here.
A Taste of Git – Sample Workflow 
There is an abundance of terminology related to Git. There are precise definitions and detailed descriptions of each of the term I use below, elsewhere. My goal is to paint a picture for you using broad brushstrokes before you get lost in the details. 

###A Taste of Git – Sample Workflow 

There is an abundance of terminology related to Git. There are precise definitions and detailed descriptions of each of the term I use below, elsewhere. My goal is to paint a picture for you using broad brushstrokes before you get lost in the details.

[Continue reading](https://bhumimakes.com/git/)
Loan Calculator using Vanilla Js
Tags: javascript, bootstrap, html, css
Published: 2020-09-10 16:16:55

Tried to create a simple loan calculator with loading #UX using #javascript. #Bootstrap is being used for the #UI part, a few simple methods are used to target the DOM elements.Test-https://bit.ly/3iioLnT. code- https://bit.ly/33jMDBx. #HTML #css3 #webdev #WebDeveloper #reactjs
BFE.dev challenge #13. Implement a Queue by using Stack
Tags: javascript
Published: 2020-09-10 16:16:53

> https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

This article is about the coding problem [BFE.dev#13. Implement a Queue by using Stack ](https://bigfrontend.dev/problem/implement-a-queue-by-using-stack)

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

## Look at the interface

```js
/* you can use this Class which is bundled together with your code

class Stack {
  push(element) { // add element to stack }
  peek() { // get the top element }
  pop() { // remove the top element}
  size() { // count of element }
}
*/

/* Array is disabled in your code */

// you need to complete the following Class
class Queue {
  enqueue(element) { 
    // add new element to the rare
  }
  peek() { 
    // get the head element
  }
  size() { 
    // return count of element
  }
  dequeue() {
    // remove the head element
  }
}
```

To `dequeue` an element from a Stack, we need obviously `pop` all the element except the last one, while we are popping, where do we keep the popped elements?

We cannot use Array, so we need to push them into a new Stack, like below.

```js
// initially
[1,2,3,4],  [ ]

// to get 1, we need to pop the rest elements
[1], [4,3,2]

// now we can get 1
[ ], [4,3,2]
```

After dequeueing 1, we could push the elements back into the first stack. But it reminds us that the whole process would be triggered again if 2 is to be popped.

Rather than pushing them back, why not we just keep them there, so we have 2 stacks for different purpose, one for push, one for pop.

```js
pushStack [ ], popStack [4,3,2]

// dequeue 2 could be achieved by popping from pop stack 
pushStack [ ], popStack [4,3]

// to enqueue a new element, just push to pushStack
pushStack [5], popStack [4,3]

```

When popStack is empty and pushStack is not, then it is time to push all elements from pushStack into popStack.

This is the solution, let's write some code

## Start coding

It is pretty straightforward from above analysis. Be aware of the internal `_transfer` method.

```js
class Queue {
  constructor() {
    this.pushStack = new Stack()
  	this.popStack = new Stack()
  }
  _transfer() {
    while(this.pushStack.size() > 0) {
      this.popStack.push(this.pushStack.pop())
    }
  }
  enqueue(element) { 
    this.pushStack.push(element)
  }
  peek() { 
    if (this.size() === 0) return undefined

    if (this.popStack.size() === 0) {
      this._transfer()
    }

    return this.popStack.peek()
  }
  size() { 
    return this.pushStack.size() + this.popStack.size()
  }
  dequeue() {
      if (this.size() === 0) return undefined
  
    if (this.popStack.size() === 0) {
      this._transfer()
    }

    return this.popStack.pop()
  }
}
```

## Passed!

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

This is an interesting problem. Maybe you can also have a try at https://bfe.dev

Hope it helps, see you next time.
"For loop developer" how to use pug/jade, scss, javascript, python(backend) - (Stack Tutorial 1) 
Published: 2020-09-10 16:10:13

---
title: "For loop developer" how to use pug/jade, scss, javascript, python(backend) - (Stack Tutorial 1) 
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

This tutorial we will learn how to use for loop at
 
* **Pug/Jade**
* **Scss**
* **Javascript**
* **Python (BackEnd)**
For front-end code  editor you can use [codepen](http://codepen.com) and backend python [Programic](https://www.programiz.com/python-programming/online-compiler/)


**1. Pug/Jade**

Pug will compile html and for online code editor pug/jade is the best way to practice code such as codepen, codesandbox, Web Maker (chrome extension).

**Pug/Jade Example 1**
```
- var max= 10+1;
- for(var i = 1; i < max; i++)
    input(value="Hello Input " + i, class="input"+i)

```

There are several way to loop pug/jude like while loop, each will will discuss it later.

**2. SCSS**
Scss is the css preprocessor to compile scss extension to css, vs live sass compiler one of the best extension I ever see.

**Scss Example 1**

```


$count: 10;
@for $i from 1 through $count {
  [class*=input]{
    border: solid red;
    animation: animate 10s ;
    @keyframes animate{
      0%{
        opacity: 0;
      }
      100%{
        opacity: 1;
      }
    }
    &:nth-child(#{$i}){
      animation-delay: #{$i}s;
    }
  }
}


```
**3. Javascript**
Javascript is one of the most useful programming language for web programmer.
for javascript there are couple of way to loop for example: do, while, for, (foreach,map,filter)=array etc
for this tutorial we are going to learn just basic about for loop 
**Javascript Example1**

```

let input = document.querySelectorAll('input');
for(let i = 0; i< input.length; i++){
  input[i].style.setProperty('margin','15px')
}

```
**4. Python**
Python is one of the best choices for backend development with Django framework, so we will go to keep that beautiful language, and also it is very easy to learn.
**Python Example1**
```
for i in range(1,20+1):
    print(i)

```
**Python Example2**

```
country = ["Bangladehs", "India", "Pakistan"]
for c in country:
    print(c)

```
This is our short tutorial, if you like this tutorial please like, comment, follow. I will encourage by you to do more posts here.
Thanks all.
The Maintainers: Dennis Doomen and FluentAssertions
Tags: video, opensource
Published: 2020-10-04 08:58:01

---
title: The Maintainers: Dennis Doomen and FluentAssertions
published: true
date: 2020-09-10 16:07:37 UTC
tags: Video,OpenSource
canonical_url: http://wildermuth.com/2020/09/10/The-Maintainers-Dennis-Doomen-and-FluentAssertions
---

![Dennis Doomen](https://wilderminds.blob.core.windows.net/img/VideoStill.jpg)In this series, I'll be interviewing Open Source Maintainers and talk about what open source means to them and why they do it. This time I talk to Dennis Doomen of FluentAssertions.

He shares with us the ups and downs of maintaining a long project and why he got into open source to begin with. Don't forget to subscribe if you like the series, we have got another five episodes coming!

This episode:

<iframe src="https://www.youtube.com/embed/zLjCuPb7n1U" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

More about Dennis Doomen:

Dennis is a veteran architect in the . NET space with a special interest in writing clean code, Domain Driven Design, Event Sourcing and everything agile. He specializes in designing enterprise solutions based on the . ... Like when to apply Event Sourcing and at what architectural level.

- Twitter: [@ddoomen](https://twitter.com/ddoomen)
- GitHub: [https://github.com/dennisdoomen](https://github.com/dennisdoomen)
- Blog: [https://www.continuousimprover.com](https://www.continuousimprover.com)
- FlientAssertions: [https://fluentassertions.com](https://fluentassertions.com)

Do you have any of your favorite open source projects you'd like me to highlight? If so, just leave a comment and I'll see if I can shine a light on the maintainers!

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

          This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
          Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/Rdmhk8G6ECM)
Low code React Native backend
Tags: reactnative, react, javascript, database
Published: 2020-09-10 16:07:16

In this Guide you will learn how to save your React Native App Data on Back4App.

https://www.back4app.com/docs/js-framework/react-native-save-data

(+) Relational Data : Relations/Pointers
(+) GeoPoints
(+) Perform relational queries
100 divs - CSS vars & mouse tracking - Codepen challenge
Tags: codepen, challenge, css, html
Published: 2020-09-10 16:06:40

Hello!
I've playing around (again) with CSS vars. This time I filled they dynamically with Javascript listeners values to facing at the mouse cursor :D

I specially did this for the "100 divs" Codepen challenge
Hope you like it!

{% codepen https://codepen.io/cdmoro/pen/NWNYzmp %}
How to Check for Changes in Inline Styling
Tags: beginners, tutorial, css, codenewbie
Published: 2020-09-10 16:04:05

I was looking through some code the other day and couldn't pinpoint where the inline styling was being set.

I wasn't able to follow the code back to the initial inline styling modification and doing a search through all the files for the inline styling wasn't helpful.

**Here's one way to check for changes in your inline styling:**
1. Find and select the element whose inline styling you're trying to check for.
2. Click on the ellipsis `...` to the left of the element, scroll down to the `Break on` menu, and select `attribute modifications`.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zw4k30vjpsx5erffw14o.png)
3. Interact with what you think is causing the inline styling to be set (in my case, it was being set on load so I refreshed the page) and the code will break on your element and show you the file / line of code that's setting the inline style.

> That's it! Let me know if this was helpful - feel free to drop a line below for other topics you'd like to see covered.
Now, I will start coding a lot! :D
Tags: newbie, beginners, coding
Published: 2020-09-10 15:59:25

I will try build some websites, and I intend to make the challenge 7 days 7 websites... So, good lucky for me! :D

Great! I'm starting a project about a Website using HTML, CSS E JS

It's to improve my skills and back to active to learn more :D
Discovering how much I love open source 
Tags: opensource, javascript
Published: 2020-09-10 15:52:57

#### *This text was written using the GPT-2 model by OpenAI. With the seed phrase below.*

I love open source software and the way it can empower us to create things that are not possible otherwise. 
 
As a member of The Open Source Software Foundation (OSF), I have been working with GitHub for over 10 years. how much I love open source and the ways that it can help the world become a better place through sharing knowledge. 
 
In May 2015, the OSF announced its new organizational structure, which included a role called Chief Operating Officer. By 2017, he was appointed CEO by the board. He is also an advisor on several other projects. 
 
 In 2013, he founded the non-profit organization Code For America (CFA) in order to provide free online training courses related to software development. Since its inception, CFA's website has received more than 3 million visits from around the world. 
 
 He is also an active contributor on various other projects including the Apache Spark project, OpenStack project as well as many others. 

Andres Are, the team manager at WebAssembly loves open source and is a passionate member, I find that if you're considering an open source project, a "open source browser" is a better fit. So because Open Source people love doing web apps...

This past week, I joined several organizations in for some open source projects with my friends. I got to work for the likes of Mozilla, OpenOffice, and MSOffice. Also we are very friendly with people using Chrome.

Today, as you may be wondering, I'm also attending a bunch of Open Source Week events in NYC. The conference is open to the public at http://www.openserver.com which includes several other big events to come at the conference, it was announced that I was there with a number of guest speakers.

Last weekend, I will be attending another Open Source Week event for The Open Source World event in London. First of all, I will be going from 3 to 4 interviews per week.

I had got here a very nice car, I was a little afraid, I wasn't sure if I had really got to go or not, so I arrived there a short time ago with a little extra cash to keep me warm if I could or not. Luckily, I am a really lovely person, and it is really good to find a way to travel to the world looking to learn and share with others, and I have a great opportunity and a dream to join the Open Source World that I love to call my life.
OBJECT ORIENTED PROGRAMMING PART, ⚀
Tags: oop, beginners, computerscience
Published: 2020-09-10 15:27:42

Hey everyone, learning object-oriented programming is very important, and more than that it is important to have clarity on the topics it covers.

So here we discuss 2 ⚁, important ones.

Firstly,
let's talk about

INHERITANCE -
Parent Class: Cat
Child Class: The class which will inherit the methods and data fields of the parent class, while having its fields or methods.

Advantages :
1) Reusability: You Don't have to write already existing lines of code.

POLYMORPHISM -
Poly means many and morphism means forms.
In short - 
The ability to write something in more than one form.

Two types: Static and Dynamic
Static - Different signature in the same derived class.
Dynamic - Same signature, 1 method in the base class, other in the child class

Example - Shapes Class and Types of Shapes are circle, square, and triangle.

Advantage - Flexibility

I hope you've enjoyed this Post on Object-Oriented Programming.
How to sleep() With Promises and async/await
Tags: programming, technical, javascript, promises
Published: 2020-09-10 15:26:34

---
title: How to sleep() With Promises and async/await
published: true
date: 2020-09-10 15:25:42 UTC
tags: Programming,Technical,javascript,promises
canonical_url: https://vancelucas.com/blog/how-to-sleep-with-promises-and-async-await/
---

Occasionally you may find the need to `sleep` for a bit or use `setTimeout` in your code or your test suite if some async work is going on that you know will finish during that time (like a quick deferred function or something like that). Here’s an easy way to do it:

```
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
```

And now you can use it wherever you need to like so:

```
await sleep(1000);
```

**Caveat** : Keep in mind that generally random `setTimeout` calls are a code smell – ideally you would know what you are waiting on and chain things up to happen after that work is done, or orgainze your code so that you know what you are waiting on specifically. This `sleep` method is for those times where that is not possible.
12 - Why remote work is important for everyone and big hats at meetups with Michele Cynowicz

Tags: frontendfoxes, codepirate, vue, community
Published: 2020-09-10 15:14:59

{% spotify spotify:episode:4Yt8aBGT5d6w9fSaD5j5F6 %}

During the **Suncoast Developers Guild Conference/Demo Day**, I saw someone giving a talk on Git branching while wearing a pretty rad **pirate hat**. I had to get to know this person. So in this episode I sit down with Engineer, Developer, Community organizer, Frontend Fox, Conference Speaker, Girl Scout Volunteer, Remote Work Advocate and owner of one seriously badass pirate hat… **Michele Cynowicz**!


**Frontend Foxes**: [https://www.frontendfoxes.org](https://www.frontendfoxes.org)

**Michele’s Twitter (pirate hat in profile photo)**: [https://twitter.com/michelecynowicz](https://twitter.com/michelecynowicz)

**DevFest Florida 2019 Talk: Shifting to Vue**: {% youtube AWQTbb6rmwI %}

**Thundernerds appearance at VueConf US 2019**: 
{% youtube hrYcGXqyFZE %}
Disable WC automatic thumbnail generation.
Tags: wordpress
Published: 2020-09-10 15:12:24

WooCommerce is slick for developers. Simple hooks fix problems fast. 
We use WC on our site with +10,000 products and close to 30,000 images. Since WC4.4, everytime a change is made, the system wants to regenerate all 200,000 images (inc all generated thumbnails)... Sigh..

The quick fix is:

```
add_filter( 'woocommerce_background_image_regeneration', '__return_false' );
```

More info [Broadway Wine N Liquor](https://winenliquor.com/chardonnay/)