teleren/devto huggingface dataset:
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2019-10-22 19:41:51

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.

In response to **[What advice would you give to an unemployed software developer?](https://dev.to/ben/what-advice-would-you-give-to-an-unemployed-software-developer-38bb)** @jmfayard outlines a really powerful system:
{% devcomment gm32 %}

Sharing a sweet accomplishment in **[What was your win this week?](https://dev.to/jess/what-was-your-win-this-week-31jk)**, @chrisachard talks about the landing page for their new project:
{% devcomment gkhp %}

@sgarciadev offered a very informative reply to **[The best front-end framework to learn in 2019](https://dev.to/duomly/the-best-front-end-framework-to-learn-in-2019-dn7)**, leaving a number of clarifying thoughts:
{% devcomment gic6 %}

@timrodz chimed into **[Which non-computer science degrees apply to skills needed for a career in software development?](https://dev.to/ben/which-non-computer-science-degrees-apply-to-skills-needed-for-a-career-in-software-development-162j)** to talk about the immense power of soft skills:
{% devcomment gik0 %}

@ccleary00 replied into **[Cypress vs.....](https://dev.to/devteam/cypress-vs-kj)** to offer their thoughts about a potential alternative to Cypress:
{% devcomment gnif %}

See you next week for more great comments ✌
HTML Resources and Reference
Tags: html
Published: 2019-10-22 19:29:14

---
title: HTML Resources and Reference
published: true
description: Resource for learning HTML
tags: html
series: FrontEnd Development Zero to Hero
---
This section contains the reference and resources that will help you improve on what you've learned in this section.

##__TOOLS__

* [HTML Validator by W3C](https://validator.w3.org/)

##__BOOKS__
* The Ultimate HTML Reference by Ian Lloyd [available at Sitepoint]( https://www.sitepoint.com/premium/books/the-ultimate-html-reference)

##__YOUTUBE VIDEOS__
* HTML Crash Course for absolute beginners by Traversy Media

{% youtube UB1O30fR-EE %}

* Learn HTML5 in one Video by Derek Banas

{% youtube kDyJN7qQETA %}


#__REFERENCE__

1. Techopedia: "Definiton of internet"  https://www.techopedia.com/definition/2419/internet

2. History of HTML https://disenowebakus.net/en/html-history

3. Landofcode: HTML History http://www.landofcode.com/html-tutorials/html-history.php

4. Washington State University: HTML History https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.html

5. Stackoverflow: List of replaced elements https://stackoverflow.com/questions/38779034/list-of-replaced-elements

6. Void Elements on W3 https://www.w3.org/TR/html51/syntax.html#void-elements
Adding Auth0 to an Ionic Angular App Using Auth Connect
Tags: ionic, mobiledev, programming
Published: 2019-10-22 19:27:55

---
title: Adding Auth0 to an Ionic Angular App Using Auth Connect
published: true
description: Learn how to secure your Ionic app by adding user authentication with Auth0 and Ionic Auth Connect.
tags: #ionic #mobiledev #programming 
canonical_url: https://auth0.com/blog/adding-auth0-to-an-ionic-angular-app-using-auth-connect/
---
TTL;DR: In this article, you’ll learn how to add an Auth0 login and logout experience to an Ionic Angular mobile app using Ionic’s Auth Connect plugin. To see a complete working example, take a look at this GitHub repo.

What is Ionic Framework?
Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript). It’s focused on the frontend user experience, providing out-of-the-box UI interactions (controls, interactions, gestures, animations) so developers can focus on building the unique aspects of their apps. It’s easy to learn and integrates nicely with other frameworks, such as Angular, React, or Vue.uted and federated architecture when it comes to digital identities.

[Keep reading 📖](https://auth0.com/blog/adding-auth0-to-an-ionic-angular-app-using-auth-connect/?utm_source=dev&utm_medium=sc&utm_campaign=ionic_authconnect)

![Adding Auth0 to an Ionic Angular App Using Auth Connect](https://cdn.auth0.com/blog/illustrations/ionic-framework.png)
How YOU can learn modern JavaScript and GraphQL with these videos
Tags: tutorial, javascript, graphql, webdev
Published: 2019-10-22 19:19:17

---
title: How YOU can learn modern JavaScript and GraphQL with these videos
published: true
description: This is two videos roughly ~10 min long that teaches JavaScript and GraphQL
tags: tutorial, javascript, graphql, webdev
---

Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris

## Building your first GraphQL backend
{% youtube wlHeRugmGuI %}
This video teaches you how to build your first GraphQL backend. We teach fundamentals such as schema and resolvers and even learn how to integrate an external REST endpoint

## How you can learn Modern JavaScript
{% youtube 3mFDbcrU6IA %}
There have been some great additions since ES5 days. JavaScript is a joy to write thanks to these productivity enhancing features
PATCH Case Sensitivity
Tags: node, javascript, cors, express
Published: 2019-10-22 18:45:44

##For Future Reference

I had the following code in my front-end app:
```javascript
  const result = await fetch(url, {
    method: 'patch',
    headers: {
      'Content-Type': 'application/json'
    },
    body: json,
    mode: 'cors'
  });

```
I was getting CORS errors but I could see that the OPTIONS request was sending back PATCH as an allowed method. After banging my head against a wall for at least 2 hours, I finally stumbled on [this](https://stackoverflow.com/questions/34666680/fetch-patch-request-is-not-allowed) StackOverflow post. BOOM! Problem solved! "patch" needed to be "PATCH". 

Hope this helps someone!
Flexible JavaScript Components w/o the Overhead
Tags: javascript, components
Published: 2019-10-22 18:41:21

Hello all! 

I know we all love our JavaScript components around here, so I've been working on a very simple JS UI library after getting fed up with the overhead and complexity of modern frameworks. [Here's a quick writeup of the basics](https://medium.com/@patrickwees/flexible-javascript-components-w-o-the-overhead-b0c5c0dcb42e?source=friends_link&sk=99c4370a3ae8aa2c7f990401185240a3).

Any feedback at all would be greatly appreciated :)
Building our Live Code Conversations ReactJS Live Youtube Channel 
Tags: react, youtube, javascript, subscribers
Published: 2019-10-22 18:22:27

---
title: Building our Live Code Conversations ReactJS Live Youtube Channel 
published: true
description: We have a group of over 2500 React.js enthusiasts on facebook, with a very active wall of posts and people helping each other. We decided to go create a live youtube channel to compliment the learning path! 
tags: React.js, Youtube, Javascript, Subscribers
---

--React.JS Youtube Channel has soft launched!

YouTube: {% youtube q3ZGs2Z1rFE %}

Personally and professionally, I have been building groups on facebook for about a year now. And I have been lucky plus blessed to have grown a few groups that are sizeable enough communities to have real engagement and learn so many different things as well as contribute to mentoring those learning React.JS, Javascript, Node.js, Vue.js and Javascript. 

This article is a moving target and documentary of that experience which is unfolding on our group here at https://facebook.com/groups/LearnReactJS and on our new channel which has gotten about 65 subscribers in just 24 hours.  We are actively begging.. ahem.. asking every new member in our groups to subscribe at our new youtube channel over here https://www.youtube.com/channel/UCIscClModS1CRGhlUTocCGg

Update to the journey, yesterday I paused to help build a fence for one of our dog rescues at our home and now we have met our 100 member goal for the channel! 

Is this a shameless post asking you to join and become part of our Live Youtube Channel about REACT? Yes, yes it is. 

So if you like javascript and are beginner, intermediate or expert React, I want to interview you on our channel. 

Message me, or join our group at https://facebook.com/groups/LearnReactJS
and subscribe, for the love of all, just subscribe, Ill be in your debt. You can do that here => https://TinyURL.com/LearnReactJS (soon in about 27 days we will have our vanity url) for now, its TinyURL links..

Ok darnit, that is no way to end an amazing post about our channel.  With the warmest regards, thank you in advance. 

-Chad
www.ChadCollins.com
Easy social media preview card generation
Tags: tutorial, webdev
Published: 2019-10-22 18:16:25

---
title: Easy social media preview card generation
published: true
description: How to generate social media cards easily with webshot.deam.io
tags: #tutorial #webdev
---

Instead of creating your own image for your `og:image` and `twitter:image` meta tags, you can use a free service that takes a screenshot of your website and uses that as the image. In this case we are using [webshot.deam.io](https://webshot.deam.io/). More about this service [here](https://dev.to/deam/free-website-screenshot-service-27hh).

### Example
```html
<head>
 <title>Webshot</title>
 <meta property="og:image" content="https://webshot.deam.io/usecrypto.xyz?width=1200&height=630">
 <meta property="twitter:image" content="https://webshot.deam.io/usecrypto.xyz?width=1200&height=630">
</head>
```

### Result
![Twitter card](https://i.gyazo.com/d14fe981eca171c2a0a3380bca3b56e6.png)
React Functional Hooks Components > Stateful Class Components
Tags: react, functional, components, hooks
Published: 2019-10-22 18:05:41


With a quick glance at the examples below, it's immediately clear that with hooks: 
* managing state is simplified
* there is no more dealing with "this"
* code is much shorter
* life is much better

Stateful Class Component
```react
import React, { Component } from "react";
 
class ClickCount extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 };
    this.clickHandler = this.clickHandler.bind(this);
  }

  clickHandler() {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.clickHandler}>Click me</button>
      </div>
    );
  }
}
```

-----------------------------------------------------------

Functional Component with Hooks
```react 
import React, { useState } from "react";

function ClickCount() {
  const [count, setCount] = useState(0);

  function clickHandler() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={clickHandler}>Click me</button>
    </div>
  );
}
```

Hooks was introduced with the release of React 16.8. [Follow this link to learn more about React Hooks.](https://reactjs.org/docs/hooks-intro.html)
Semi-automated tasks - Building SaaS #11
Tags: python, django, saas
Published: 2019-10-22 18:02:59

{% youtube u54z0JTIIRE %}

In this episode, we worked on a tool designed to help with backend manual tasks that would semi-automate the work.  By automating some portion of the task, we're able to make it way faster to complete.

Show notes for this stream are at [Episode 11 Show Notes](https://www.mattlayman.com/building-saas/semi-automated-tasks/).

To learn more about the stream, please check out [Building SaaS with Python and Django](https://www.mattlayman.com/building-saas/).
My Favorite Atom Extensions
Tags: html, extensions
Published: 2019-10-22 17:52:14

##1. Emmet

One of the most popular extensions with over 2.8 million Atom installs, Emmet makes writing HTML quick and effortless. Emmet is essentially a toolkit of snippets, but dynamic and on steroids. 

[Docs](https://docs.emmet.io) | [Cheat Sheet](https://docs.emmet.io/cheat-sheet/)

![emmet example](https://media.giphy.com/media/YMRRpjHPXN1oubYrON/giphy.gif)

##2. Color Picker

For the frontend web developers, working with colors can sometimes be hard. Find the *perfect* color can sometimes be a painstaking task. With Color Picker you won't need to leave your text editor to access all the colors of the world, wow.

[Docs](https://atom.io/packages/color-picker)

![color picker example](https://media.giphy.com/media/fAV1Pq3gJDHefd7yvW/giphy.gif)

##3. Prettier

This extension is my favorite and I use it obsessively even when I know it won't change anything. Prettier is an opinionated code formatter for multiple languages. Basically, it makes your ugly code with all of its unnecessary whitespace, missing characters, empty lines, etc and reformats it to a standard that has been accepted by many.

[Docs](https://prettier.io/docs/en/index.html) 

![Prettier example](https://media.giphy.com/media/mDH7isyULBod9rFchT/giphy.gif)

##4. Linter

After installing Linter, I can't imagine a life without it. Linter will attempt to notify you of any errors or other bits of useful information while you're writing your code. At save, it will also tell you what went wrong and where within your text editor even if your programming language doesn't support such features. My favorite feature is when I have an assigned variable but is unused throughout my code.

[Docs](https://atom.io/packages/linter) 


##5. Scroll Through Time

Scroll Through Time lets you use your trackpad or click wheel to, well, Scroll Through Time™. My only gripe with this extension is that if my code bleeds off the window to the right, scrolling with two fingers won't take me to the end of the line, instead I end up scrolling through time.

[Docs](https://atom.io/packages/scroll-through-time) 

![scroll through time example](https://media.giphy.com/media/lnOx3Cz1ZrUejF2fNx/giphy.gif)
Be openminded
Tags: career, motivation
Published: 2019-10-22 17:16:16

Be open minded, explore new worlds, points of view or whatever you want to call it, it’s something that I’m learning a lot of it's benefits lately. Being a developer of a particular technology, I’m constantly learning from other options, languages, or frameworks, but my idea isn’t to move to another language but to explore new things, new solutions, new ideas, new communities, new ways to do things. Normally by doing this you can discover that maybe you’re in your comfort zone solving the problems on the way that you know, without questioning why are you doing something, or why are you always getting the same solution.

I’m a Ruby on Rails dev, and I really like it, but I know that it doesn’t have the most active or updated community. The language/framework is really stable, with a lot of years in the market and a lot of companies (and big player companies) that implement it to their normal development, then if it’s so stable, and big companies use it, why go to other languages, why learn from other communities? 

The answer that I have today is activity, today we have active communities like Javascript or Python, but most important, proactive communities, launching hundreds of “packages” resolving maybe the same problem, but with different points of view, with pros and cons, and this is where we need to learn, not only check a technology or package or gem, check pros and cons, and if it’s not for you, discard it. Did you asked why they are solving the problem in this way? If you can understand this, you will be earning and growing a lot as developer, increasing your way to see the world and you will improve your next time coding, or thinking a solution.

Why only leave on black or white solutions? We need to understand that in this world, where the innovation is incredibly fast and is increasing day after day, we don’t only have two opposite solutions to a problem but a gamma of solutions to the same problem, maybe with other technologies, maybe with other points of view, Why wouldn’t we take advantage? Maybe you will discover a new package that your ecosystem need that is not implemented yet, or you will start to understand more and more the limitations of your language, and this would help you, because instead of forcing it to be something that is not, you can squeeze your language at 100% without losing it’s value.

The idea that I want to implement in your head today is, discover, be curious, learn from other technologies, frameworks, communities, people from other areas, and try to take the general ideas of what you learn and apply it on what you know, what you work, what you do every day, and you will growth professionally exponentially.
High performance with Webworkers
Tags: javascript
Published: 2019-10-22 17:07:26

# What I'm doing
I'm working on an algorithm reactive diffusion which requires per pixel manipulation on canvas. Following the coding train instructional video: {% youtube BV9ny785UNc %}

### A few changes
Instead of following to the letter I am making a few changes such as either to reduce jank or to speed up time to render, after all this canvas will be surrounded by UI eventually.

- Not using P5.js (I want to learn)
- OffscreenCanvas worker
- Disabled transparency in 2D context
- Using Parallel.js for inline workers.
- Creating the image data directly with ImageData constructor
- Convert image data to Unit32Array as described https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/

### My (un?)realistic requirements
As you can see this is an excersize in performance as well as a pretty animation.

I know that I would love the ability to render full size of the screen of up to 27 inches without much of a wait, sub 1 second would be outstanding. Even a little flash would be fine.

### The rules
- No fancy ES6 array methods (perf reasons)
- use ye olde for loop
- keep optimizing
- Use workers to take strain off main thread
- post processing may be an option (CSS)

### Getting started
So I know I need a multidimensional array representing X and Y axis, each item in the Y axis will likely be an Object literal with contains information on how to transform the px that it represents, `450,255=red`you get the idea.

So I figured, might as well use a Map of Maps instead of arrays, that's probably going to result in understandable code. They are apparently faster than arrays too, so each map is a 0 indexed wrapper containing objects.

This is actually pretty slow to create (WxH)n Maps so I thought, let's get this into a worker and figure out what to do from here... > 10 seconds to run using Parallel.js 😱, it seems much faster in the main thread < 2s so I'm a bit stuck, what am I doing wrong, is newing up a map that expensive?!

### From here

Your comments will be really helpful!

I'm also going to look into using wasm for this bit as have had some fun before with emscripten.

Also, am I mad doing this in 2D context should I just go webgl, learn it and stop moaning?

Should I tile the canvas somehow or even use CSS box reflect and render just half the size?

Tell me what you think, and share your tips on intensive jobs in JavaScript. 🥳
How can a QA help out during Hacktoberfest?
Tags: hacktoberfest, qa, discuss
Published: 2019-10-22 16:22:15

I'm stuck at 3/4 (and willing to go over 4) but I can't think of a good way to utilize my skillset rather than just taking the good first-timer issues away from new devs. 

*****

My specific thoughts for me, but the question in the title can hold for any QA:

My day-to-day is in Jasmine, so I might be able to find a JS project and clean up unit tests, but most of my work is in feature verification. It's not really realistic to jump in out of nowhere and start writing end-to-end tests when you don't actually know what the requirements are or what a good regression suite to tie into CI would need to look like.

*****

So what should a QA do to be most helpful during Hacktoberfest?
ES6 object.assign() method Explained With Example
Tags: javascript, es6
Published: 2020-02-05 07:43:28

---
title: ES6 object.assign() method Explained With Example
published: true
date: 2019-10-22 16:13:44 UTC
tags: Javascript,es6,javascript
canonical_url: https://codesquery.com/es6-object-assign/
---

This article is a detail explanation of the ES6 object.assign() method. This article will help you to explore your object in JavaScript in a more manageable way. object.assign() method introduces in the ES6(ECMAScript2015) which copies the all enumerable own properties of one or more object into other. Javascript doesn’t have traditional classes like other programming [...]

The post [ES6 object.assign() method Explained With Example](https://codesquery.com/es6-object-assign/) appeared first on [CodesQuery](https://codesquery.com).
Programming Challenge on Photos
Published: 2019-10-22 15:44:36

I have 15 A4 papers in which there are picture of varying size of format TFF.
Each A4 paper contain a single picture which not exactly placed at an angle of 90 degree.(for e.g a picture is placed at an 30 degree in the A4 sheet)

The goal is to calculate the angle at which this picture would turn into 90 degree.
Using your own figures, crop and resize the picture and rotate picture to make it as it should be feasible.

Finally, convert all these pictures into PNG format

(hint first rotate,then crop, resize and convert) 

Kindly do pull request on my github. 
https://github.com/jhivesh/challenging-programming-1
#discuss #beginner #challenge #python #java
VueJS Composition API Sample App w/video
Tags: vue, javascript, webdev, tutorial
Published: 2019-10-22 15:40:28

Vue Composition Sample App using the 2.0 plugin

simple list of things app that you can add and delete items from converted to us the new vue composition-api with vue 2.0. 

**Note:** In this example I am using the plugin provided to support the functionality in 2.0.

## Video Series Playlist
https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz


YouTube: {% youtube _qh18Q1I4-M %}

Composition API RFC | Vue Composition API https://buff.ly/2He4rUk
Vue2 plugin for the Composition API. https://buff.ly/35TgSja

Full Source Code Here: https://github.com/aaronksaunders/vue-composition-app-1


 #vuejs #vuejscomposition #vuejshooks #javascript