teleren/devto huggingface dataset:
boring view from a scientist window
Tags: writing, productivity
Published: 2021-02-07 22:32:33

[link to abstract](https://geologi.fitb.itb.ac.id/2021/02/05/is-earth-science-only-made-for-everyone-who-speaks-english/?fbclid=IwAR20pNjqWoN2vn_TQhiab7KUKA5T2Lubs24t2irlVkLMCeLBg7w3P7-YI0E)

Apakah ilmu (kebumian) hanya dibuat untuk orang yang bisa berbahasa Inggris?

Abstrak kami yang baru saja dikirimkan ke Goldschmidt 2021 sesi 14f. Gratis.

Apakah anda sudah?

06-02-21
the colors of open access
Tags: writing, productivity
Published: 2021-02-07 22:30:00

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

Kita dengan berbagai pilihan warna akses terbuka yang “membingungkan”. Kenapa tidak satu jenis akses terbuka saja? 

It’s us with our many colors of #openaccess. Why can’t we have just one color?

#365figures #visualthinking #openscience #academicart

07-02-21
Toxiplasma gondii
Tags: writing, productivity
Published: 2021-02-07 22:25:29

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

Ini Toxoplasma gondii.

Saya membaca tentangnya dalam salah satu artikel dalam majalah Natgeo Indonesia edisi Feb 2019. Gambarnya saya dapatkan dari berbagai sumber. Kabarnya parasit bersel tunggal ini mampu mengubah perilaku inangnya. Bagus kalau bisa kita tiru caranya. Kami ingin mengubah perilaku para peneliti. 

#365figures #academicdrawing #scicomm

07-02-21
AngularApp
Published: 2021-02-07 21:40:47

hello guys I'm having issues with login with google authentication on my angular application.
what should I do any ideas?

this is my package.json file

"dependencies": {
"@angular/animations": "^11.1.2",
"@angular/cdk": "^11.1.1",
"@angular/common": "~11.1.2",
"@angular/compiler": "~11.1.2",
"@angular/core": "~11.1.2",
"@angular/fire": "^6.1.4",
"@angular/forms": "~11.1.2",
"@angular/material": "^11.1.1",
"@angular/platform-browser": "~11.1.2",
"@angular/platform-browser-dynamic": "~11.1.2",
"@angular/router": "~11.1.2",
"firebase": "^8.2.6",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1101.4",
"@angular/cli": "~11.1.4",
"@angular/compiler-cli": "~11.1.2",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.2.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.1.2"
}

below is my authservice.ts file

import { stringify } from '@angular/compiler/src/util';
import { Injectable } from '@angular/core';

import {AngularFireAuth} from '@angular/fire/auth';

@Injectable({
providedIn: 'root'
})
export class AuthService {

constructor(private login:AngularFireAuth ) { }
LoginWithGoogle()
{

this.login.signInWithRedirect()
}

}

I'm not getting any recommendation for the "auth" and I'm kind of confused.
is anything I need to change like the angular/fire version and firebase version? in other to get the "auth" for authentication
how can I solve this problem to get the "auth"
Processes?

before i saw it used to be like this.login.auth.SigninWithRedirect(new firebase.auth.Googleprovider())

Please, I need help with both the sign-in and signout implementation example as well

Thanks
Mermaid Changed How I Diagram Forever
Tags: mermaid, diagrams
Published: 2021-02-07 21:40:42

A co-worker showed me Mermaid the other day and it's changed how I diagram forever. As a tech lead, I constantly have to create sequence and flow diagrams to show how an application works/should work. Typically, I've used WYSIWYG diagram software and it's worked but there's a lot that's annoying about it. Trying to keep things aligned, adjusting for a missing step, and finding the right shapes has always made the process cumbersome. Enter Mermaid.

Rather than "drawing" a diagram, Mermaid let's you create your diagram via some Markdown-like syntax in a `.md` file. I'll be honest, at first, I was a little skeptical but within five minutes of trying it out, I had the hang of it and swore I'd never go back. Seeing is believing though so let me show you a sample and then I'll mention a few reasons why this is a total game-changer.

**Mermaid Example**

```markdown
sequenceDiagram
  participant System A
  participant System B
  activate System A
  System A ->> System B: POST /resource/{id}
  activate System B
  System B ->> System B: Do something
  System B -->> System A: Response
  deactivate System B
  deactivate System A
```

**Output**

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

How cool is that?

Mermaid also has support for a number of other kinds of graphs, along with a lot of customization options. I won't get into that because the documentation is pretty good and there's no way I could capture it all. You can check out the documentation here - [Mermaid](https://mermaid-js.github.io/mermaid/#/).

I see two main benefits from using Mermaid as opposed to your run of the mill diagram software.

1. Creating diagrams via code allows the documentation to easily live with your application. In a world where I've grown accustomed to having to search a wiki for some obscure diagram related to the application I'm developing on, this is a gamechanger. Even better, SCM like Gitlab have a built-in Mermaid processor so opening the Mermaid markdown will actually load a graph on the page.

2. Updates are so much easier. With typical diagram software, trying to add a missing step to a diagram is horrible. Trying to select all the elements that have to shift without accidentally moving the background elements and still keep everything aligned is fool's errand. With Mermaid, you just add a new line or two and save.

That all being said, there's a few drawbacks I've noticed and I think it's fair to bring awareness there. For super involved/long graphs, the text gets really small and from what I've seen thus far, the browser zoom doesn't work very well with trying to zoom in and out of the graph. Also, the "notes" you can add have a problem displaying. There may be a customization I'm missing but notes all show up in one line and get truncated awkwardly.

Bottom line: Give Mermaid a try. It's the rare JS project I've actually gotten really excited about and want to evangelize.
JavaScript Object References and Copying
Tags: javascript, tutorial, codenewbie, node
Published: 2021-02-07 21:40:26

{% youtube 9i5I8EJ9YZs %}

---
Non-primitive data types like objects can be stored and copied by reference.

See the examples below:

**Primitive data type**
```js
const name = 'Bello';
const myName = name;

console.log(myName); // Bello
```

**Non-primitive data type**
```js
const obj = { name: 'Bello', favNum: 9 }; 
const person = obj; // copy the reference

console.log(person); // { name: 'Bello', favNum: 9 }
console.log(person.favNum); // 9

```

The object `{ name: 'Bello', favNum: 9 }` is assigned to the variable `obj` to store its address in memory. Think of `obj` like a sheet of paper with an address in it. That is, `person` copied the reference to the object `obj`.

Accessing the value of the object (`person.favNum`) looks for the address of `obj` through `person`

> The object `obj` itself is not duplicated

We can also modify the object content.

```js
const obj = { name: 'Bello', favNum: 9 }; 
const person= obj; // copy the reference

console.log(person); // { name: 'Bello', favNum: 9 }

person.favNum = 69;

console.log(person); // { name: 'Bello', favNum: 69 }
```

---
<a href="https://www.whogohost.com/host/aff.php?aff=7390&page=hosting" target="_blank"><img src="https://www.whogohost.com/images/affiliates/unlimited-hosting-728-x-90.png" /></a>

---
### Comparison by reference
Two objects are equal only if they are the same object.


```js
const a = {};
const b = a; // copy the reference

console.log(a == b); // true, both variables reference the same object
console.log(a === b); // true
```
Since `a` and `b` reference the same object, thus they are equal.

Here also two independent objects are not equal, even though they look alike (both are empty):

```js
const a = {};
const b = {}; // two independent objects

console.log(a == b); // false
```

**Happy coding!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---

### TechStack Media | Domain
- Purchase a `.com` domain name as low as $9.99.
- Purchase a `.net` domain name as low as $12.99.
- Get cheaper domain names as low as $3.
-  Build a website with ease.

<a href="https://domain.mno8.net/c/2653712/848391/9560" target="_top" id="848391"><img src="//a.impactradius-go.com/display-ad/9560-848391" border="0" alt="" width="300" height="250"/></a><img height="0" width="0" src="https://imp.pxf.io/i/2653712/848391/9560" style="position:absolute;visibility:hidden;" border="0" />
Next.js: How to start server, and error: Ran `next build` but it is saying `next command` not found
Published: 2021-02-07 21:36:29

UPDATE: run `npm run dev`

If `npm start` doesn't work, 

Fix: `npm run build` and `npm run start` 

In the future, can simply type  `npm start`

https://github.com/vercel/next.js/issues/8945
How did you spend the 2 weeks before your first dev job? 
Tags: discuss, career, codenewbie, watercooler
Published: 2021-02-07 21:35:54

My start date for work keeps getting pushed back (and it might be another 2 weeks). Since I can't travel or do much else due to Coronavirus restrictions, I might as well spend more time preparing for day 1 at work.

How would you spend the next 1-2 weeks?
Citizenship test app
Published: 2021-02-07 21:20:13

As my fourth project as a student at Flatiron, I was required to develop a javascript project with rails as backend. In the project, I had to use javascript to design the front-end while rails api as the back-end. 

When I applied for my naturalization in the US, I had to study and practice about 100 civic questions. There were a lot of resources on the internet that helps aspiring citizens to practice these questions. However, the resources that I researched did not include the answers to some of the questions that are specific to a state and district that the aspiring citizen will be asked. The answers to these questions are dependent upon where the aspiring citizen will be taking the naturalization test. Thus, I designed a web application to included these answers.

I the web application, the user is first asked to select the state and district in which the user resides. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gp0npsoqrxyd1lwma4tp.png)
Once these two informations are provided, the user will be directed to a page where a quiz of ten questions are rendered. The user interacts with these question by matching one column of questions with the column of answers. In addition, they will be able to leave their comments on the page or give a thumps up or down.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yd0xj5jklp4pshhcep4j.png)
The other feature of the application is the presentation of question and answers in the form of flash cards for the user to study these questions. This page renders the each question and when the question is clicked, the card flips to show its answers. By clicking on the previous and next buttons, the user can study all the questions. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h1v9b5ip2w8ygd1sxz6c.png)
How to Use Fetch to make Ajax calls in JavaScript
Tags: javascript
Published: 2021-02-07 21:11:57

Fetch is an interface to make requests and responses from a backend to frontend.

The requests are sent as GET by default.To send POST/PATCH/DELETE/PUT you can use a method property as part of options it can take values such as:

METHOD: GET/POST/PATCH
HEADERS: HEADER OBJECT
MODE: SUCH AS CORS, NO-CORS, SAME ORIGIN(depends on your browser)

EXAMPLE: 

  postUser = body => fetch(this.usersURL, {
   method: "POST",
   headers: this.headers,
   body: JSON.stringify(body)
 }).then(this.parseJSON)


There’s an umbrella called AJAX(Asynchronous Javascript and Xml)
Using Ajax and Fetch IS flexible and easy to use because of its syntax and structure, it’s supported by modern browsers and ES6 Javascript(so make sure to read the requirements)

Some definitions I think are useful to share are:

XML: Lets you convert data to JSON to your device.

JSON: JavaScript Object Notation is a syntax to serializing objects, arrays, numbers, strings, booleans and NULL 

Calling Fetch returns a promise for example: 

fetchScores = () => fetch(this.scoresURL).then(this.parseJSON)

Some methods you should know are:
JSON(): Resolves the promise 

CLONE(): Creates a clone of the response 

arrayBuffer(): Returns a promise that resolves with a generic fixed length raw binary data buffer(temporarily stores data while it is being moved from one place to another)

SUMMARY:

Javascript fetch request-responses are used to make asynchronous HTTP requests, using as much clearer code and delivering flexible features to make requests to servers from web browsers.

Thanks for reading!
How to animate SVG line
Published: 2021-02-07 20:51:58

To add some dynamism to your HTML page, we can add some animations, especially on icons. So we will do a simple SVG line animation to try it.

## Starting slow
First, let's just draw a circle. It will be our base.

{% codepen https://codepen.io/adaendra/pen/WNowPqB %}

<br/>

## Add an animation
To animate the circle, we will use the next properties :
* **stroke-dasharray**: This defines the line dash size.
* **stroke-dashoffset**: This defines the offset between the start of the line and the first dash.

*Example*
{% codepen https://codepen.io/adaendra/pen/ZEBWPbW %}

Then the animation is simple. We will create a dash that measures the entire line and add an offset of the same length. Then with the animation, we will reduce the offset size, and the drawing will appear.

> But how can we know the exact size of a line?

With a little bit of javascript, we can retrieve this information.
```js
pathElement.getTotalLength()
```

So if we add this information with a javascript loop, we are able to create our first animation!


{% codepen https://codepen.io/adaendra/pen/dyOMapp %}

Hooray! We did it!

<br/>

## A little bit more!
Here we've done the first step. Now, if you want to do a more complex animation, you can add other lines to draw a planet icon.


{% codepen https://codepen.io/adaendra/pen/YzpqBWN %}

And then you just have to add multiple classes to delay some parts of the animation to have a cool SVG line animation.


{% codepen https://codepen.io/adaendra/pen/bGBpzVv %}

<br/>

---
I hope you've enjoyed this post! If you have some other tips to share, don't hesitate to post it in the comments, or create your own post and share here the link! :)
CSS Variables
Tags: css
Published: 2021-02-07 20:40:12

---
title: CSS Variables
published: true
date: 
tags: css
canonical_url: https://cgweb.co.uk/blog/css-custom-properties
---

CSS Variables have been around for a while and designed to try and reduce duplication in CSS. They are a useful way to change multiple values at the same time. To create them you use a prefix with `--` and can be used in declarations using `var()` function e.g. 

```css 
:root { 
  --header-background-colour: red; 
  --secondary-background-colour: blue; 
  --text-colour: white; 
} 

header { 
  background-color: var(--header-background-colour); 
  color: var(--text-colour); 
} 

p { 
  background-color: var(--secondary-background-colour); 
  color: var(--text-colour); 
} 
``` 
**It is important to note that these *are* case sensitive** so `--bg-colour` and `--BG-colour` are seen as two separate properties. To see the current support see [caniuse.com](https://caniuse.com/?search=css%20variables) there is good support in modern browsers although if you need to support everyone's favourite IE they won't work and instead, you will need to set a separate background property before using var e.g. 

```css 
  background-color: red; // this will work in IE 
  background-color: var(--header-background-color); // this will not
``` 

### Inheritance 

As with other CSS properties, variables will inherit so a good idea to set them in `:root` as shown above to make them globally available and therefore accessible to every element. You can then set in specific individual elements to overwrite these global values. 

I have setup a simple example on codepen:

See the Pen [CSS Variables](https://codepen.io/cgweb/pen/YzGoqLQ) by Chloe ([@cgweb](https://codepen.io/cgweb)) on [CodePen](https://codepen.io).

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
How to access subfolders using nuxt content module?
Tags: nuxt, vue, help
Published: 2021-02-07 20:35:56

---
title: How to access subfolders using nuxt content module?
published: true
description: How to display files from deeper folder level
tags: nuxt, vue, help
//cover_image: https://direct_url_to_image.jpg
---

I am currently using this module for my blog and as it is a blog folder with a series of blog posts these render fine, however I'm also attempting to use it to display some documentation which inckude subfolders. I have a docs folder with index.vue with code as follows:

```Vue
<ul class="mx-auto lg:w-1/2">
   <li class="p-5" v-for="doc in docs" :key="doc.id">
      <nuxt-link :to="{ name: 'docs-slug', params: { slug: doc.slug } }">
      <h2 class="py-4 text-white">{{ doc.title }}</h2>
     </nuxt-link>
   </li>
 </ul>

async asyncData({ $content, params }) {
    const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

        return {
            docs
        }
    }
```
Now this renders the title of all the pages inside mydocs folder correctly, however, when clicking on one it does not load the corresponding content and I am not sure what I am doing wrong. (If the files are in the base 'docs' folder they render fine)

And in my `_slug.vue` file I have this:

```Vue
async asyncData({ $content, params }){
  const docs = await $content('mydocs', { deep: true }, params.slug).fetch()

  return {
    docs
  }
},
```

For example, I click the Vue title and it tries to load `/docs/vue/` when the path is actually `docs/js/vue` ? I thought using `{ deep: true }` would solve this as the docs it says this will fetch files from subdirectories so how do I set the path? Am I missing something? Anyone come across the same issue?

Any help much appreciated as I'm not sure what I'm doing wrong/.
Laravel Livewire: an introduction
Tags: laravel, livewire
Published: 2021-02-07 20:24:27

Laravel Livewire is a great framework for creating interactive web apps without writing any JavaScript. In this tutorial we're going to make a few components using Laravel Livewire so we can see the power of this framework.

## Setting up

**Important: Livewire requires you to use Laravel.**

You can install Livewire using Composer:

```
composer require livewire/livewire
```

Next, you have to include Livewire's assets on your page:

```
<livewire:styles /> <!-- Styles -->
<livewire:scripts /> <!-- Scripts -->
```

And that was it! Now you can use Livewire.

---

[Click here to continue reading.](https://www.jeroenvanrensen.nl/blog/laravel-livewire-intro)
What is ML?
Tags: machinelearning, ai
Published: 2021-02-07 19:58:23

Machine learning is everywhere these days. Mostly in newspapers, but it's seeping into many real life, actual use cases. But what is it actually?

If you read only articles on [TechCrunch](https://techcrunch.com/2020/12/03/ais-next-act-genius-chips-programmable-silicon-and-the-future-of-computing/), [Forbes](https://www.forbes.com/sites/johnkoetsier/2020/07/09/elon-musk-tesla-will-have-level-5-self-driving-cars-this-year/), [Business Insider](https://www.businessinsider.com/elon-musk-maureen-dowd-ai-google-deepmind-wargames-2020-7) or even [MIT Technology Review](https://www.technologyreview.com/2017/07/07/4391/the-machines-are-getting-ready-to-play-doctor/), you'd think it's something that brings Model T800 to life soon, or that it will cure cancer and make radiologists useless, or that it will enable humans to upload their minds to the cloud and live forever, or that it will bring fully self driving cars by the end of the year (every year for the last 5 years).

Many companies want to get in on the ML bandwagon. It's understandable: 1) that's where the money is (some 10 billion dollars were invested in it in 2018) and 2) correctly done, applied to the right problems, ML can actually be really valuable, either by automating things that were previously done with manual labor or even by enabling things that were previously unfeasible.

But at the same time, a lot of ML projects make unrealistic promises, eat a lot of money and then deliver something that doesn't work well enough to have a positive ROI. The ML engineers and researchers are happy, they got payed, analyzed the data and played around with building ML models, and maybe even published a paper or two. But the business is not happy, because they are not better off in any way.

This is not a new phenomenon. Artificial Intelligence, of which Machine Learning is a subdomain of, has been plagued by similar bubbles ever since it was founded. AI has gone through several AI winters already, in the 60s, 80s and late 90s. Big promises, few results.

To paraphrase Battlestar Galactica, "All this has happened before, ~~all this will happen again~~ but this time it's different". But why is it different? More about that next time.
Elevation with sass maps and loops |  Vue component Lib - part 7
Tags: webdev, beginners, css, vue
Published: 2021-02-07 20:17:11

Hey,

In this part we will be adding a elevation css utlity class.
We will use SASS maps and loops for that!

Here is the Video:

{% youtube ELFlfMCW6xs %}

Code Repo for youtube: https://github.com/lampewebdev/lcs-components-yt
Code Repo for the project: https://github.com/lampewebdev/lcs-components

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) | [YouTube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ)
Backend - PokeApi
Published: 2021-02-07 20:04:00

#Acciones:
-Indentificarnos 
-Añadir pokémon a nuestro equipo
-Eliminar pokémon de nuestro equipo
-Consultar informacion de nuestro equipo
-Intercambiar el orden de nuestro Pokémon

#REST Desing:
-Añadir Pokémon: POST /team/pokemons
-Consulta Equipo: GET /team
-Eliminar Pokémon: DELETE /team/pokemons/:id
-Intercambiar el orden de nuestro pokémon: PUT /team
-Sistemas de credenciales 


4- Testeando la autenticación

Para autenticar uso la libreria 

http://www.passportjs.org/
https://jwt.io/