teleren/devto huggingface dataset:
How to make a smooth jump link 
Tags: css, webdev, html, codenewbie
Published: 2020-12-11 20:41:18

I was working on my little project (you can check it out <a href="https://nazaneyn.github.io/Anime-Life/"><b>here</b></a> BTW ) earlier and then I was like okay how about making a jump link!

So in this article I'm gonna be talking about two things :
1. How to make a jump link
2. And how to make it smooth
________________________________________ 

let's take a look at smooth jump link first : 

{% codepen https://codepen.io/nazaneyn/pen/abmBQbK %}

_________________________________________________________


and now let's see how to make a jump link (step by step) :

- <img src="https://dev-to-uploads.s3.amazonaws.com/i/gto9ulieh5l1scnlsv44.jpg">

- first make a link <code>  < a href=""> your text < /a> </code>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/ufv9fzhwd8srs8705z51.jpg">

- add a link with <b>#</b> to href (for example href="#move-down" )
<code>  < button>< a href="move-down">Down</a>< /button> </code>
PS. by link I don't mean a real link, more like a name (like when you give classes a name)
<img src="https://dev-to-uploads.s3.amazonaws.com/i/sltna6acpfcjua0crs13.jpg">

- now add an id (the same name as you gave it to <i>href</i>) to the element that you want the jump link to happen (in this case we want to jump to the last paragraph)
<img src="https://dev-to-uploads.s3.amazonaws.com/i/3ugoh9n0j8a17ntf53jq.jpg">

<br>
To put it more simply, in order to make a jump link you have to link the <code> < a> </code> to your specific element.
 
________________________________________________
<br> <br>
<h5> And now for the <i>smooth</i> part :

It's pretty simple actually.
We can do so by just adding "scroll-behavior" property to html and It'll smoothen the jump :  
<code> html {
scroll-behavior: smooth;
} </code>

And that's it!
You're all set now!

______________________________________

<i>Fun fact: the whole jump link thing might sound so simple and easy but it took me a while to actually understand what's going on lol.</i>
So if you are like me , don't worry just play around with it , copy paste codes line by line and then try to rewrite them on your own and you'll get this eventually!
Things Always Break When You Run
Tags: linux, tips, beginners
Published: 2020-12-11 20:15:17

Trying to learn a new skill deeply, with a family to support, in 2020 of all years, while networking with others and job hunting, well...it was bound to happen.

I had my Linux VM setup on my Windows machine. Was doing all of my development and training on Linux, when I lost months of notes, files and projects.

I suppose I had it coming to me, working in Linux was something I only started at the end of 2019 because that was how Hack Reactor taught (either on a Mac or Linux). Finding this out mid-stream meant I had to setup Linux in a hurry, and I didn't bother with a backup option. (I'm really not that sloppy.) Months ago, I had tried to connect my Linux VM to my home network USB HD drives, but I could find no solution there, so I went back to the grind, crossing my fingers it would all be okay.

I must have uncrossed my fingers at some point.

Still not sure what happened, but it would appear that all of my changes were lost since the prior Snapshot taken on Virtual Box. The worst part of it all were the copious notes I had taken during my learning process.

But, as it happens, Win 10 is working just fine for web development, and I won't be developing in Linux until I have a moment to get that network problem figured out and back up like I should have done from the beginning.

Learn from me and don't wait 10 months to backup your work and end up losing 6 months of notes.
Chingu: A Team Project, At Last!
Tags: pairprogramming, team
Published: 2020-12-11 19:43:32

As a mostly self-taught web developer, one of the biggest challenges was finding people to work with as a team. When I started my coding journey in earnest I was focused on Hack Reactor's program and believed in the success of their model.

When I left Hack Reactor I felt confident in finding all of the resources I would need to deeply learn Full Stack Javascript development, and I did...mostly. Finding available teammates with similar skillsets and available time has been one of those problems that I knew would be tricky, but I had no idea HOW difficult it would be.

Yes, I've heard all the advice about finding bugs on GitHub to make fixes for, correcting ReadMe's, or volunteering to help an existing project elsewhere, but everything I ran across seemed out of my experience level. Perhaps I should have picked something and stuck with it. Ignoring the discomfort, and learning through it regardless. But, perhaps, I approached the problem with too high of an expectation on myself.

Imposter-syndrome sapping the walls of my confidence.

A number of months ago, a developer at a MeetUp made the suggestion of Chingu. I listened, thought it sounded almost too good to be true, and then became very skeptical when it involved paying about $30/month to be placed with a team and guided through the experience. Surely it can't be that easy. There had to be some catch. Some scam?

But as time went on and new connections continued to not mesh up with me for the kind of pair-coding, or team project that I needed, I realized I had to give Chingu a try.

And now, after 6 weeks, I wish I had tried it months ago.

I should give a full breakdown of the experience, but that will need to be another post.

*(If you're familiar with Hack Reactor, you may be aware they have a mentor, of sorts, that you work with. Well...I was never able to find a mentor on my own. Not yet. They do exist, and I was focused on finding someone in my social network for free, but in the end it looks like I should have just found a mentor-for-hire.)*
how to create shell recursive command alias.
Published: 2020-12-11 19:42:45

1. `mapurba@$ cloud="ssh -i /home/mapurba/.ssh/gcpinstance mapurba@prod"`
*prod  = ip...can be path after that

`mapurba@$ $cloud`

you should be able to ssh to the system

now alias this variable to any name to have easy linux shell quick commands

this is alias command 

`mapurba@$ alais cloud=$cloud`

`mapurba@$ cloud`

....loggin




or use this `alias cloud="ssh -i /home/mapurba/.ssh/gcpinstance mapurba@prod"`
Should You Use The NoFollow Attribute?
Tags: html, webdev, seo, webstandards
Published: 2020-12-11 19:32:05

*Originally posted on [DanielCuttridge.com](https://danielcuttridge.com/should-you-use-nofollow/), and edited for brevity for Dev.to.*

In 2019, Google introduced some new **rel attributes** for helping web developers to assist the search engine with understanding links.

- rel="sponsored"
- rel="ugc"

**Sponsored** is to denote that a post is sponsored, this includes paid guest posts.

**UGC** is to denote that it is User-generated Content.

They also [announced](https://developers.google.com/search/blog/2019/09/evolving-nofollow-new-ways-to-identify) that they would now be using the NoFollow attribute as a hint in the future.

## NoFollow as Hint

Google wants to convince webmasters and developers to stop using the NoFollow attribute.

Do they have a good reason for doing this?

*Sort of.*

The SEO (Search Engine Optimization) industry has abused the NoFollow attribute for years to assist in *Link Sculpting*. This is a technique that evolved out of PageRank sculpting, where you selectively NoFollow links that you do not wish to pass any value to. This is only a half explanation. A now ex-Google employee, Matt Cutts, showed this was ineffective over 5 years ago. So that explanation does not make a lick of sense. I'm not convinced...

A better explanation is that they are hoping to convince websites to adopt this standard to assist in machine-learning. Google's fight against paid links is no secret, and they have also done nothing to hide the fact that they dislike user-generated content.

So is there a good reason for Google to introduce the attributes? For them, yes. For you, *not really*.

### Killing Their Darlings

Google's Lighthouse Tool will flag generic anchor text on your website, such as 'Learn more' on buttons, as non-descriptive. The solution to this problem has always been to implement the NoFollow attribute. If developers stopped using NoFollow this would surely create issues for Google when determining relevance through anchor text. So it would seem reasonable to assume that their own team is not in full agreement on this particular set of changes.

## Other Search Engines

It can be easy to forget about other search engines, but these can be important sources of traffic for many websites.

Bing and DuckDuckGo are not required to treat attributes in the same way as Google does. Other crawlers on the web may also choose to honor the NoFollow attribute. This isn't the web as Google wants it. We are not all developing for Google.

## Don't Let These Changes Whip Up Fear

With Google using the NoFollow attribute as a 'hint' from now on, you shouldn't feel afraid to use the attribute when you aren't sure if it is necessary.

**Should you be using NoFollow?** I think we all know the answer to that, *so long as it remains in the HTML5 spec*.
JavaScript ES6 - Spread Operator
Tags: javascript, es6, spreadoperator
Published: 2020-12-11 19:17:56

* ES6 provides a new operator called spread operator that consists of three dots (...). 
* The spread operator allows you to spread out elements of an iterable object such as an array,a  map, or a set.

**_Example_**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/10jgopm5dhwz88uvtf91.PNG)

**_Result_**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fbrw9ox1aqv2m2xnzuat.PNG)

+   Above example, the three dots (...) located in front of the **_oddValue_** and **_evenValue_** array is the spread operator.
+   The spread operator unpacks the elements of the **_oddValue_** and **_evenValue_** array.

---

**_Summary_**

*   The spread operator is denoted by three dots (…).
*   The spread operator unpacks elements of iterable objects such as arrays, sets, and maps into a list.
*   The spread operator can be used to clone an iterable object or merge iterable objects into one.

---
The known unknowns and learning on demand
Tags: codenewbie, career, student, learn
Published: 2020-12-11 19:10:34

At the moment you put a feet in the cold water of software development, it's likely you scream and back away. You are probably overwhelmed with what it seems a forest of buzzwords.

While it's true that it's a big and fast evolving field, there are ways to benefit from that, and the how, it's what I want to talk about today.

# The knowns and the unknowns
We can classify everything in:
- **Known knowns**: The things we know we know. For a newbie programmer might be to write a little script in python that reverses the input.
- **Known unknowns**: The things we know we don't know. For the same young programmer as before, may be send data over a network. He knows it can be done, he just doesn't know exactly how yet.
- **Unknown unknowns**: The things we don't know we don't know. 

The first category is vital because it enables us to immediately solve real world problems.

But I think that the second category is underrated. The known unknowns have a very low entry fee and **it enables us to learn something on demand in order to solve a problem.**

# Why invest time in the known unknowns

I wish I got everything in the first category, but it's just impossible. Things keep evolving no matter what, there are simply too many things and it's costly in time to learn it all.

What is possible though, is to have a broad second category, that is: **Have lots of known unknowns.** 

It has a very high value for the time it costs and you are probably not going to need to know all of it anyway. 

For example: I never had to implement an event driven architecture, but I am **familiar enough** with the concept and its use cases.

Don't get me wrong, the devil is in the details and I would have to invest an important amount of time to learn how to implement it, **but knowing that exists and what problems solves makes you a better developer already.**

# Takeaways

- The software development field is too big, it's impossible to know every framework, tool or language that exists.
- But that's okay, just start making a breadth-first search: Take a look at [some roadmaps](roadmap.sh) for example.
- If you encounter any concept you don't know, spend 5 minutes reading about it and how could be useful to you in the future.
- When a perfect use case comes for something you know that you don't know, invest time to learn it.
- Learn something this way is easier, because there is a real reason behind.



Photo by [胡 卓亨](https://unsplash.com/@chalis007?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)
#Day 9: Binary Tree Top View
Tags: 100daysofcode
Published: 2020-12-11 19:08:21

Hi,

Today I solved the top view problem of Binary tree. As a had studied the algorithm of Vertical traversal of BT yesterday, it was easier for me to solve the Top view question today (Treemap places the best role in this problem).
Finally, I solved all the 'Easy' type problems of BT on HacerRank. What a relief!
Diving Into Web Development
Tags: personalnews, codenewbie, career
Published: 2020-12-11 19:00:00

You don't know me. I'm new.

I'm a guy that loves to create. I write fantasy novels, and sometimes make art. Starting out, I attacked everything with an enthusiastic vigor that didn't consider that my career of choice, or at least one of convenience, wasn't really the right fit long term.

Despite now knowing that, leaving a long-held career in finance for something new, has been a topsy-turvy ride I've had to question the sanity of. But each challenge brings greater clarity. On the horizon, the path that I've set myself on years ago, is starting to come into focus.

I'm excited to find that destination, and knowing that it will evolve into yet something else, further off on the endless horizon, is more exciting still.

Sometimes we make mistakes in life, but we can learn, and those lessons all come together to make us who we are today.

It hasn't been as easy of a path as it could have been. But it was my path, and I am who I am today as a result of it. 

No regrets, just lessons learned.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-12-11 18:54:20

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

We've nearly made it through another week!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Landing a new job
- Getting a new game... or whatever else might spark joy ❤️

---

Happy Friday!

![Friday](https://media.giphy.com/media/3o7abldj0b3rxrZUxW/giphy.gif)
TIL - Chrome has emulate focused page
Tags: chrome, devtools, todayilearned
Published: 2020-12-12 07:52:01

---
title: TIL - Chrome has emulate focused page
published: true
date: 2020-12-11 18:46:50 UTC
tags: chrome,devtools,til
canonical_url: https://krzysztofzuraw.com/blog/2020/chrome-emulate-focused-page
---

Today I learned that chrome has `Emulate Focused Page` settings.

What such toggle is doing?

It emulates that the page is focused and allows to debug select or dropdown that is triggered when user focus input.

You can see screenshot below:

[![TIL](https://krzysztofzuraw.com/static/c0965faf02af450c469fd45c6eb335db/fcda8/til.png "TIL")](/static/c0965faf02af450c469fd45c6eb335db/076ca/til.png)

You can find this setting under `Rendering/Emulate Focused Page` inside chrome devtools.`Rendering` tab can be accessed by `CMD+SHIFT+P` and typing `Rendering`.
AWS Re:Invent is kind of stupid
Tags: aws, conference, discuss
Published: 2020-12-11 18:30:58

AWS Re:Invent is Amazon Web Services big conference event, which they used to run late every year in Las Vegas during a couple of days. This year the event is a three weeks long online event, which you can attend at no cost.
After two of these three weeks, I am disappointed with the arrangement. There are plenty of (recorded) sessions, all of which they present at different time block, probably to accommodate general geographical areas of the Americas, Europe+Africa and Asia. The schedule is a little bit overwhelming to get a grip of at times.

Here is where it is stupid. It is a virtual conference, with mainly recorded material. Why on Earth do these sessions need to have scheduled slots? Why not have a buffé of sessions which people can watch on-demand? 
I have had sessions I was interested in which ran at the very same time. Other runs of these sessions were at times where I would have to get up very early or stay up very late.
This event runs over three weeks, so there is not any specific day that they have filled with valuable sessions and events, for me.
It would be hard to find any way with the less-than-optimal scheduling system. 

As I see it, it is more of a time for AWS and AWS sponsor/partner marketing, plus some partially misguided attempt at trying to re-create parts of the physical event.

There has been valuable information for sure, and the price for the event is quite good. But it could have been much better, and I hope another virtual Re:Invent will be a different and better experience.

What do you think of virtual Re:Invent?  Good or bad? Do you think other big conferences have done a better job with their virtual events?
Controlling scope in nested Sass selectors
Tags: sass, styling, css, preprocessor
Published: 2020-12-11 18:30:19

There's a few tricks that you can use to control scope when nesting Sass selectors. The best use case I've been able to find is when you're writing selectors with BEM.

```scss
.block {
  $this: &; // <-- Here's the trick.
  
  &--modified {
    #{$this}__nested-block {
      some: style;
    }
  }
}
```

...which will compile to:

```css
.block--modified .block__nested-block { some: style; }
```

If you had instead written this as:

```scss
.block {  
  &--modified {
    &__nested-block {
      some: style;
    }
  }
}
```

...you would end up with:

```css
.block--modified__nested-block { some: style; }
```

which is probably not what you intended.

See more tips like this at Lab49's engineering micro-blog, called "Today, We Learned". Visit this specific post right here: https://twl.lab49.com/username/brian-mcallister-lab49/f8de1041bbd8c960c6d5b0b70c14580f
How to add Generators methods in Class
Tags: javascript, typescript, github, webdev
Published: 2020-12-11 18:28:06

I wanted to write a generator function in my class and I had to do a lot of research for it. Finally found the standard way of how to write it.

[Classes](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) , [Iterators_and_Generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) 

```javascript
class Polygon {
  constructor(...sides) {
    this.sides = sides;
  }
  // Method
  *getSides() {
    for(const side of this.sides){
      yield side;
    }
  }
}

const pentagon = new Polygon(1,2,3,4,5);

console.log([...pentagon.getSides()]); // [1,2,3,4,5]
```
Simple animated ball in react-native
Tags: reactnative, react, android, ios
Published: 2020-12-11 18:09:47

I will just figure out here some of my progress in the animated world of react-native.
Just begin by moving a ball in the screen very simply!

The code of the whole app build here is available at https://github.com/Merlier/rn_example_animated_ball

## Get started

Requirements:
* react-native >= 0.60

First just init a new react-native project:

```bash
$ npx react-native init rn_example_animated_ball
```

## Create a simple ball

in your app.js:

```javascript
import React from 'react';
import {StyleSheet, View, Button} from 'react-native';

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <Button onPress={() => console.log('run')} title="RUN" />
      <View style={styles.ball} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'red',
  },
});
```

### Now just move...

in your app.js:

```javascript
import React, {useRef} from 'react';
import {StyleSheet, Dimensions, View, Animated, Button} from 'react-native';

const App: () => React$Node = () => {
  const windowWidth = Dimensions.get('window').width;
  const initPosition = {
    x: parseInt(windowWidth / 2) - 50,
    y: 0,
  };

  const position = useRef(new Animated.ValueXY(initPosition)).current;

  const animate = () => {
    Animated.spring(position, {
      toValue: {x: initPosition.x, y: 350},
      speed: 4,
      useNativeDriver: false,
    }).start(() => {
      position.setValue(initPosition);
    });
  };

  return (
    <View style={styles.container}>
      <Button onPress={animate} title="RUN" />
      <Animated.View style={[position.getLayout(), styles.ball]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ball: {
    width: 100,
    height: 100,
    borderRadius: 100,
    backgroundColor: 'red',
  },
});
```

```bash
$ npx react-native run-android
```

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

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

It's just the basics but it's the first step ;)
Have fun
:)
Taking the Axe to inaccessibility
Tags: react, a11y, inclusion, beginners
Published: 2020-12-11 17:50:13


# Let's talk accessibility!

When you are developing apps for everyone it's great to have some cool tools in your belt.  One of these tools is React Axe as brought you from [Deque](https://www.deque.com/axe/).

There are of couple ways you can use Axe.  The first being an extension for [dev tools Extensions](https://www.deque.com/axe/devtools/). 

[google's Developer's Tools extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)

[Firefox Developer's Tools Add-on](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

To access Axe through the extension simply open your developer's tools and click the axe tab, then you can inspect your page.

![Axe in Chrome's dev tools](https://dev-to-uploads.s3.amazonaws.com/i/wij8e45jfma6ld7fajid.png)

Another way is to wrap your app in the Axe wrapper, and you do this by first installing @axe-core/react:

```
npm i axe-core/react --save-dev
```
_or whatever you use to install_

At this point, you head to the file your `ReactDom.render` set up, this is usually the index.{js,jsx,tsx}.  

Once you've made it there it is a fairly straightforward setup to get it working. 

First, you'll want to set it up so that the wrapper does not render in production, that would just be awkward like leaving random console.logs everywhere that say 'hi!'.

``` JavaScript
if (process.env.NODE_ENV !== 'production') {
// Not For Production
ReactDOM.render(app, document.getElementById('root'));
} else{
// For Production
ReactDOM.render(app, document.getElementById('root'));
}
```
Now, that we have that set up we can conditionally import our module.

``` JavaScript
if (process.env.NODE_ENV !== 'production') {
// Not For Production
 import('@axe-core/react').then(axe => {
        axe.default(React, ReactDOM, 1000);
        ReactDOM.render(app, document.getElementById('root'));
    });
} else{
// For Production
ReactDOM.render(app, document.getElementById('root'));
}
```
We can start up our project and open up our developer's tools and go to the console.

![react-axe wrapper outputs](https://dev-to-uploads.s3.amazonaws.com/i/5uwu0e3tn5rq5dp8y4mx.png)

![Axe wrapper output at moderate](https://dev-to-uploads.s3.amazonaws.com/i/bw6zsfiac6wc7ff6itke.png)

These Axe wrapper outputs should help in concurrent development, as well as open up conversions with your design team to discuss color contrast issues or other conversations about accessibility.