teleren/devto huggingface dataset:
Looking at internal details of a Telescope!
Tags: opensource
Published: 2020-11-17 17:46:31

### Introduction 

This week, I'm working on an [issue](https://github.com/Seneca-CDOT/telescope/issues/1370) on [*Telescope*](https://github.com/Seneca-CDOT/telescope). You might ask what *Telescope* is? *Telescope* is a tool written by Seneca College students and used to keep track of the process of student weekly by fetching their blog post on multiple sites such as: https://dev.to/, http://medium.com/,...

### What is the issue?
In certain posts, pictures are scaled up beyond their natural size. Consequently, the quality of the pictures is reduced and make users uncomfortable. We have to find a way to fix it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cnazb5kt3aq0bkjeehed.png)

### How to fix it?
I realized this problem only happens to those posts fetched from https://www.blogger.com/ because the images' width is not fully displayed in the original post.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ndfvjigkdzzoun5zb1ku.JPG)

And in the css file of the post, I have seen something like:
```
.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: 100%;
}
```
Due to `width: 100%`, the pictures may get scaled beyond their natural size. To fix it, I have set `width: auto` and `display: block` to display width as their natural size. And if the picture's width is not fully displayed, it will be centered

```
.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: auto;
  display: block;
}
```

Result after change:

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

### Challenges while fixing this issue

* The only difficulty I encountered while fixing this issue is the amount of time it takes to set up a proper environment to run the app. You can check my PR at [here](https://github.com/Seneca-CDOT/telescope/pull/1373) to have a closer look at the changes I made.
Cross Origin Resource Sharing
Published: 2020-11-17 17:44:28

What is CORS?
>Simply CORS is fetching resources from other application having a different origin than the client-side.

Who applies CORS?
>Applying a CORS restriction is a security feature defined by a server and implemented by a browser.

####How to know we are making a cross-origin-request? 
First, we have to know what origin comprises of.

![yaSnKRc0O](https://dev-to-uploads.s3.amazonaws.com/i/xqmjb1t96boc9t8kkumf.png)
 
So when we make a request to an origin which differs in any of the above mentioned parameters then it is CORS.

![tFikbNh-l](https://dev-to-uploads.s3.amazonaws.com/i/83utmb4r2cy8d20s6ms2.png)
 
####So how it works:

*  So when any application having endpoint `https://example.com` makes a request to a `https://example-server.com` browser embeds
 
![w0VKnJNsP](https://dev-to-uploads.s3.amazonaws.com/i/gstdvyxztkxthc3hmewu.png)
in the request.

* When the server receives a request & if it wants to share its resources then it will add 

![BQJJ5gaYW](https://dev-to-uploads.s3.amazonaws.com/i/lyz1qzzsskkqe9zxbxxf.png)
* Along with that server also adds another field response.type of cors or opaque which can be useful to know if you don't have control over server side api.
* If a request is made for a resource on another origin which returns the CORS headers, then the type is cors.
* Opaque response is for a request made for a resource on a different origin that doesn't return CORS headers.
* When the browser receives a response if it finds the relevant Access-Control-Allow-Origin header, the browser allows the response data to be shared with the client site.

Thanks.
Javascript string concatenation
Tags: webdev, javascript, career, beginners
Published: 2020-11-17 17:42:35

---
series: JavaScript For Total Novice or Beginners.
title: 	Javascript string concatenation
published: true
description: String concatenation javascript in JavaScript
tags: webdev, JavaScript, career, beginner
//cover_image: https://direct_url_to_image.jpg
---

Concatenation has to do with joining two or more values, usually strings, to create another string as in below.

```js
 let amount = $2000;

 console.log('schoolFees:'+ amount ); // "schoolFeels:$2000"
 console.log("price:" + amount); // "price:$2000"
```

With this, we have created "schoolFeels:$2000" and "price:$2000" with concatenation.

We can also concatenate in JavaScript using Template literals.

The template literals are a new way to join strings introduced in ES6. Such strings are enclosed by the back-tick – `` and we can easily use variables in template literals by enclosing such variables in a dollar sign and curly braces like this.

```
let name = 'Ayobami';
console.log(`My name is ${name}`) // "My name is Ayobami";
```

Yeah! We have created the string "My name is Ayobami" with template literal concatenation.

Hooooorayyyyyyyyyyyyyy;

We are done with this lesson. In the next, we will discuss data structure, arrays to be specific.

# One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? ***JavaScript for a Total Novice*** teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free previous to judge by yourself: https://bit.ly/3o3TMyg
TOP-4 interesting grocery app features. AI everywhere :)
Published: 2020-11-17 17:36:15

Hey guys. 

I just finished my current grocery app delivery project. 
Except obvious and boring features like responsive templates and Google map integrations I've done 4 interesting features:

- AI for product recommendations
- Rich push notifications. That increase CTR on 30%
- Admin KPI funnels
- Synchronisation with accounting systems (auto import / auto push)

More detailed list of features is in my article: <a href="https://exceed-team.com/grocery-delivery-app-features">Top-16 features of grocery app</a>

P.s.: Which other interesting features I can suggest to my client?
My Experience as a Mozilla Rep
Tags: mozreps, opensource, developer, mozilla
Published: 2020-11-17 17:30:05

I joined this program last year and many of you might don’t know about Mozilla Reps Program, check the [website](https://reps.mozilla.org/). The Mozilla Reps program is open to anyone who is passionate, knowledgeable and willing to help.

Under the on-boarding process, we took few workshops, organized hackathon and also, interacted with many people online. In the starting phase, very few people knew about Mozilla, their open-source programs, manifesto and products. It was good to see that many people joined the workshop and were eager to learn.

I organized few events and if anyone wants to know more about the events, they can check [here](https://reps.mozilla.org/u/soniasingla/).

It is a good experience till now, and am looking forward to organize more events in future, make connections with fellow reps and teach the world 🙂

If you have any questions, feel free to ping me on [twitter](https://twitter.com/soniasinglas) or soniasingla.1812@gmail.com 😉
How to access GitHub using two-factor authentication?
Tags: github, opensource, tooling, authentication
Published: 2020-11-17 17:19:12

##What is two-factor authentication, or 2FA and the need to implement it ?

Two-factor authentication, or 2FA is the most significant solution used to protect users data and adds security while logging into browser, app or any website. It adds extra layer in the logging process by asking the user about authentication code that only the user could have access.

Some users might choose weak or poor passwords, might apply the same password for multiple different sites. Many of the users have bad habit of writing and saving their username and password from where they could fetch with ease. Just by entering username and password `even if the password chosen is strong enough`, the second person can access all the data, even without using any kind of sophisticated hacking.

To secure the users data, two-factor authentication solution has been generated. One-time code is being generated and the user is supposed to enter the code within minimum time possible.

##How to make git clone work with and without 2FA?

**Without 2FA :**

```
$ git clone https://github.com/mozilla/addons-frontend.git

>> Username : your_username

>> Password : your_password
```

**With 2FA :**

For using 2 factor authentication, initially we need to know how to set up the access token for command line and after that, the same generated token is used as your password.

Here, are the steps written sequentially to know about generating tokens for command line in detail :

1. Click on your `profile` icon and then go to `settings`.

2. On the left side menu bar, you will see `Developer Settings`, click on it.

3. Then `personal access tokens`. After that, click on `Generate new token` :

4. Make sure to copy the tokens we have generated to access the GitHub API. Personal access tokens work like ordinary OAuth access tokens. They can be used instead of a password for Git over HTTPS or can be used to authenticate to the API over basic authentication.

Use the generated token as password when we authenticate it via command line.

```
$ git clone https://github.com/mozilla/addons-frontend.git

>> Username : your_username

>> Password : your_access_token
```

---
Have a great weekend 😉
---
React useState lazy initialization in one glance
Tags: react, javascript
Published: 2020-11-17 17:17:53

### How
`useState` is the simplest React hook out in wild but it has a very interesting feature — lazy initialization
If you provide useState with a function, then it will be executed only on the initial render.

```

// For every render
const [state, setState] = useState(window.localStorage.getItem("key"));

// Lazy Initialization - Only once
const [state, setState] = useState(() => window.localStorage.getItem("key"));

```


### When to use
Any function that is computationally expensive can be initialized lazily.


Reference
https://reactjs.org/docs/hooks-reference.html#usestate
Outreachy Internship with Mozilla - Final Report
Tags: opensource, outreachy, mozilla, internships
Published: 2020-11-17 17:17:31

Today is my last day being an [Outreachy](https://www.outreachy.org/) intern at [Mozilla](https://www.mozilla.org/). I am always bad at leaving and it’s really the bittersweet moment. The past three months, will always be the most beautiful time of my life.

I did my internship with [WebCompat](https://wiki.mozilla.org/Compatibility) team and I am missing working with Dennis terribly. Since, Mozilla is a global non-profit with a strong community that works openly, I’ll be working as Volunteer Contributor 👩‍💻

[Outreachy](https://www.outreachy.org/) is more than an internship to me. I was never confident about myself, even I was afraid to apply for an internship (I am the luckiest, I did 😌). One of the most important thing that this internship boosts up my self-confident. I am no one afraid to learn new technologies, apply for internships and jobs.

Dennis, my [Outreachy](https://www.outreachy.org/) mentor has big hand in helping me out through-out the journey. We used to have weekly video call and meetings often. He actually taught me how to write well-structured and quality code. During the internship period, I got a chance to met amazing folks in Mozilla Community, people from other communities, and also made few new friends 🤗

Now this internship has been ended, what next? 🤔 After completing my graduation(which is supposed to be completed in May 2021), I want to switch country, looking for new opportunities.

Lastly, I want to say thanks to [Outreachy](https://www.outreachy.org/) Program, Mozilla, and to my mentor, [Dennis Schubert](https://schub.wtf/) ❤️
How to restore local  branch in GitHub?
Tags: opensource, github, git
Published: 2020-11-17 17:12:12

To find out the **`sha`** of the latest commit, run the command :
```bash
$ git reflog
```
<br>

It will provide all the **`HEADs`** of all branches. After this, simply run the command given below to recreate a branch using **`sha`** :

```bash
$ git branch branchName <sha>
```
<br>

**Voila ! This is how you can restore local branches in GitHub 💡**

## WORST CASE :

In my case, I re-installed the OS which resulted in deleting all the local branches of my repository. Even **`git reflog`** was not able to save me this time 😓. I lost **`sha`** of all the commits and all the local branches of my repository. So, after brainstorming, I landed up with the solution described below :

```bash
$ git checkout master
# Switched to branch 'master'

$ git fetch --all
# updates local copies of remote branches

$ git branch -a
# List all your branches

$ git checkout branch-name
# Switched to branch 'branch-name'

$ git log
# View the commit history
```
<br>

**Note :** This solution is also useful if you are cloning the repository on new/other laptop or you ended fucking up the re-base so badly that you deleted the repository and cloned a new one 😂 , which might result in deleting all the local branches of your repository and <i>**worst case**</i>, you even lost **`sha`** of the commits 🤷🏻‍♀️

Happy Git ! ❤️
Insecure …again
Tags: security, browsers, android, devices
Published: 2020-11-26 23:08:36

---
title: Insecure …again
published: true
date: 2020-11-17 17:11:09 UTC
tags: security,browsers,android,devices
canonical_url: https://adactio.com/journal/17631
---

Back in March, I wrote about [a dilemma I was facing](https://adactio.com/journal/16503). I could make the certificates on [The Session](https://thesession.org) more secure. But if I did that, people using older Android and iOS devices could no longer access the site:

> As a site owner, I can either make security my top priority, which means you’ll no longer be able to access my site. Or I can provide you access, which makes my site less secure for everyone.

In the end, I decided in favour of access. But now this issue has risen from the dead. And this time, it doesn’t matter what I think.

[Let’s Encrypt are changing the way their certificates work](https://letsencrypt.org/2020/11/06/own-two-feet.html) and once again, it’s people with older devices who are going to suffer:

> Most notably, this includes versions of Android prior to 7.1.1. That means those older versions of Android will no longer trust certificates issued by Let’s Encrypt.

This makes me sad. It’s another instance of [people being forced to buy new devices](https://adactio.com/journal/17605). Last time ‘round, my dilemma was choosing between security and access. This time, access isn’t an option. It’s a choice between security and the environment (assuming that people are even in a position to get new devices—not an assumption I’m willing to make).

But this time it’s out of my hands. Let’s Encrypt certificates will stop working on older devices and a whole lotta websites are suddenly going to be inaccessible.

I could look at using a different certificate authority, one I’d have to pay for. It feels a bit galling to have to go back to the scammy world of paying for security—something that Let’s Encrypt has taught us should quite rightly be free. But accessing a website should also be free. It shouldn’t come with the price tag of getting a new device.
"Summon The JSON is awesome. Such a great idea for a game"
Tags: javascript, python
Published: 2020-11-17 17:06:47

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

Marcus M Michaels: "Summon The JSON is awesome. Such a great idea for a game. Playing solo, or with techie friends, it’s a fun way to stay sharp and even learn some new JS functionality". Follow Marcus on Instagram: https://instagram.com/marcusmichaels/
Virtual assistants and accessibility
Tags: systems, discuss
Published: 2020-11-17 17:02:29

I'm doing an research about virtual assistants and accessibility and I did a questionary with some accessibility questions focused on comunication disabilities.
In this research only Siri, Google Assistant and Alexa will be considered.
- How audible limitations people interact with virtual assistants?
- How "nonverbal" people interact with virtual assistants?
- What high aged people (65+) think about virtual assistants? It is easy to they?
- Do your parents and grand parents use virtual assistants? How is they experience?
Add custom icons to Font Awesome
Tags: beginners, javascript, webdev, css
Published: 2020-11-17 14:42:19

In one of my recent projects I used Font Awesome as icon set but I needed to add a new icon not included in the standard Font Awesome's library, the DuckDuckGo logo 🦆 

<p style="text-align: center"><img src="https://upload.wikimedia.org/wikipedia/en/9/90/The_DuckDuckGo_Duck.png" width="150" /></p>

After some research I discovered that Font Awesome allows you to add custom icons in addition to what's offered and in this tutorial I'll show you how to extend Font Awesome in 3 simple steps keeping your code clean.

1) First of all create a folder called `myicons` and add your icon definition inside a js file (`fa-duckduckgo.js` in my case)

```js
export const faDuckDuckGo = {
  prefix: "fab",
  iconName: "duckduckgo",
  icon: [
    24,
    24,
    [],
    "e001",
    "M12 0C5.373 0 0 ... .616.484z"
  ]
};
```

`prefix` and `iconName` are respectively the icon group (`fab -> Font Awesome brands` in this case) and the icon name, so that you can render the icon in this way

```html
<i class="fab fa-duckduckgo"></i>
```

the `icon` section contains the SVG viewbox (`24, 24` in this case), the unicode point which represents this custom icon (`e001`) and the single-path SVG.

2) Create an index file `myicons/index.js` to export your custom icons

```js
export { faDuckDuckGo } from "./fa-duckduckgo";
```

3) Install `fontawesome-svg-core` package

```sh
yarn add @fortawesome/fontawesome-svg-core
```

to make your custom icons available in Font Awesome. 

```js
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faDuckDuckGo } from "./myicons";

library.add(faDuckDuckGo);

dom.watch();
```

In the code above your custom icons gets imported from the `myicons` module you created before and then added to Font Awesome's library. [dom.watch](https://fontawesome.com/how-to-use/javascript-api/methods/dom-watch) method watches the DOM for any additional icons being added or modified.

Here you can play with the final demo!

{% codesandbox fa-duckduckgo-c63px %}

Pssst... if you use TypeScript you need to use some types from `fontawesome-svg-core` as you can see in [this example](https://codesandbox.io/s/fa-list-old-style-ts-k3zhc).
Using Vuex4 With Vue3 And Ionic Framework
Tags: vue, vuex, ionic, javascript
Published: 2020-11-17 17:01:03

Using Vuex4 With Vue3 And Ionic Framework

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

A simple introduction to using [Vuex 4](https://next.vuex.vuejs.org/) for state management in [VueJS](https://v3.vuejs.org/) version 3 with [Ionic Framework](https://ionicframework.com/docs/vue/overview)

>[Video] How To Use Vue 3 Composition API for State Management - DEV Community 👩‍💻👨‍💻 https://buff.ly/36TJfPG

We cover two specific scenarios when using a simple count store

- State management of the store by dispatching an action to change the value in the store, no payload passed
- State management of the store by dispatching an action to change the value in the store, using the payload passed in my the component

{% youtube bwtE5BU8YUg %}

### Links
- Code: https://codesandbox.io/s/vue-3-ionic-vuex-xv8li
- Video: https://www.youtube.com/watch?v=bwtE5BU8YUg

### More VueJS & Ionic Videos
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xw2w8i9ccngje6h77m8s.png)](https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg)
Transient Modifier In Java
Tags: todayilearned, java, serialization
Published: 2020-11-18 08:30:55

---
title: Transient Modifier In Java
published: true
date: 2020-11-17 17:00:00 UTC
tags: TodayILearned,java,serialization
canonical_url: https://clavinjune.dev/en/blogs/transient-modifier-in-java/
---

Data serialization library in Java could be varied. You can use Jackson, GSON, or anything else. Since there are too many serialization libraries out there, it’s quite tricky to manage Java class attribute exclusion during serialization. Each library might have their own way to exclude the Java class attribute. Each Java project should only have 1 serialization library in order to maintain the standardization but, what if somehow in someway you need more than one serialization library?

Here comes `transient modifier` that helps you manage the java class attribute exclusion during serialization in language level. There’s no need to memorize unique annotation like

```java
@Expose(serialize = false, deserialize = true)
```

or

```java
@JsonIgnore
```

You can only use `transient` keyword as your attribute modifier. Let’s try it.

## Sample Class

```java
// Jackson need this annotation
// because it can't deserialize unknown properties. duh!
@JsonIgnoreProperties(ignoreUnknown = true)
public class Sample {
  // using transient modifier on foo
  public transient String foo;
  public String bar;

  @Override
  public String toString() {
    return "Sample{" +
        "foo='" + foo + '\'' +
        ", bar='" + bar + '\'' +
        '}';
  }

  public static void main(String[] args) throws Exception {
    String json = "{\"foo\":\"foox\",\"bar\":\"barx\"}";

    // by default jackson not reading any attribute,
    // jackson only read public default Getter
    // so jackson need to have this configuration to mark transient attributes
    ObjectMapper jackson = new ObjectMapper()
        .configure(MapperFeature.PROPAGATE_TRANSIENT_MARKER, true);
    Gson gson = new Gson();

    Sample byJackson = jackson.readValue(json, Sample.class);
    Sample byGson = gson.fromJson(json, Sample.class);

    System.out.println("deserialization by jackson: " + byJackson);
    System.out.println("deserialization by gson: " + byGson);

    System.out.println("serialization by gson: " + gson.toJson(byGson));
    System.out.println("serialization by jackson: " + jackson.writeValueAsString(byJackson));
  }
}
```

## output

```
deserialization by jackson: Sample{foo='null', bar='barx'}
deserialization by gson: Sample{foo='null', bar='barx'}
serialization by gson: {"bar":"barx"}
serialization by jackson: {"bar":"barx"}
```

Yep, as we expect, foo attribute isn’t serialized. `transient` modifier would work just fine as long as the attribute itself has no `static` or `final` modifier. Whenever a `transient` attribute has `static` or `final` modifier, the `transient` modifier has no effect on that attribute.

Thank you for reading!
jmeter-Promethes - grafana
Published: 2020-11-17 16:57:25

Hi, I am stuck with below 1) Prometheus is not working on port 9270 so i updated 9090 both metrics and graph. 2) do we have any way to use jmeter backend listener instead of prometheus plugin? we have some limitations to bring the plugin at client side...seeing if backend listener is an option. please suggest