teleren/devto huggingface dataset:
Web Tracking IS GOOD
Tags: webdev, privacy, javascript
Published: 2020-02-19 19:53:07

We always talk about the need for privacy on the web and how that would be implemented.  I'm here to play devil's advocate and figure out why this privacy is so important and why we yearn for it so much.  I, for one, am not convinced that total internet anonymity and privacy is the right way forward or the best for the web companies that we rely on so much.

## Why do we want privacy? ##
I think this is a pretty obvious answer.  Everyone is afraid of the Googles and Facebooks of the world and what they will do with all of the data they have on us.  Could future financial profiling become a thing or target you for something malicious?  The more data they have, the more dangerous they could become.  Have they done anything malicious with all of this data to this point? *No, not in my opinion.*

## What does privacy mean? ##
In the sense that I am talking about and the hot topic is people tracking what you do on the web through the use of cookies and potentially tracking across different websites.  Google probably has the largest presence in this with the Google Analytics tag on most websites.  With the use of that cookie, they can track what you do on the web across many different sites.

## Why do we care? ##
This is the question I think we need to put more thought into.  We immediately jump to the idea that everything we do needs to be private on the internet.  What are you doing that you are trying to hide?  I always feel like if I need to be ashamed of what I am doing, maybe I shouldn't be doing it.  I know, I know, we are afraid of the power some of the big companies have over us with all of the data.  Go for it, look through what I do... I spend way too much time looking at dog Instagrams.  Phew! There, I said it.

## What would we lose with complete privacy? ##
This is the part I am afraid of.  SO MANY small businesses are alive because of the power of Adsense and social media marketing.  If there is no tracking of us on a device basis, those advertising avenues are not available to those small businesses.  If they are, it will cost significantly more for them to target the proper audience and could put them out of business.  
I actually kind of like the targeted ads I see day to day on websites.  If those ads are not targeted, you better bet ads will still be there.  They will just be something you do not care about.  The internet is a much more personalized experience because of the tracking that is done when you browse.  It is telling you what you want to see next and in some cases, it is right!

I have nothing to hide and if you want to track me, cool.  If that means more small businesses can stay alive and the ads I see are more targeted, it is a good thing in my book.  Instead of always focusing on what those big scary companies MIGHT do with our web traffic, maybe we should start looking at what value they are already providing.  We need to think about whether or not this is a good trade-off.
Are you interested in some React, Redux, Portals and Confirmation Modals?
Tags: react, javascript, redux
Published: 2020-02-19 19:52:01

Yo good people of React :)
I've recently created a nice generic confirmation modal for a React application, using Redux and portals, and was thinking it's worth sharing, but before I put time and energy into writing a post about it, I thought I will get your feedback if it's something you're interested in.

So what say you?
A :heart: will do just fine :)

Cheers
Image Binding Error Handling in Vue.js
Tags: vue, javascript
Published: 2020-02-19 19:51:05

---
title: Image Binding Error Handling in Vue.js
published: true
description: Exploring the use of @error event on images
tags: #vue, #javascript
---

🐛 We all know that broken images don't look good and they give a very bad user experience. 

![ Looks good?  Definitely no!]('images/asdf.png')

👉  I was working on a project and instead of showing an alt text if the image is broken, I wanted to show some other alternate image. For this, first, I needed to check if the image is broken then show the alternate image. 

👀 I looked for solutions and some people were doing it by styling broken images which is also good but this was not the solution I was looking for.

🙌 I came to know about @error event on images and this proved really helpful. 

👨‍💻 Let's explore this with a code example:

### 😕 without `@error`
If we don't use `@error` and just provide the alt text, it looks ugly.
```html 
<template> 
    <img class="image" :src="source" alt="mountains" > 
</template> 
``` 
![mountains]('images/asdf.png')

### 😍 with `@error`
By using the `@error` event on images, we can show the alternate image if the original image is broken or not loaded for any reason. `@error` will only call the provided method if there is any error in loading the original image.

```html 
<template> 
    <img class="image" :src="source" @error="setAltImg" alt="mountains" > 
</template> 
```
`imgUrlAlt` is the method that sets the image's src to alternate image. 
```js 
setAltImg(event) { 
    event.target.src = "working-image.jpg" 
} 
```
![Yasss loaded](https://dev-to-uploads.s3.amazonaws.com/i/vp14z4vkbhv1d14v9sty.png)

#### 💯 Conclusion 
I really liked achieving the same thing in 3-5 lines with `@error` and avoiding writing extra 10-15 lines of CSS.

### 👋 Say Hi
 I am quite active on [Twitter](https://twitter.com/mrzahidjabbar) you can follow me there or visit my [Blog](www.zahidjabbar.com) to know more about me.
Deploying to Github Pages with Travis
Published: 2020-02-19 19:21:52

This is mostly for my benefit as I always have to look it up - this will push content that's built by your Travis build into the `gh-pages` branch of the same repo. It's the simplest way of deploying to Github Pages I've found - it handles switching branch and details like pushing content from a `dist` subfolder for you automatically.

- Install the `gh-pages` CLI tool using NPM:```
npm i --save-dev gh-pages
```
- Grab a Github access token so Travis can push back up to your repo's `gh-pages` branch:
  - Go to https://github.com/settings/tokens/new and create a new token with the full `repo` scope.
- Encrypt the token with Travis so you can use it in your builds (`--add` automatically adds the encrypted data to your `travis.yml`): ```
travis encrypt --add -r <org/repo> GITHUB_TOKEN=<token>
```
 - If you don't have `travis` available on your machine, use `gem install travis`.
- Finally, Travis needs to know how to use the token when pushing. As a step in your `.travis.yml`: ```
script:
...
- git remote set-url origin https://<token's username>:$GITHUB_TOKEN@github.com/<org/repo>.git
- gh-pages -d dist
```
 - Add any other args for `gh-pages` as necessary - the above will put all the content in the `dist` folder into the _root_ of the `gh-pages` branch.

...and we're done! Let me know if you found this useful, it'll make my day.
How to insert rows in an HTML table body in JavaScript
Tags: javascript, tutorial
Published: 2020-02-19 19:11:19

HTML code of the table with a only row:
```html
<table class="table" id="myTable">
   <thead>
	  <tr>
		<th scope="col">#</th>
		<th scope="col">First</th>
		<th scope="col">Last</th>
		<th scope="col">Handle</th>
	  </tr>
	</thead>
	<tbody>
	  <tr>
		<th scope="row">1</th>
		<td>Mark</td>
		<td>Otto</td>
		<td>@mdo</td>
	  </tr>
	</tbody>
 </table>
```
Here JavaScript code:
```javascript
	//data:
	var first_names = ['Jacob','Mark','Noé'];
	var last_names = ['Thornton','Otto', 'Melo'];
	var handle_names = ['@fat','@mdo','@noemelolocumber'];

	//get table body:
	var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];
	
	for (let index = 0; index < first_names.length; index++){
		//insert Row
		tableRef.insertRow().innerHTML = 
		"<th scope='row'>" + (index + 2).toString()+ "</th>" + 
		"<td>" +first_names[index]+ "</td>"+
		"<td>" +last_names[index]+ "</td>"+
		"<td>" +handle_names[index]+ "</td>";
	}
```
output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dded9b7z2azoqdyqjn6v.PNG)
Welcome Thread - v61
Tags: welcome
Published: 2020-02-19 18:52:29

---
title: Welcome Thread - v61
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![Hi!](https://media.giphy.com/media/26ufn24Onjz8w7NxS/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Codewars Challenge: Opposite Number
Tags: tutorial, javascript, challenge
Published: 2020-02-19 18:45:58

This is my approach to the _8kyu_ challenge labelled _Opposite Number_. This will be an explanation on how I approached the challenge and came to a solution.

The instructions for this challenge were __given a number, find it's opposite__. For example, _4_ would return _-4_ , _88_ would return _-88_ and _200.38_ would return _-200.38_. The challenge provides the user a function called opposite which takes in a _number_ parameter, as shown below.

``` 
function opposite(number){
/// your code here
}

```

## Initial Approach

I first started by thinking of how I could turn the number that would be passed as an argument into a negative number or _an opposite of itself_. My initial attempt was to append the string "-" (minus sign) to _number_ and then return it.


```
function opposite(number){
let newNum = "-" + number;
let oppNum = parseInt(newNum)
return oppNum;
}

```

The code snippet above had a few problems. One issue was that because of the use of the _parseInt()_ method, decimals or _floats_ would be rounded to the nearest integer e.g. 4.21 would be -4, instead of -4.21. 


## Final approach & solution

I then realised that I had to think of a way to get the opposite of _number_ without appending any strings or special characters. I knew that in order to get the negative of the number, it would involve subtracting from _number_ from another integer or vice versa. The only integer that would remain constant without changing itself or the argument, as well as guaranteeing that a negative number would be returned regardless of being an integer __or__ float, was 0.


```
function opposite(number){
let oppNum = 0 - number
return oppNum;
}
```
You know more than you think
Published: 2020-02-19 18:22:30

How does it feel when you know you know that but hard to express or to let other people know that you know. You know what I mean?

That happens often with developers, *especially with junior developers*. Some junior developers are extremely talented and, in my opinion, they can also come up with better solutions than experienced developers. This is because they are new and inexperienced. They can think out of the box! Experienced developers are used to looking at code and have opinions and ways of patterns of thinking which might affect creativity.

But then why are some junior developers are struggling to get a job? They know that they know but then what does go wrong when they interview for jobs?

It is as simple as lack of self-confidence and not lack of knowledge. Many Junior developers have a fear of rejection, because they are junior, inexperienced and new to the industry. In their subconscious they worry too much about their lack of experience. This thought is not good in an interview. Talented developers sometimes forget a very simple answer in an interview. For example, if asked “ What is the difference between Async/await and a promise in JavaScript?” they go blank. Nothing comes to the mind. A clean slate. 

Does it mean they do not know? No, they do know. They have used it on one of their projects in the portfolio they made and submitted with their resume. It is the fear of being new, the fear that comes from that thought that their lack of experience is more important than their capacity to learn and grow. So, they fumble in an interview.
 
Interviewers look for people who are full of confidence. They want someone who can own a problem and be ready to find a solution rather than getting confused about what is going to happen if I don’t know the solution. Having strong technical knowledge is great and having multiple projects on the portfolio built on multiple tech stack is fantastic! But,  having self confidence and faith in yourself is a whole different ballgame.

In today’s open source world, you can learn about new technology in a few weeks for free! The Internet is your friend and a Dev community is very helpful. But Having confidence in yourself is something every developer should cultivate. This can be more helpful than knowing a technical question in an interview.

Photo by Miguel Bruna on Unsplash
⛓ How to join two arrays in JavaScript
Tags: javascript, arrays, webdev
Published: 2020-02-19 18:07:08

```js
const one = [`aaa`, `bbb`, `ccc`]
const two = [`ddd`, `eee`, `fff`]
```

You have the above arrays.
How will you merge those into a single array?

You can use `concat` method.
This method will work in older browsers also.

```js
const megaArray = one.concat(two)
```

There is a new way to do this.
You can use the **spread** operator in JavaScript.

```js
const megaArray = [...one, ...two]
```

Much cleaner!
Friday Night Deploys: #11 Maybe It's Legacy Code, Maybe It's Just S**t
Tags: podcast, jokes, webdev
Published: 2020-02-19 17:42:03

This week the DevPlebs talk about: Using the podcast to get dates! The weird and mysterious world of fake martial arts! That one time Keith and Phil took a Muay Thai class! Knife fights! Jump Rope For Heart! Keith's grade 8 obesity! The Superbowl! Why Jenga sucks! Fighting people who write bad code! Hooligans! How new code can be just as bad as old code! Phil sabotaging future developers at his old job! The current state of Yahoo! Jamming things into ViewBags! Toothpick and marshmallow bridges! Jake Paul? Udemy's shady business practice! Vanilla Ice signing over the rights to Ice Ice Baby to Suge Knight after being held by his ankles over a hotel balcony! Lot lizards! Scott Stapp not being worth $500! Chris Hansen opening up our YouTube channel!

## Listen to The Full Episode!
{% spotify spotify:episode:67T8hx8U4pH32KXa3eX7Xk %}

**We're also on...**
**Apple Podcasts:** https://podcasts.apple.com/us/podcast/11-maybe-its-legacy-code-maybe-its-just-shit/id1485252900?i=1000464995062

**Google Music Podcasts:** https://play.google.com/music/m/Dptsll2ppywblfwetqwehmmktya?t=11_Maybe_Its_Legacy_Code_Maybe_Its_Just_Shit-Friday_Night_Deploys

**Our Website:** https://www.devplebs.tech/friday-night-deploys/11-maybe-its-legacy-code-maybe-its-just-shit/

## Get In Touch With Us!
If you would like to share your legacy code opinions or stories that you want us to read out in the next episode you can reach us at the following...

**Twitter:** [@DevPlebs](https://twitter.com/DevPlebs).
**Email:** deadbeats@devplebs.tech

## Follow Our Twitters... If You Want!
[DevPlebs](https://twitter.com/DevPlebs).
[Keith Brewster](https://twitter.com/brewsterbhg).
[Phil Tietjen](https://twitter.com/phizzard).

You can also ask questions or give us some feedback about the show!
Pig latin free code camp challenge 
Tags: replit, node
Published: 2020-02-19 17:36:48

---
title: Pig latin free code camp challenge 
published: true
tags: replit, nodejs
---

Ping latin two solutions
the words start with vocals add  "way" to the end, and the words start with consonant the first letters put in the end and add the word "ay";
consonant = "onsonantcay".


function translatePigLatin(str) {
  var result; var total; 
  var arr =[]; var arr1=[]; var arr2=[]; 
  var arr3=[];   var arr4 =[]; var arr5=[]; var arr6=[];
  arr1 = /([aeiou])\w+/gi;
  arr2 = /^([^aeiou]+)/gi;
  arr4 = str.match(arr1);
  arr5 = str.match(arr2); 
  arr = new Array(arr4, arr5);
  total =  arr.join('')
 console.log(arr4);
  myFunction() 
   function myFunction(){

   if(total == arr4){
      result =  arr4 + "way";  
    }else if(total){
      result = total+ "ay";
   }
   }
     console.log(result);
     return result;
     
  
} 
translatePigLatin("eight"); 
//california, paragraphs, glove, algorithm, eight.

function translatePigLatin(str) {
  var a = /california/gi;  
  var b = /paragraphs/gi; 
  var c = /glove/gi
  var d = /schwartz/gi;
  var e =  str.replace(a, "aliforniac").replace(b, "aragraphsp").replace(c, "ovegl").replace(d, "artzschw"); 
  var f = /([aeiou])\w+/gi; var arr = str.match(f)
  for(let i =0; i< e.length; i++){
      
    if(e!=arr){
      str = e + "ay";
    }else{
      str = arr + "way"; 
    }
  }
  console.log(str) 
  return str; 
}

translatePigLatin("california");
translatePigLatin("paragraphs");
translatePigLatin("glove");
translatePigLatin("schwartz");
translatePigLatin("rhythm");
translatePigLatin("algorithm");
translatePigLatin("eight");



{% replit @oscarhernandez6/pig-latin %}
BaseCS: Making Sense of the Rainbow
Tags: computerscience, basecs, beginners, codenewbie
Published: 2020-02-19 17:33:20

---
title: BaseCS: Making Sense of the Rainbow
published: true
description: We learn how to represent one number in three different number systems—base 2, base 10, and base 16—and see how they compare to one another.
tags: computerscience, basecs, beginners, codenewbie
series: BaseCS Season 2 
cover_image: https://dw71fyauz7yz9.cloudfront.net/video-upload__c3ff6968eadf74cd857ed018000eaad0/thumbs-video-upload__c3ff6968eadf74cd857ed018000eaad0-00001.png
---

Today's episode of BaseCS explores hexadecimals!

In this episode, we dive into the base 16 number system, and learn how to count with 16 different digits. We learn how to represent one number in three different number systems—base 2, base 10, and base 16—and see how they compare to one another. We then explore color theory, and learn how hexadecimals are closely tied to hex color codes and the RGB color model. Finally, we'll bring it all together by looking at how CSS hex codes and the `rgb()` function allow us to represent colors while using hexadecimals under the hood!

This whole series is sponsored by Heroku. A special thank you to Heroku for their ongoing support!

{% organization heroku %}
Make a bootable usb unbootable
Tags: booting, operatingsystem, knowledge
Published: 2020-02-19 17:31:04

**To make a bootable usb unbootable using command prompt**
1. Open Command prompt
2. Type **diskpart** and press enter
3. Type **List disk** and press enter
4. Type **select disk N**(N is your disk number starts from 0) and press enter
5. Type **clean** and press enter
6. Type **create partition primary** and press enter
7. Type **Active** and press enter
8. Type **format fs=fat32 quick** and press enter(wait for few seconds until the 
   format process reaches 100 percent)
9. Type **Assign** and press enter
10. Type **exit** and press enter

This is one of the method to unboot the bootble USB using cmd. Hope it will help you.
Bootstrap Layout with CSS Grid? It's possible, but with some limitations.
Tags: bootstrap, scss, experimental
Published: 2020-02-19 17:19:58

Hello developers!

# Preface

Bootstrap is an amazing tool, this article isn't indented as a negative idea about Bootstrap. This article does not want to denigrate or diminish the library. It's just an experiment.

This is a WIP so there might be other limitations I've not found during this experiment.

Feel free to collaborate 🐱‍👤

---

In my freelance career, I've found a lot of projects with Bootstrap library (at least about a 80% of the projects I've seen).

The reasons behind its use was different between projects, but I've defined 2 common cases:

1. "We use Bootstrap because we want to prototype fast a web application/website and we need its responsive behaviours".
2. "We use Bootstrap because it helps us with responsive issues, but we don't need its components (only container/row/col classes)".

The first case is good because using a big library like Bootstrap could be a big time saver. 

But the second one isn't good in my opinion nowadays, maybe it was 5/6 years ago, but now you don't need to download an entire library to make your applications responsive (thanks to flex and grid layout).

---

I'm teaching to my collaborators how to use flex/grid layout to make their applications responsive, without any library and any third-party code.

If they don't need IE support, I teach them how to use grid layout, and why.
If they need IE support, we make some polyfill or we use flex layout.

But one day I've found [this](https://medium.com/wdstack/bootstrap-is-still-better-than-css-grid-for-creating-layouts-522b7baf0411) article, which explains why Bootstrap is still better than grid layout for creating layouts.

I think this article is right, sometimes using CSS grids could be a waste of time if you don't really know it or you need to create complex layouts, and it could be not so clear to read.

## So, what now? Turn back to Bootstrap for large projects?

No, of course, I love CSS grids and I think they could help me and my customers to create cool layouts without any library.

So I've tried to learn deeply Bootstrap and to replicate its layout and responsive behaviours using CSS grid layout.

Here there is the result:

{% codepen https://codepen.io/NicolaCastellaniDev/pen/YzXqxbz %}

Basically I've tried to replicate Bootstrap layout using only grid properties.

There are some issues (especially with variable width content), but it seems to work pretty good.

## Limitations

### Equal width multi-line
Isn't possible with CSS grids and auto flows - you need to split the line.

### Aligment
I didn't develop the align-{alignProp} classes, so I don't think they will work.

# Conclusions
What do you think about this experiment? Do you have any advice or just some tips to help me converting Bootstrap using css grids?

Let me know!
Upcoming Change to the AWS Solutions Architect Associate Exam SAA-C01 to SAA-C02
Tags: aws
Published: 2020-02-19 17:06:20

---
title: Upcoming Change to the AWS Solutions Architect Associate Exam SAA-C01 to SAA-C02
published: true
description: 
tags: #aws
---

## If I have yet to start studying for the exam should I wait a few months?

**No**, Changes are not dramatic enough for you to delay your study. If you look at the changes in the exam guidelines not much has changed.


## I’m already studying will I have to restudy?

* Study Material – **No**, keep studying, We may see amendments / additions from content creators who's content is a year out of date. Mine is very current so its minimal changes for me.

* Practice Exams – **Maybe**, Watch out for what people are reporting on Reddit and other social places. I have a strong feeling we're going to see more serverless architectures and services as this was severely lacking in the previous exam.

## Can I still use the freeCodeCamp/ExamPro Solutions Architect Associate free course to study?

**Yes**, I knew this exam change was coming so I packed in some additional content and I filmed my free AWS Solutions Architect course at the end of 2019.

I probably will end up reshooting the entire course post-March because I would like to improve the video quality and make minor corrections.



{% youtube Ia-UEYYR44s %}

### What changes are occurring?

The last time the SAA when through a change it was dramatic since they changed the way they wrote the questions from being factoid-driven to concept-driven.  We are going to see such a dramatic change and we are seeing is fine-tuning of the exam.


So they have dropped one of the domains, which was worth the least percentage. I welcome this change.

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

We can see the new exam guide has the exact same domains but the Operational-Excellence has been dropped

Performant has changed to Highly-Performant which in honest is just semantics. Reworking of subdomains but they to me equates to being the exam same content as before.

What is really great is the domains are more evenly-weighted. I think will improve people's ability to pass.

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

## Final-Thoughts

Don't stress out, you're still on the right path, just keep doing what you're doing.