teleren/devto huggingface dataset:
Javascript Promise
Published: 2020-10-31 23:40:41

**How to create a Javascript promise**

A promise is a function that will complete a task, usually asynchronously, in the future. A promise is always in one of three states:

```
pending: initial state, neither resolved or rejected

fulfilled: operation was completed successfully

rejected: operation has failed
```

to create a promise you use the following syntax:

```
const myPromise = new Promise((resolve, reject) => {

})

```

**How to complete a promise**

To actually complete a promise you must add conditions in the function. Using the previous example this is how you would complete  the promise:

```
const myPromise = new Promise((resolve, reject) => {
  if(condition){
  resolve("Promise has been fulfilled")
  } else {
  reject("Promise was rejected")
  }
})

```

**Handle a fulfilled promise with then**

Often promises are used with server requests since they can take an unknown amount of time. After you fulfill a promise you usually want to do something with the response from the server. To do this you can use the then method. The then method is executed immediately are the promise is resolved. Here is an example:

```
myPromise.then(result => {
// Write what you will do with result here
console.log(result)
})
```  

**Handle a rejected promise with catch**

Catch is used when your promise has been rejected. It will be executed immediately after a the reject method is called.

Here is the syntax:

```
myPromise.catch(error => {
// Write what you will do with error here
console.log(error)
})
```
Do you think my article went viral?
Tags: discuss, blogging
Published: 2020-10-31 22:50:02

I recently wrote an article on medium that ready has nearly 3k views, 280 claps, and more than 20 hours of member reading time. 

Do you think my article went viral? 

In case you're curious about the article:
“Using Git commands that will make you look like a senior developer” by pandaquests https://link.medium.com/HxOiFweuTab

If you read through the article, then maybe you can me tell why it resonates so much with medium audiences. Because I have no Idea why. It's just a list of git commands. All my other articles performed meh....
Ionic React Tutorial: One Way To Optimize Page Renders In Ionic React App with Tabs
Tags: ionic, react, javascript, webdev
Published: 2020-10-31 22:46:09

We show an approach to managing page renders in an Ionic Framework Tab Application. You can see the side effects in an application that has multiple tabs, but in general, it happens in all apps... rendering of pages that are not visible.

The documentation explains why this is happening

>From Ionic React Documentation: 
"For instance, componentDidMount fires the first time a page is displayed, but if you navigate away from the page **"Ionic might keep the page around in the DOM"**, and a subsequent visit to the page might not call componentDidMount again. This scenario is the main reason the Ionic lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire."

But the Ionic Team has also provided a solution which is using the lifecycle methods.

> [See React LifeCycle Methods Documentation](https://ionicframework.com/docs/react/lifecycle)

In this example video, we use the LifeCycle Methods to control the rendering of the page when is it not visible to minimize unnecessary operations which could impact the performance of your application.

{% youtube N5D9KLuuK18 %}

###CODESANDBOX
{% codesandbox 6qskh %}
100 Days of React
Tags: react, javascript, 100daysofcode, webdev
Published: 2020-10-31 22:44:47

This is my first real post on Dev.to! Halloween seems like a great day to do something spook-ily out of the ordinary and to shake things up, so I want to use it to announce that I will be starting my [100 days of code](https://www.100daysofcode.com/) with the intention of landing a job during the challenge. For me, that means landing **a full-time front-end oriented job using React on or before February 10th, 2021**.

## Background
I am a 29 year old web developer interning at a digital agency in New York City, one of the world's hottest job markets for devs, including front-end devs. Last year I moved here to attend a bootcamp and to land a job, so after the bootcamp, self-study, and finally, working as a front-end intern, this is the final step in that plan. I've chosen front-end instead of backend because although I love development in general, the most fun part for me is interacting with users and bringing great designs to life. I also happen to really like CSS- an apparently rare trait among coders.

## The Goal
Specifically, I am shooting for a full-time position at a company or at least a division here in New York. Covid makes things weird, so the job might be remote at first, but I do love working with a team in person so the hope is that after the pandemic settles down, I'll be getting on the subway to head into the office. Other specifics:
* The job should use React, a framework I have loved learning that is a highly transferrable skill
* The salary should be competitive for bootcamp grads in the area
* The product we're building should be something I connect with so that it's something I really believe in working on, since everyone knows the first year for a full-time developer is no cakewalk

## Daily Expectations
This actually isn't my first time trying a 100 days challenge. Earlier this year I tried a vanilla JS and web-dev challenge, and even bought a [domain](http://www.100days100projects.com) for it. So I know it can be really easy to fall off the horse, especially if you over-extend yourself. This time around each project has to be built in React. Here are the expectations:
* Each day I will create a project in React JS of any size
* Each project will have a github repo
* Each day I will post a blog post about the project and the intention for the project here on Dev.to and share both the blog post and the github link on my Twitter [@jwhubert91](https://twitter.com/jwhubert91) and my Linkedin. I'm new to Twitter but there's a thriving dev community there so now's as good of a time to start as any. Each week I will also share the 7 projects I worked on in a single post on Instagram, where my social circle is more active and I already have a few followers.
* In my off-time, I will also study interview questions 25 minutes per day- or 1 [pomodoro](https://en.wikipedia.org/wiki/Pomodoro_Technique)

**That's it!** I've already tweeted that I'm starting. So that means I owe y'all a first project by EoD. Better get to work!
Flat Geometric Design
Tags: design, webdev
Published: 2020-10-31 22:33:32

This is a new design I am working on. I saw something very similar to this on [reddit](https://www.reddit.com/r/web_design/comments/iazr3n/anyone_know_where_to_obtainhow_to_create_these/) which prompted the idea but made a few changes here and there. I think the original design was done by Robert Lea but I am not 100% sure so don't quote me on that but definitely worth checking out. Anyway, just thought it is important to give props where props are due.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/23udi6a8in31qzse6qbu.PNG)
Top data podcasts to listen
Tags: machinelearning, podcast, datascience
Published: 2020-10-31 21:15:48

1. AI podcast by Lex
2. TWIML AI podcast
3. Data stories
4. Concerning AI
5. Data skeptic
6. The AI show
7. Eyes on AI
8. AI in action
9. Brain inspired
10. No bias
11. NVIDIA AI podcast
iOS Icons Generator
Published: 2020-10-31 20:59:17

Hello 👋,

Yay! My first web project is live!

Customize your own iOS14 icons with a custom background then generate all icons with one click!

https://ios-icons.mobi/gen/ios-icons-generator

Get 50% Off with this coupon:
https://gumroad.com/l/iOS14-Icons/ii50off

👉 You will get:
iOS Icons Generator
84+ Holloween Icons.
84+ Dark/Light Icons.
84+ Colorful Icons.
11+ iPhone Wallpapers
Notes to myself - the DOM
Tags: frontend
Published: 2020-10-31 20:43:30

Document Object Model - The DOM
The DOM is a cross-platform browser interface that treats an HTML or XML document as a tree structure, with each node is treated as an object that is part of a document. So, for example, in an HTML document that looks like this:

<body>
  <h1 id="header">Hello, World!</h1>
  <p id="paragraph"> How are you doing today?</p>
</body>
The tag is treated as its own element, that contains two other elements, an <h1> element and a <p> element. Those elements have text inside of them, but the texts themselves are not elements, they are merely what the <h1> and <p> elements contain.

You can use the DOM to hook onto these separate elements and manipulate the data inside of them. So, for example, if I want to change the text inside the <h1> element, I can do so by hooking onto that particular node via its id, like so:

var element = document.getElementById(header);
element.innerHTML = "Goodbye!"
Notice that I used JavaScript to dynamically update the contents of the HTML node. The reason I can do that is the DOM has traversed my HTML document and made object nodes for each object in my HTML file. Pretty neat!
What Got You Into Programming?
Tags: watercooler, beginners, webdev, gamedev
Published: 2020-10-31 20:33:52

For me, it was finding out you could add custom templates to your MySpace page by copy/pasting blocks of code into sections of your profile. If you remember, you could make your background look like a matrix screen and your cursor look like it was on fire. The templates I found didn't *quite* look the way I wanted them to look, so I started combing through the html and tweaking numbers around until it looked the way I liked. 

I thought it was fun, so I signed up for a web design class in high school. Everything on the curriculum I had already learned from decking out my MySpace profile, so I started learning flash animation using ActionScript during class time.

That led me to game development, working with UnityScript in Unity, later switching to C#. Then Lua with the Corona and Defold engines. Which got me a job at a game company as a QA Tester. While I was there I started making web tools with my manager using JavaScript. 

Flash forward, I'm now a front-end developer and it's all thanks to MySpace 👍
Creating A Mac Form Application
With C# and XCode As A Beginner
Tags: codenewbie, csharp, beginners
Published: 2020-10-31 20:10:54

It was about 4 years ago when I started to learn programming. I started with C Sharp because I was creating interactive experiences in Unity. I really enjoyed the experience but after the project was complete, I never touched C# again until recently. 

I wanted to get back into the language to stretch my programming muscles. I do have 2 Windows (Notebook and a Tower) machines, but both are pretty old and very slow. My Mac, on the other hand, is newer and faster so I will be developing with that.  I will see how far I can get with developing an application with this setup before I spend the money on a different OS.

Today, I just wanted to make something basic. I want to connect my GUI to my C# code and "display" (write to the console) my input values. I do want to try something more advanced. Maybe create a to-do app. The logic is simple and I have created a to-do app in JavaScript. Writing it C# with XCode as the interface builder, well that is a different beast for me. 

If you are interested in what I did, here is the Github {% github loiscodes/basic-form-csharp no-readme %} The video I created goes into more detail:
{% youtube B8LnYlTiYp4 %}
How to use React Router
Tags: react, javascript, webdev
Published: 2020-10-31 20:07:52

In this post, I will show you how to include [React Router](https://reactrouter.com/web/guides/quick-start) in your react project. 

It's easy to use and it's great for improving the navigation experience.👌🏽

Here's a demo of a simple navbar (and the button in the About page that redirects back to Home): 

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

Now let's see how to get started with React Router. 

##Installation

- Install **react-router-dom**
- **Note**: Make sure that you're already working on a `create-react-app` before adding it to your project


```
npm install react-router-dom
```

##Include the Router
- Wrap your `<App />` component with `<BrowserRouter />`
- Add each `<Route />` with its path and respective component
- Wrap `<Switch />` around your routes. Switch will start looking for a matching route and the `exact` attribute will make sure that it matches exactly what we want

The `<Navbar />` component will take care of the `<NavLink />`, more on this below.

```javascript
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import About from './About';
import Home from './Home'; 
import Navbar from './Navbar'; 

function App() {
  return (
      <BrowserRouter>
        <Navbar /> 
      
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route exact path="/about" component={About}/>
        </Switch>
      
      </BrowserRouter>
  );
}

export default App;
```

##Add NavLink
- `<NavLink />` will act as each Navbar link, which is using client-side routing (exclusive of single-page applications)
- `<NavLink />` comes with the `activeClassName` property, which will allow us to add CSS to active/non-active links

```javascript
import React from 'react';
import {NavLink} from 'react-router-dom'
import './App.css'; 

export default function Navbar() {
    return (
        <div>
            <NavLink 
                activeClassName="selected"
                className="not-selected"
                to="/"
                exact
                >HOME</NavLink>
            <NavLink 
                to="/about"
                activeClassName="selected"
                className="not-selected"
                exact
                >ABOUT
            </NavLink>
        </div>
    )
}
```

## The `useHistory` hook

- What does it do? It provides access to the history prop that you may use to navigate 
- In other words, `useHistory` can be used for *redirecting* which is very convenient! 


```javascript
import React from 'react'; 
import {useHistory} from 'react-router-dom'; 

export default function About() {
    const history = useHistory()

    const handleClick = () => {
        history.push('/')
    }

    return (
        <div>
            <h1>ABOUT</h1>
            <p>THIS IS THE ABOUT PAGE</p>
            <div>
                <button 
                    onClick={handleClick}>
                    Back to Home
                </button>
            </div>
        </div>
    )
}


```

And that's it! 😬
Successfully completed the Hacktoberfest 2020 challenge!
Published: 2020-10-31 20:04:05

This is the fourth time that I participated for this and successfully completed the Hacktoberfest 2020 challenge contributing to several projects. So, taking part in this event was very interesting and gave me a plenty of experience about open source contributing.

Here is the link for the article.
https://www.linkedin.com/pulse/successfully-completed-hacktoberfest-2020-challenge-sooriyaarachchi/

#Hacktoberfest #Hacktoberfest #OpenSource #Contributing #Coding #Dev #DigitalOcean #intel
MY HACKTOBERFEST JOURNEY
Tags: hacktoberfest
Published: 2020-10-31 20:00:54

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Meet Me
 My name is Nike and the reason i joined the DEV community is because the link came with Hacktoberfest email so i don't really know what i am doing here (Kidding... or maybe i am not). I decided to participate in hacktoberfest because i wanted to learn how the whole open source thingy worked. 

### Background

 I am completely brand new to open source, i mean at the beginning of October i didn't even know how Github worked. And my coding journey has been like just 3 months old but i can assure you that i have lots of projects under my belt. P.S how many project do i have to do before i get to senior developer level, that Tesla wouldn't buy itself. 

### Progress

My hacktoberfest journey has been kind of a roller coaster. After checking out the first project i wanted to contribute to, i did a lot of rubbish on my laptop for like 2 days then abandoned it for like 2 weeks because i seemed to be doing the opposite of everything i should be doing and i was getting quite frustrated yunno (Based on i can't come and kill myself). But my stubborn nature cannot allow me to leave a project unfinished so i sat down one day and said Nike you cannot miss the chance to get free T-shirt. 

That day, i read all i could on how to create pull requests on github and got started on my open source journey. When you cross that first mile the rest of the journey becomes sweet and exciting. I would then go on to make 6 pull requests in 2 days. Now i am your go-to person for everything git and github. I love coding and building cool stuffs.

### Contributions

Check out my contributions and projects on my [github](https://github.com/minat-hub).
 

### Reflections
I would definitely participate in another Hacktoberfest. I learnt a lot of things during this period especially perseverance. I didn't really make any interesting connections during the challenge (Maybe one) but i would love to know you my awesome reader so free free to hit me up. My next step in open source would be to find more projects i can contribute to so if you know any, please send me in the right directions. 

Dear reader, follow me here i will write more articles in the future you will definitely learn from.
Day1 in Html/Css and Javascript 
Tags: html, css, javascript, webdev
Published: 2020-10-31 19:47:54

This is my day one with HTML/CSS and Javascript. This is the Portfolio I loved ❤to work with and the resources I've used for making this portfolio is by Using youtube and the link of the video I've used for learning and doing this site is 
📌 https://youtu.be/r_hYR53r61M

And I've uploaded my website in Netlify and I have also learned to use netlify forms for submissions and it worked😜😜😜..
 Here is my websites link
https://niroshkumarldb.netlify.app
👆Do check it out
gRPC and Node.js
Tags: node, grpc
Published: 2020-10-31 19:40:39

The start-up I am working with has chosen a microservice architecture for its product, and is predominately using [gRPC](https://grpc.io/) for communication between the services.  This has proven to be a tremendous challenge and growth opportunity for me - having not worked before with either microservices or gRPC.

I have found that there is not written about out using gRPC and Node.js and want to share what I have learned.  This will be a series of articles about what I have found - mostly by trial and error.  There is no particular order to this series, and most of the posts will be structured in a problem/solution type format.

I hope this helps someone along in their gRPC adventure.
How to use npm package without build tool?
Tags: skypack, html, javascript
Published: 2020-10-31 19:33:32


# How to?

* Search for npm package [skypack.dev](https://skypack.dev)
* Import script using skypack url in your html page
```
    <script type="module">
        import { nanoid } from 'https://cdn.skypack.dev/nanoid';
        console.log('Random ID', nanoid());
    </script>
```
* Refer to [index.html](https://github.com/mainendra/skypack-app/blob/main/index.html) for sample page using nanoid.

# Outuput (using sample index.html)

Page hosted on [surge.sh](https://m-skypack.surge.sh/)

<img src="https://github.com/mainendra/skypack-app/raw/main/output.png" width="600">
Hacktoberfest 2020 challenge completed!
Tags: hacktoberfest, github, opensource
Published: 2020-10-31 19:14:15

 ✨ 
Hi everyone!This was my first open-source contribution and I was really excited to be a part of this year's hacktoberfest. After successfully contributing to the open-source community it feels really amazing.✨ 

### Reflections
This was my first time participating in hacktoberfest And I am eagerly waiting to participate again in next year's hacktoberfest.
Thanks to @github, @DigitalOcean  -->
Google News | Crawler
Tags: node, tool, google, crawler
Published: 2020-10-31 19:01:27

<center>// start</center>

Hi everyone! 
[GitHub of the Project](https://github.com/DaxSoft/google-news)

-----

While I was coding a paid-project from my freelancer career. There was the need to get news from certain topics. I have searched and discovered that there are few solutions for this particular problem. So, this is the reason that I have created this package.

-----

<center>// How To Use</center>

It's pretty simple to use, in which you need to only define the class and call for the method run (async/await)

Example taken from the folder 'example/basic' at the github page.

```js
const { GoogleNews } = require('@vorlefan/google-news')

const news = new GoogleNews(['One Piece', 'Kingkiller Chronicles'], {
    routeName: 'download',
    language: 'en-US',
    localization: 'US',
    route: (route) => {
        route.set('src', __dirname)
        route.inject('download', 'src')
        console.log(route.get('root').filepath)
    },
})

void (async function () {
    await news.run()
})()
```

-----

<center>// Use Case</center>

 If you are creating a web-app, SaaS or whatever that needs to crawler the most recent news from certain topic, this is for you :)

-----

<center>// End</center>

There a lot of feature that I'm planning for this module, then if you want to, please contribute or follow up the news xD
Creating an Add Event to Google Calendar Link for Your Project
Tags: tutorial, webdev, beginners
Published: 2020-10-31 18:58:48

# What are Add Event to Google Calendar Links?
With the pandemic not seeming to go there are more conferences day by day. This has led to many apps and websites scheduling events on the user's google calendar so that the user gets a timely reminder for events/meets. Today I'm going to show you how you too can add this functionality to your web or mobile app very easily. By the end of this article, you'll be able to generate a link which then you can provide directly to your users or embed nicely in a button or image on your app. So let's get started.

# The Process
The process is fairly simple. Google Calendar provides this base URL:
`https://calendar.google.com/calendar/r/eventedit`
We can modify this string by adding parameters as per our needs. These are the following parameters we can add:

## Event Name
The first parameter we can specify is the name of the event. This is mentioned using the `text` parameter. For the sake of this example let's have the event name to be `Hello World Meet`.

## Date and Time
Providing a starting and ending date and time is mandatory. This must be provided in the ISO format. So if the starting time is 5 pm on 17th October 2020 and the ending time is 11 am on 18th October 2020 your starting and ending ISO strings would be `20201017T1700` and `20201018T1100`respectively. In case you haven't noticed the pattern it is:
`Year_Month_Date_T_TimeIn24HourFormat` without the `_`

## Event Details  
You can also choose to provide some extra information about the event in the Details section. For the sake of this example let the event details be: `The meet is going to be about programming.` This is optional though.

## Event Location  
Another optional parameter is the location of the event. Let's take this to be `Hierarch Square, Novigrad`.

With this, we're all set. The link that will create a Google Calendar event with all these properties is:
https://calendar.google.com/calendar/r/eventedit?text=Hello+World+Meet&dates=20201017T1700/20201018T1100&details=The+meet+is+going+to+be+about+programming.&location=Hierarch+Square,+Novigrad

Just in case you've not spotted the pattern here it is:
```https://calendar.google.com/calendar/r/eventedit?text={event name}&dates={start and end date and time in iso format}&details={event details}&location={event location}``` where you can replace the stuff in `{ }` with the values you desire. 

Where did I learn to do this?
[Kloudless Monday Mentorship](https://kloudless.com/blog/monday-mentorship-how-to-create-a-link-to-add-an-event-in-the-google-calendar-api/)

Thanks for reading :)