teleren/devto huggingface dataset:
Login Management for SPA and Everyone Else (Part II)
Tags: serverless, oauth2, webdev, login
Published: 2020-09-01 09:52:41

This article picks up from my original post (if you haven't read that, you can read it here: <a href="https://dev.to/ralphwjz/login-management-for-spa-and-everyone-else-12o6">Login Management for SPA and Everyone Else</a> ) 

In this post, we will complete the implementation and add the Login with the providers we want. 

There are two ways to achieve it. 
<ul>
<li>
The easy way</li>
<li>The not-so-easy way</li>
</ul>

I will go through option 1 :) 

<b>The Easy Way</b>
<p>
I take the code for the login extension available in <a href="https://app.pathfix.com">Pathfix App</a>. 
</p>

```HTML

	<div>
		<script id='pinc.helper' 
		  src='https://labs.pathfix.com/helper.js' 
		  modules='pinc.auth.min,ui.auth' 
		  data-client-id='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' 
		  providers='msazuread,discord,fb,github,google,linkedin,ms' 
		  data-ui-button-prefix='Login with' 
		  data-on-logged-in='onLoggedIn()' 
		  data-on-logged-out='onLoggedOut()' 
		  data-auth-success-url=''></script>
	</div>
	
```

The code from Pathfix will handle the steps involved in N1:/N2:/N3:/N4: from the login flow chart (as below)


![Codeflow for OAuth Login (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1598952669539/nMiKWJJCE.png)

As soon as this is placed I see the login buttons like so...

![login.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1598952910949/Z319hhtAR.png)


To handle the post login event I add the following code:


```JavaScript

	function onLoggedIn(){
		//N5:
		console.log($pinc.auth.profile)
	}

	function onLoggedOut(){
		//Code to redirect to login page
	}
	
```

That's it.
Day 12 of 100DaysOfCode
Tags: 100daysofcode, python, twitter, bot
Published: 2020-09-01 09:43:49

Decided to take a break from JavaScript and make a Twitter bot using Python. I looked for a tutorial online and was able to find one that seemed good. The tutorial was by [Code Wizard](https://www.youtube.com/watch?v=ewq-91-e2fw)

Got to the end of the tutorial but the bot isn't quite finished yet. I got it working but then wanted to add some features and now I need some debugging. It will be a task for another time. 

Working on my own little project was fun! Also now I remember how lovely the Python syntax is. 

The Twitter bot was made using the Tweepy library and the tutorial linked above. Tweepy has great [documentation](http://docs.tweepy.org/en/latest/) and making a bot was simple and fun (after I was granted access to Twitter API).

My process for getting approved for a developer account and getting access to Twitter API was surprisingly difficult. In the tutorial, it was only a matter of sending the application and that was done. I had to send multiple emails telling them why I need access and what I'm going to do with it. 

So if you are going to make your own bot remember to be very specific about your intentions. Also, read Twitter's general and Automation Rules. 

Once the bot is live I'll share the code on GitHub and will link it here. 


###What I did today:

####1. Started building a Twitter bot
https://www.youtube.com/watch?v=ewq-91-e2fw

#### What I learned from it:
* Working with APIs and libraries
* Reading and writing to files
* Reading documentation


####Time spent learning:
Task 'Twitter bot'. Elapsed time: 1 h 25 min 46 s

#### Time spent actually coding: 1h 15min

#### Total time: 1 h 25 min
This doesn't include time emailing Twitter and reading the rules, which probably adds an extra hour.  
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about)

### Further reading

#### [FreeCodeCamp](https://www.freecodecamp.org/learn)
Check out FCC for the best interactive exercises! I have finished the Basic JavaScript and ES6 lessons and can recommend them for a beginner! You can read more about the Basic JS from the post "Day 8" and ES6 from yesterday's post. 

#### [Eloquent JavaScript book](https://eloquentjavascript.net/)

###Psst
You can check my answers to the exercises of Eloquent JavaScript. You'll find them [here](https://www.arttupyykonen.com/ejs-solutions/).

This was a fun day! See you all tomorrow! :)
Mconnect Shipping Rules Extension for Magento 2
Published: 2020-09-01 09:41:51

Your online store comprises of various products in terms of shape, weight, sizes, material, etc. for shipping of these products it generates the need of shipping rules. These rules will let you apply tailor made shipping charges on the basis of settings configured by you. 

Mconnect Shipping Rule Extension for Magento 2 is the ultimate solution to generate infinite shipping rules to fulfil several expectations of online store owners. This custom shipping method for Magento 2 will let you create several shipping rules on the basis of characteristics and conditions. By this extension, you can make customised shipping rules which is entirely according to your requirements. The enabled shipping carriers are listed with the given shipping charge once the configurations and conditions are satisfied by the products added in cart.  It will be very helpful to prevent you from any kind of loss in shipping and also facilitates customers with the precise evaluation of shipping charges that is itself on the cart page. It also allows you to set shipping rates visibility that provides flexibility to the store owners if they would like to designate the specific shipping fees strategy to the particular addressed category.
 
Mconnect Shipping Rules Extension for Magento 2 Features:

On the basis of given conditions you can customise shipping charges for shipping carriers.

Using surcharge, replace or discount options you can recalculate shipping charges. 

Application of shipping rule based on particular products, categories, customer groups, etc.

Shipping charge varied on the basis of total quantity and price of products that is in the cart.

Capable of adding various number of conditions.

You can select days on which shipping rule is to be activated.

You can recalculate shipping charges on the basis of applied coupon code.

You can recalculate shipping charges on the basis of applied shopping cart rule.

You can prioritize the application of shipping rules according to your need like you can put 0 being the highest and succeeded by 1 and much more.

For more such Magento 2 Extensions visit Mconnectmedia.

Download now: https://www.mconnectmedia.com/shipping-rules-magento-2.html
React Components implementation in App. Break down your site into components and merge them
Tags: react, javascript, html, css
Published: 2020-09-01 09:41:36

In this video, I will show you the real use case of components  in App and how you can break down your complex app into components that help to manage app efficiently 


{% youtube lde3i2OJxg4 %}


hairSalon app link: https://hairshop.netlify.com
Flip-line
Tags: codepen
Published: 2020-09-01 09:39:39

This Multi State button is perfect to toggle through a limited set of modes as needs little space and avoids distracting popups or panels. The satisfying toggle is quite addictive.

All you need is a handful of div elements and include a tiny but of javascript and CSS in your project.

You can style this any way you want. The control is fully responsive.

Although there are 4 sides to this 3D control, you can have as few or as many options as you want.

Even the  color shade changes as the light angle changes on the surfaces.

Even though it looks like a cube, there are only ever two div's being animated. No point to mess around with elements you can't see.

optional element attributes:

direction - defines rotation direction "up", "down,""left" or "right"
shading - defines in % how much % the base color is made lighter and darker as the cube rotates (Default is 60%)
time - time it takes for a 90 degree turn. Expressed in ms. Default is 300ms.

{% codepen https://codepen.io/dinther/pen/OJNgQRw %}
DevOps - A Quick Overview
Tags: devops, docker, jenkins
Published: 2020-09-01 09:39:15

Hello World!

DevOps is one of the buzz words in the modern IT industry. Nowadays companies are adapting to DevOps for quicker software delivery.

In this post let us see what DevOps is and what is not.


#What is DevOps?
 
* DevOps is the combination of two words Development and Operation

* It is the software development strategy

* It is the methodology that bridges the gap between development and operation side of the company

* In other words, it is the practice of bringing agility to both development and operation team

#What DevOps is not?

* It is not Framework
* It is not Tool
* It is not a Technology

Hope you are clear now, DevOps is just a **methodology that bridges the gap between the development and operation side of the company**.
Mconnect Shipping Restrictions Extension for Magento 2
Published: 2020-09-01 09:16:32

Sometimes we need to restrict shipping for some valid reasons like banned trade of goods, export regulations, carriers not available for some locations, or high shipping charges. So, to save yourself from the losses, you have to take action by setting up custom shipping rules. The default Magento 2 shipping restriction is not that much capable of doing so without affecting your business in some specific ways. Therefore, you need a custom module that gives you full control over shipping methods and custom restrictions rules.

Mconnect Shipping Restriction Extension for Magento 2 gives you the authority to set up several numbers of custom shipping restrictions based on the specific customer group, cart, and the product attribute. The extension allows you to create and manage custom shipping rules from the simple backend grid for the selected shipping method. The extension gives you an option to set restrictions for a specific store view. Also, you can create an error or unavailability message to appear next to the unavailable shipping method. The extension has an option that uses shipping rule easily with the coupon codes. Customers won’t be able to check out if they are not eligible to use the specific shipping method and the extension will show an error. With proper setup, this module comes handy for Magento 2 store owners to provide a smooth checkout process. 

Features of Mconnect Shipping Restriction Extension for Magneto 2:

The extension is able to block particular shipping options or carriers.

You can create an unlimited number of custom shipping rules.

Easy to manage the custom shipping restriction with the backend grid. 

Create shipping limitations based on customer groups, carts, or product attributes.

Customers can use coupon codes along with the shipping rules. 

Shipping restrictions can be set for a specific store view. 

Option to set custom error or unavailability message for shipping methods. 

Admin can enable the restrictions when creating order from backend.

Helps to save your business from possible losses by creating shipping restriction. 

For more such Magento 2 Extensions visit Mconnectmedia.com

Download now: https://www.mconnectmedia.com/shipping-restriction-magento-2.html
Filtering in TypeScript
Tags: functional, typescript, codenewbie, webdev
Published: 2020-09-01 08:33:46

Say that you have this type:

```typescript
type List = (Subject | null | undefined)[]
```

Perhaps it is the result of querying for a list of identifications, where not every entry is guaranteed to have a result.

Nothing strange so far. However, let's say you now want to remove `null` and `undefined` elements, in order to do a further operation on the leftover `Subject` elements.

```typescript
interface Subject {
	id: string | number
	name: string
}

type List = (Subject | null | undefined)[]

const joe: Subject = { id: 0, name: 'joe' }
const jane: Subject = { id: 10, name: 'jane' }
const list: List = [joe, null, undefined, jane]

const names = list.filter(entry => !!entry).map(entry => entry.name)

console.log(names)
```

Unfortunately this does not work:

```bash
TSError: ⨯ Unable to compile TypeScript:
index.ts:12:58 - error TS2533: Object is possibly 'null' or 'undefined'.
```

We need to tell TypeScript that the filter operation ensures only `Subject` types are left.

```typescript
function exists<T>(value: T | null | undefined): value is T {
	return value === (value ?? !value)
}
```

The `exists` function, for example, makes sure to assert that value is of type `T`.

> In production code, try to avoid generic naming such as `T`

To filter and have `Subject` types as leftover:

```typescript
interface Subject {
	id: string | number
	name: string
}

type List = (Subject | null | undefined)[]

const joe: Subject = { id: 0, name: 'joe' }
const jane: Subject = { id: 10, name: 'jane' }
const list: List = [joe, null, undefined, jane]

function exists<T>(value: T | null | undefined): value is T {
	return value === (value ?? !value)
}

const names = list.filter(exists).map(entry => entry.name)

console.log(names) // [ "joe", "jane" ]
```

That's all! Now `TypeScript` makes sure that `name` is available on the filtered items.

Type guards are fun!
Hair Salon React App with Strapi Headless CMS. Design and Code
Tags: react, html, css, javascript
Published: 2020-09-01 08:13:50

{% youtube AjfahyY3YzE %}

[Live](https://hairshop.netlify.app/)

[Github Code](https://github.com/Alidhuniya/hairSalon-with-React-Strapi)

Note: Design files are located in the Design Directory of github code
Come and learn to made freely a bitcoin trading bot who tweet each day
Tags: node, javascript, serverless, googlecloud
Published: 2020-09-01 08:13:06

Hello everyone ! 

For this second session of classes, 
we will learn how to make a serverless trading bot that thanks to Firebase, trades and tweet its results daily. 
The video is in French but the subtitles are available in English.
You can directly skip the introduction and start the video at the fourth minute! 

*******
Youtube video: https://www.youtube.com/watch?v=FpgB8FWLUL0
*******
Github project: https://github.com/JustFuknDevIt/bender-consulting
*******

Enjoy and feel free to post your feedbacks so that I can continue to improve the channel !
Let's Talk About Perfectionism
Tags: devjournal, womenintech, codenewbie, beginners
Published: 2020-09-01 07:27:35

_This post was originally published on September 1, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

The thing about perfectionism - in coding, or really anything - is that it doesn't leave any room for creativity, spontaneity, or messy inspiration. Instead, it stifles all of these wonderful things.

Essentially, it creates a lot of unnecessary pressure when really we should be wanting to enjoy the juiciness of a tough problem or simply the sharp ambiguity of not knowing how to do something as we take step after step to figure it out and gradually close the gap between what we know and what we don't.

If I really stop to think about it, my favorite moments are when I figure something out that's been puzzling me for some time.

But when that feeling of wanting something to be perfect (*even* before I start in on it) stops me in my tracks because 'I don't know how to do it, so I'm not even going to try' - that inevitable future moment of discovery dissolves into nothing.

I don't know. It just feels like we've been brought up to be afraid to make mistakes, but I've always said that mistakes, especially in coding and learning something new, are the fast track to cementing any lesson in and ultimately getting there faster.

If you catch yourself wanting something to be perfect, take a step back and an objective look at what you have on your hands. If you were looking at this for the first time, what would you think of it? Is it good enough? Good. Ship it and move on the next thing.


----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
An open-source CSS Contest platform
Tags: css, opensource, showdev, design
Published: 2020-09-01 07:25:39

The title sounds complicated, but the idea is simple 😀: each week, you have an HTML file with some content, and your goal is to create the CSS that makes it a beautiful piece of art. The contest runs on Github and is fully automated. Contributions, entries, and content suggestions are all handled there, with the help of a bot. At the end of each week, the project bot selects a winning entry (the community votes by reacting to the entry PR), then deployed to https://csscontest.com and stays there for the whole week. A more detailed explanation is here: https://github.com/bitsofart/contest/#welcome.

This project is the result of a lot of my interests put together. I wanted to be a designer at the beginning of my career. Back in those days, https://www.awwwards.com/ was a fantastic source of inspiration - there was no Dribbble at the time, and I dreamed of one day having that website of the day ribbon on my website. Although this dream never became true, I still love seeing amazing visuals on the web, and I've always thought how nice it would be to have an award, like the Awwwards' site of the day, but more open in terms of content and selection.

Along with that, I'm also fascinated by evolution and the idea of things organically progressing in ways no one can anticipate. And I've been long thinking of this idea of a "crowdsourced" code project, and where a community of coders would take it.

So I merged the two ideas in this project: An open space for the community to participate in a contest to make beautiful things on the web. All the few contest's rules and their application are open-source (there are links for them in the repo), and everything is automated so we can have as few single-person interferences as possible. In an ideal world, everyone interested can participate, and I, as the owner of the repo, don't even have to look at it.

If you want to relax building something beautiful for the web, test your CSS skills, learn from others, or have some fun, please participate. If you liked the idea and know someone who would enjoy participating, please share it.

_Cover Image Photo by <a href="https://unsplash.com/@pankajpatel?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Pankaj Patel</a> on <a href="https://unsplash.com/s/photos/css?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>_
quick git bash shortcut tutorial
Tags: tutorial, git, gitbash, windows
Published: 2020-09-01 07:18:31

Quick tutorial about how to create an easy shortcut to **Git Bash** that starts in your preferred directory. This is for Windows 10 as of August 6, 2020.

## Step One

Press the **⊞ Windows Key** on your keyboard.

## Step Two

Find **Git Bash** in your Applications, right-click and select **Open file location**.

![Open file location of Gitbash](https://i.postimg.cc/3xkzT2ZZ/step2.png)

## Step Three

In Windows Explorer, right-click **Git Bash** and select **Create Shortcut**.

![Create shortcut by right-clicking Gitbash in your Windows Explorer](https://i.postimg.cc/1RKkcmtD/step3.png)

## Step Four

You will get an alert stating it will be placed on the Desktop, click Yes.

![Click yes on the alert, which will create a shortcut on your Desktop](https://i.postimg.cc/zvp4JjMx/step4.png)

## Step Five

Right-click your newly created shortcut, and select **Properties**. Under the **Shortcut** tab, delete `--cd-to-home` from the **Target** section. Then in the **Start In** section, change the path to where you’d like **Git Bash** to start when you open the shortcut. For me, this looks like:

![--cd-to-home has been removed from Target, preferred starting path is entered into Start in](https://i.postimg.cc/ZK7X2w6R/step5.png)

## Step Six (Optional)

Want it to Run As Administrator every time? Still under the **Shortcut** tab, click on **Advanced** , then check **Run As Administrator**.

_(WARNING: Please do your own research about what the ramifications of running as admin are. You could cause significant irreversible damage to your system.)_

![Choose advanced, then select run as administrator. Please be careful when doing so, however.](https://i.postimg.cc/hPPH2kz6/step6.png)

## Bonus

Now you can either just use the shortcut from the Desktop or, in my case, I cut the shortcut and put it in my ‘code’ directory. Then I pinned it to my taskbar (right-click, then click on **Pin to taskbar** )

![You can now pin to taskbar or move your shortcut to somewhere else.](https://i.postimg.cc/R0sRVYV6/bonus.png)

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/bashjoey)
What are Progressive Web App(PWA)?
Tags: webdev, react, javascript
Published: 2020-09-01 07:11:51

PWA is probably the new age of apps. You get the best experience of both worlds. PWAs work both ways, like a Native App as well as Web App. The creators clique for PWA has not yet grown but we can expect a breakthrough if essential apps are built with PWA clearance. 

Native App are the ones that are installed in your pc or mobile while Web apps run only in your browser. While both have their own pros and cons, PWA tries to utilize the best of both.

While going through the essentials of PWA I build a basic PWA weather app. Thanks to a brilliant tutorial by @javascriptmastery, if you are looking to try building a PWA do visit their YouTube page. 


Checkout this link to try the PWA weather app:

https://weather-progressive.netlify.app/

GitHub:
https://github.com/Progressive-Programmer/pwa-weather-app


The PWA Weather App uses https://openweathermap.org/api
This app is hosted in Netlify. 

Will post soon on how to host your apps free without breaking your head. 



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

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

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

{% instagram CElUbcIhWC0 %}
LeetCode 56. Merge Intervals 
Tags: javascript, leetcode, arrays, interview
Published: 2020-09-01 07:11:46

# Given a collection of intervals, merge all overlapping intervals.

**Example 1:**
Input: intervals = [[1,3],[2,6],[8,10],[15,18]]
Output: [[1,6],[8,10],[15,18]]
Explanation: Since intervals [1,3] and [2,6] overlaps, merge them into [1,6].
**Example 2:**
Input: intervals = [[1,4],[4,5]]
Output: [[1,5]]
Explanation: Intervals [1,4] and [4,5] are considered overlapping.
NOTE: input types have been changed on April 15, 2019. Please reset to default code definition to get new method signature.

Constraints:
intervals[i][0] <= intervals[i][1]

```javascript
var merge = function(intervals) {
    if(intervals.length <= 1) return intervals;
    // sort the array so earlier start times are at the beginning
    intervals = intervals.sort((a,b) => a[0] - b[0])
    let output = [intervals[0]];
    let current = output[0];
    // If the current interval's end time is greater than or equal 
    // to the next interval's start time, then we know there is an
    // overlap and we merge them.
    // If there is no overlap, then we add the next interval to the 
    // list of intervals in our output array and repeat the process
    // until we go through the entire list of intervals.
    for(let i = 1; i< intervals.length;i++) {
        const next = intervals[i]
        if(current[1] >= next[0]) {
            current[1] = Math.max(current[1], next[1]);
        } else {
            current = next;
            output.push(current);
        }
    }
    return output;
};

```