teleren/devto huggingface dataset:
The Value of a Designer
Published: 2020-07-14 23:06:04

Fun fact, I am a web designer (who knows enough code to get in trouble).  I went to school to be a web designer.  I’ve been through a boot camp, sat through Lynda and Udemy courses, read design theory books like they are going out of style, *but why?*  

Why is that a thing when there are template sites and drop and drag services, so anyone can be a web designer, right? Wrong, a web designer and a website creator will get two different end products.  A designer asks “how can i make this site better for my user” and a template asks, well it doesn’t ask anything, but the template designer makes sure it is intuitive and easy to use for the person building the site. 

So, with all the options to create a website without a designer, why would you?  I think there are instances where it absolutely makes sense to use the template or prebuilt model for a website, but not every time.  If your website is purely informational and you don’t intend for your audience to take any sort of action within your site, then the template site will work perfectly for you.  If you are looking to have any sort of return on your web traffic, you need a designer.

*Why?*  Because every decision has a reason behind it, usually based on research.  Rarely will you hear a designer tell you they made a decision solely based on something looking cool or because they liked it, odds are they have put a lot of time into understanding the behavior of the person looking at the component and knows what will garner an action, a feeling, a response.  That is the true value of a designer.
event names in javascript
Published: 2020-07-14 22:53:54

---
title: event names in javascript
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I suck at web dev... I just debugged a non-working button for longer than I care to say. Needless to say there is not an "on lick" event. It is called "on click" ... learn from my stupid.
Accessibility for the web - what is it and why do we need it
Tags: webdev, tutorial, javascript, react
Published: 2020-07-14 22:25:12

What is accessibility and what is the impact it has on disabled people when they're trying to use the web?

>*Accessibility refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both `“direct access”` (i.e., unassisted) and `"indirect access"` meaning compatibility with a person's assistive technology (for example, computer screen readers).*

In short, we can say that accessibility means anyone can access and benefit from our website - even people with `disabilities/ special needs` (for example, people with visual or hearing impairment, people with cognitive disabilities etc). With the increasing use of the Web, it is essential that it's accessible in order to provide `equal access` and `equal opportunity` to people with diverse abilities. This might come as a surprise to some but in many countries around the world, accessibility is `regulated` by law - this means it's mandatory to make sure our product can be used by everyone and we can be fined when this doesn't happen.

By ignoring accessibility when designing for the web, we risk penalties and we're excluding around 15% of Earth's population from using our product (number based on a 2011 World Health Organization report concerning disability). Building with everyone in mind is not only the right thing to do but it also helps SEO - the better the experience means that users spend more time on our website. The longer the visit, the better Google's algorithm ranks us.

Web accessibility depends on several factors working together, including `web technologies`, `web browsers`, `authoring tools`, `websites` etc. 

*Image source: Marvin Meyer/ @marvelous on Unsplash*
Which state management library to use with React?
Tags: react, typescript, redux
Published: 2020-07-14 22:22:23

I'd start by not using any state management library. You can use React's built-in state management as long as you're not using the same state in 2 parts of your app. You can ship small apps without having to choose any. 

Naturally, the need for sharing state arises sooner or later. This is a good time to consider Recoil. It's easy to learn and doesn't take over your whole codebase. It's also pretty great with TypeScript.

I'd also check out [xstate](https://github.com/davidkpiano/xstate).

### What I've tried since React first came out
- Flux
- Reflux
- Redux
- [Using my own contexts with the hook API](https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/)
- Recoil
3 Mistakes of My life!- during College Placements
Tags: react, webdev
Published: 2020-07-14 22:17:44

So, how many times do you feel like traveling back in the past and starting 'not from scratch' but at least tiptoeing safely from the mistakes you made.
![dark1](https://media3.giphy.com/media/87dGn81U6RvMSRYoRe/giphy.gif?cid=ecf05e4727542e4a560c0bf74f4fdb687f8bcec63be21e2e&rid=giphy.gif)
On a serious note, it just sometimes churns my head for just simple steps that could have made us all winners through our doomsday(the placement days).

**First, choosing your niche**
Not everyone can own "c/c++/java" as their cup of tea,but there is a whole lot of big world out there where you could not only dip your feet but swim through, like try- web development, cloud engineering, IOT and many more. 

**Second, Develop something Real**
Yeah, I get it they all study like sheeps in heard, everyone asking for Datastructures, linked list, and stuff, and even if after trying, you feel like "you just can't win it..", Drop it! Design your portfolio the way you want. Show the most amazing applications instead, that you designed with all your hands on. You might give them a spark in their eyes, compensating your downfalls.
![dd-1](https://media0.giphy.com/media/dXiZG74OIEYKTpP2Y5/giphy.gif?cid=ecf05e47f8890bc7b35b9e9a7c1e08f9e2836fae99e2a290&rid=giphy.gif)

**Third, Never ever underestimate yourself**
The job you are getting it's not because of luck, byChance or they are generous or anything you just have to stop feeling that. You might feel like everyone is far superior to you, but you still deserve it. Just you have to find your place to fit in. Might not be as a hardcore "Developer" but start as an "Analyst" or "UI/UX Designer" or "Data scientist". The IT industry is not limited to coding only. Go, find your Niche!
![dd-5](https://media3.giphy.com/media/craZZHkABpd9m/giphy.gif?cid=ecf05e470754c51ec9d0feb2d58f25aca8c5834e665e1351&rid=giphy.gif)

**Summary:** Always go to the interviews with all your arrows polished in the quiver either as a fresher or an experienced. You can turn the interviewer as an audience where you can display your love of Technologies and display all your masterpieces.
![dd-2](https://media2.giphy.com/media/EMm31ROmLJtEk/giphy.gif?cid=ecf05e477eebf37e5c7deaa9359375e972250976c4593510&rid=giphy.gif)
The Prioritising Scheme – How to "eat the frog" with Super Productivity
Tags: productivity
Published: 2020-07-14 22:05:46

---
published: true

title: The Prioritising Scheme – How to "eat the frog" with Super Productivity
description: How to use the prioritization scheme to get more done
tags: [Productivity]

canonical_url: https://super-productivity.com/blog/prioritising-or-how-to-eat-the-frog-with-super-productivity
cover_image: https://images.unsplash.com/photo-1545421461-c3c644552f36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1265&q=80

---


*This little article is based on [smalltimer's](https://github.com/smalltimer) comment in [this thread](https://github.com/johannesjo/super-productivity/issues/441#issuecomment-657755726) who kindly allowed me to use his input for it. The method is illustrated using my [favorite to-do-app and side project Super Productivity](http://super-productivity.com/), but can be implemented with any To-Do App that supports tagging and of course pen & paper as well*


---

To make it easier for yourself to work on tasks that actually are the most important (and sometimes the most daunting) having a look at the prioritization scheme from ['eat that frog'](https://www.google.com/search?gs_ssp=eJzj4tLP1TcwKbc0M0kyYPTiTU0sUSjJABJpRfnpAGe7CCE&q=eat+that+frog&oq=eat+that+frog) can be helpful. 

The idea is to plan actionable tasks for your projects and make sure to assign a tag (A, B, C, or D) to each task. Each letter stands for a different category of  urgency to act:

A: Tasks, when they are not done, will have serious and fairly immediate consequences for the project.

B: Tasks that are important, but if not done right away, do not have immediate serious consequences.

C: Tasks that would be nice to do, but can wait.
 
D: Tasks where you are waiting for input from other people, or tasks that should be delegated as soon as possible because the action required is not up to you.


It's a good idea to go through the plan every few days and revise the tasks and their priorities. Then, each morning or the night before, it is just a matter of going through the 'A' tag and identifying the tasks for the day. 


![Prioritizing tasks](https://dev-to-uploads.s3.amazonaws.com/i/bz3t8uduck7jno02crng.png)
 
![B Tasks](https://dev-to-uploads.s3.amazonaws.com/i/nvwd61ef1767yfuysvn5.png)
Show different error message in React based on fetch status code
Tags: react
Published: 2020-07-14 21:56:05

So you want to show a different error message in React based on the HTTP status code you got? Try this:

```ts
import * as React from "react";

class InvalidRequestError extends Error {
  readonly type = "InvalidRequestError" as const;
}
class UnexpectedError extends Error {
  readonly type = "UnexpectedError" as const;
}

type ResponseError = UnexpectedError | InvalidRequestError;

export default function App() {
  const [error, setError] = React.useState<ResponseError>();

  React.useEffect(() => {
    async function doRequest() {
      const response = await fetch("https://httpstat.us/400");
      if (response.ok) {
        // Store response body normally
        return;
      }
      if (response.status === 400) {
        setError(new InvalidRequestError());
      } else {
        setError(new UnexpectedError());
      }
    }
    doRequest();
  }, []);

  return (
    <div className="App">
      <h1>Error</h1>
      <h2>Status type was: {error && error.type}</h2>
      {error && error.type === "InvalidRequestError"
        ? "Invalid request"
        : "Unexpected error"}
    </div>
  );
}
```

### Why not just store the status code in the component's state?

You totally can. This is just an abstraction one level higher from that. The goal later on for me is to move these fetch-calls to a new module – a module that would only talk in terms of domain language, so:

```typescript
export async function getUser(id: number) : Promise<User> {
  const response = await fetch("https://api.example.com/user/" + id);
  if (response.ok) {
    // Return the found user object
    return;
  }
  if (response.status === 404) {
    throw new UserNotFound();
  } else {
    throw new UnexpectedError();
  }
}
```

See what happens here? The caller of this function doesn't (and shouldn't) know anything about HTTP or where the user was gotten from. It could've come through WebSockets for all we know. This means the caller wouldn't have access to the HTTP statuses anymore either, which is a good thing so our HTTP layer doesn't leak to our view layer. 


So our first example would turn into something like this

```ts
import * as React from "react";
import { getUser, ResponseError } from "./services/users";

export default function App() {
  const [error, setError] = React.useState<ResponseError>();

  React.useEffect(() => {
    async function doRequest() {
      try {
        const user = await getUser(123);  
        // Store the user normally
      } catch (error) {
        setError(error)
      }
    }
    doRequest();
  }, []);

  return (
    <div className="App">
      <h1>Error</h1>
      <h2>Status type was: {error && error.type}</h2>
      {error && error.type === "InvalidRequestError"
        ? "Invalid request"
        : "Unexpected error"}
    </div>
  );
}
```
Re-Coding HTML For SEO Purpose?
Published: 2020-07-14 21:51:39

Why Does SEO Need HTML Knowledge?
If there's one thing that I've seen since I started doing SEO consultancy services is the fact that many are completely ignoring the technical side of their websites. In fact, even if CMS-based, the online portal should have someone with relevant knowledge for what concerns meta titles, descriptions and where keywords should be placed within the backend of the site. Keep in mind that this is JUST BASIC STUFF but you won't imagine how many times this is poorly done.

The Microdata Rant
For us web developers who recently embraced the SEO discipline, microdata has been quite painful to deal with. Although Google recently decided to embrace the Schema.org culture, their implementation for what concerns structured data has been limited to JSON-LD pieces which drastically limits our coding optimisation. Don't get me wrong, the result is what truly matters when it comes to structured data, but Google's policies should be updated, especially on their crawling process.

The Crawling Budget
If you're a web developer who's working with a client who wants SEO, you will definitely have some problems with Javascript and everything that is targeting a website's crawling budget. This has been said in many interviews, webinars, Reddit's AMA and public speakings:
Googlebot is old and it's evolving at an incredibly slow pace. It has been stated, in fact, that the bot is using Chrome 41 to crawl websites, therefore all the newer syntaxes like ES6 are only partially supported. Chrome 64, which is the newest version, should help to keep the bot up to
the pace, but no one knows when it will be released and implemented into the crawling process. With this in mind, it's important to act accordingly in order to understand how your JS sections are performing from an SEO point of view, especially if you are running an e-Commerce store,known for being very JS-heavy. I recently worked with the biggest <a href="https://oderpy.com/">  seo company in sheffield </a> currently offers in order to optimise their entire backend, let me know your thoughts!

The Speed Myth
Alright, let's cut this down. HTML and CSS are not impacting your website's loading speed. Javascript does. That's it. Pretty easy and simple to understand and here's why. Given the fact that Googlebot crawling process is based on "Wikipedia-based" pages, it's quite easy to understand how and why these 2 parts are the first ones to be crawled and indexed, the rest is explained in the paragraph above.

To Conclude
Look at your site's backend. Stop using simple editors for your CMS (WP in particular) as they contaminate your site with tons of JS variables which are impacting either the crawling budget and the site's speed. Optimise your HTML and CSS and SEO-wise, you should be alright (from a technical point of view)
Getting the highest ROI out of Contractors
Tags: productivity, management
Published: 2020-07-14 21:38:57

[Uclusion](https://www.uclusion.com/?utm_source=devto&utm_medium=blog&utm_campaign=devcontractor), works a lot with contractors. If you’ve ever done so yourself, you understand that the single biggest problem is making sure that the contractor is constantly doing useful work.

We believe that the features we describe below are the *minimum requirements* for any product which is going to help you get good ROI from your contractors.

## **Contractor “Swim Lanes” (personalized Kanban boards), are right on your home page.**

![](https://cdn-images-1.medium.com/max/4598/1*6rNCB3KQzD5_LyvZmdxAsQ.png)

## **Approval for a story requires value to be assigned to a story.**

![](https://cdn-images-1.medium.com/max/4506/1*yZJ_OHWkojsz-mkugi0-cA.png)

## **If the story is taking more time than estimated we will demand a progress report from the contractor and mark the story as in danger.**

![](https://cdn-images-1.medium.com/max/4604/1*glQZ1cmWUZJ_307jMgZ52A.png)

## **When your contractor raises a blocking issue on a story, you will be immediately notified, and will see it in the swim lanes.**

![](https://cdn-images-1.medium.com/max/4730/1*Ay46dxoXtMKZhvpiU6HG3g.png)

## **You can provide, TODOs and the contractor can’t move the story forward until they do what you tell them.**

![](https://cdn-images-1.medium.com/max/4486/1*R2Uq_cNYd3nqznSFP0JwPA.png)

## **It’s clearly visible when a story needs your input.**

![](https://cdn-images-1.medium.com/max/2512/1*Jkv0eH_-3MkaCggY5N0oYw.png)

## **Communication resides inside the story, not outside of it.**

![](https://cdn-images-1.medium.com/max/2536/1*9sucgym1XQC8xzZkPogXiQ.png)

## **You can easily communicate with images and files, not just text.**

![](https://cdn-images-1.medium.com/max/2464/1*JiDhwpQA-Fu0I_GEro9qTw.png)

## It *is* possible to effectively manage contractors without spending inordinate amounts of time or effort. However to do so you need a tool like Uclusion, or you’re going to see significantly lower ROI than you could be.
Sun Tzu's wisdom in Software Development
Tags: philosophy, technology
Published: 2020-07-14 21:38:24

These are some thoughts that came to me after reading [this summary of "Deciphering Sun Tzu: How to read The Art of War"](https://www.evernote.com/shard/s199/client/snv?noteGuid=021bce7d-033e-408f-a092-2da6615e8826&noteKey=7002479436dada5f&sn=https%3A%2F%2Fwww.evernote.com%2Fshard%2Fs199%2Fsh%2F021bce7d-033e-408f-a092-2da6615e8826%2F7002479436dada5f&title=Deciphering%2BSun%2BTzu).
 
Some of the ideas that Sun Tzu expresses are close to Taoism. The one that got me interested is about "turning dualism into dialectical monism".

In western philosophy, two contradicting options exclude each other - there can be either A or non-A. Eastern philosophy is more flexible than that. A and non-A can coexist in different proportions, can interchange each other, and can be even complimenting each other.

There is an example of attack and defense in a battle. According to the principle of yin-yang, they are not contradicting strategies but complimenting each other. A wise general has to keep in mind both of them, adjusting their balance dynamically. Depending on the situation, one becomes more important than the other, but the balance can change at any moment.

If you don't keep the balance, then "anything bears its own seeds of destruction when overextends". Focus for too long on the attack or the defense exclusively - and you are going to lose the battle.

This article made me think about discussions we often have in Software Development. Many times I saw people arguing about choosing between two options, like:
- TDD vs no tests at all
- clean code vs dirty hacks;
- microservices vs monoliths;
- long-term goals vs short-term benefits;
- new and hyped tech vs old and battle-tested tech;
- statically typed languages vs dynamically typed languages;
- face-to-face communication vs strict processes;
- custom process per team vs generic process for the whole company;
- teaching someone how to fix vs quickly fixing yourself;
- compact code vs readable code;
- Agile vs Waterfall;
- SAFe vs LeSS;
- OOP vs FP;
- and so on, and so on.

We don't become better developers by "knowing the right answer". We get better by learning the pros and cons of both options. The best discussions start when the question is not "or", but "when": When do you prefer option A? When should you switch to non-A?

Another thing is Sun Tzu's answer on how to get better at answering "when" questions. It is not by doing actions, but by making observations - knowing yourself, knowing the environment, knowing what events lead to which consequences. The more attentive and conscious you are, the more open you are to new experience, the better you are at maintaining the dynamic balance, the closer you are to the victory.
Day 174: 2020
Tags: hiphop, code, coding, lifelongdev
Published: 2020-07-14 21:38:12

_liner notes_:
- Professional : Pretty good day. Didn't have any work meeting so I was able to focus on my blog post. Got a good amount done. Figured out how I'm going to record my terminal and make a gif so I can post it in my post. Got a friend that's going to go through the tutorial I've been working on later so I can get some feedback.

- Personal : Worked on my side project last night and got listing and adding of users and groups working. I'll probably do updating and deleting later. Not very crucial at the moment. Next I want to get finish up the combining videos sources onto the livestream dashboard and be able to "switch scenes".

![Snow covered road in Kaskawulsh Glacier, YT, Canada with mountains on the side and in the distance](https://dev-to-uploads.s3.amazonaws.com/i/nn006st5nex1bpzjb6be.png)

Checked out the floor of my van earlier. Spray painted a few spots. Going to stop checking cause I'll keep finding things no matter how small. haha In a couple of hours, I'm going to put the carpet down finally. Going to finish up my blog post as much as I can so I can get it submitted. I'll be posting the code for the Web Component to GitHub. After that, I want to work on my side project. So yeah...2020, WOW!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube u1vPqZdjMqE %}
JSX and Rendering elements
Tags: javascript, render, react, elements
Published: 2020-07-14 21:36:32

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sz7wmhpngb0o9mlrpcct.JPG)
This is neither a string nor HTML,it's JSX.

JSX or Javascript XML, is an XML/HTML-like syntax used by react that extends ECMAScript(ES) so that XML/HTML-like-text can co-exist with Javascript/React code.

---
Since JSX is closer to Javascript than to HTML,ReactDOM uses camelCase property naming convention instead of HTML attribute names.
For eg :
class becomes className
tabindex becomes tabIndex

---
##### Let's say there is a <div> somewhere in your HTML file :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f3fyw0yst2f9aipmqopk.JPG)
####### This is the 'root' DOM node because everything inside it will be managed by ReactDOM.

To **render** a **React element** into a root DOM node, pass both to ReactDOM.render() :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q4k8xl6tp3oyufga2f4b.JPG)
Running you react app after this will give the following output :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t27peelhzsxosbvvwxd7.JPG)

That's all folks.
Thanks for reading!