teleren/devto huggingface dataset:
Fade In and Grow Effects
Tags: codepen
Published: 2020-06-23 21:26:37

<h1>Objective</h1>

<p>Hi! This pen shows how to use fade in an element using <em>opacity</em> and how to grow a text using <em>scale</em>. Additionally, it is show a transformation effect during the button hover and its appearance.</p>

<h1>Transitions used</h1>

<ul>
<li>
<strong>ease-in</strong>: during the initial welcome message hiding and also to show the new welcome message</li>
<li>
<strong>cubic-bezier</strong>: during the button hover effect</li>
<li>
<strong>ease</strong>: to ease the text transformation in the new welcome message</li>
</ul>

{% codepen https://codepen.io/fabricioffc/pen/mdeYGRL %}
The Legend of Data - Ep.4 - Data Visualization 1
Tags: python, datascience, tutorial, beginners
Published: 2020-06-23 21:25:57

---
title: The Legend of Data - Ep.4 - Data Visualization 1
published: true
description: To start the topic of data visualisation, we went through why we do data visualisation, the common graph types and popular tool for data visualisation in Python. We also start talking about Matplotlib, the grand-daddy or the king of data visualisation.
tags: python, datascience, tutorial, beginner
---
To start the topic of data visualisation, we went through why we do data visualisation, the common graph types and popular tool for data visualisation in Python. We also start talking about Matplotlib, the grand-daddy or the king of data visualisation.

If you have any questions or any suggestions about which Python or Data Science topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)

You can get the slide deck [here](https://slides.com/cheukting_ho/legend-data-pandas1/). The notebook that I used can be found [here](https://github.com/Cheukting/legend_data).
Library VS Framework - What is the difference? 
Published: 2020-06-23 21:18:38

---
title: Library VS Framework - What is the difference? 
published: true
description: frameworks, libraries, web
tags: 
//cover_image:  https://res.cloudinary.com/drda5zneo/image/upload/v1592946977/images_2_npxf4b.png 
---
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6m73dldfv6ms7ya67mv5.png)


The key difference between a library and a framework is "Inversion of Control". When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you. When you using a library, you are in charge of the flow of the application. You choose when and where to call the library. When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.

Imagine trying to make a car. With a framework, you’re essentially given all the materials to make that car, and it’s up to you in what arrangement you put them in. A framework is just like a factory, it is pre-equipped with code that can help you make your product without you thinking about the small details and configurations.

With a library, on the other hand, you start with essentially nothing. The library’s materials are a limited set in comparison to a framework’s materials, and you can pick/choose when you want to use them and when you want to step outside that and use third-party materials.


A library is just a collection of class definitions. The reason behind is simply code reuse, i.e. get the code that has already been written by other developers. The classes and methods normally define specific operations in a domain specific area. For example, there are some libraries of mathematics which can let developer just call the function without redo the implementation of how an algorithm works.

In framework, all the control flow is already there, and there's a bunch of predefined white spots that you should fill out with your code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton. In this way, your code will be called by the framework when appropriately. The benefit is that developers do not need to worry about if a design is good or not, but just about implementing domain specific functions.

Both of them defined API, which is used for programmers to use. To put those together, we can think of a library as a certain function of an application, a framework as the skeleton of the application, and an API is connector to put those together. A typical development process normally starts with a framework, and fill out functions defined in libraries through API.
UserLand Debian on Android with VSCode/Powershell
Tags: powershell, android, linux, vscode
Published: 2020-06-23 21:08:21

VSCode/Powershell running on Debian on my Galaxy S10+. This a VNC session to the VNC server in the Debian container.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dcwowy35a763uq35i2cp.jpg)
Safari adapting webextensions APIs
Tags: safari, webextensions, browsers
Published: 2020-06-23 20:56:46

We can write cross-browser extensions using Webextension APIs which were installable on Firefox and Chrome (or chrome based browsers, like Brave, Opera), at WWDC 2020 event, Apple announced that Safari will also follow the Webextension APIs Suite for Safari extensions, adding one more possibility for cross browser extensions 😎.  

*Announcements*
- https://developer.apple.com/videos/play/wwdc2020/10665/
- https://hacks.mozilla.org/2020/06/welcoming-safari-to-the-webextensions-community/
What's most popular Framework in 2020?
Tags: jquery, react, angular
Published: 2020-06-23 20:42:19

I had to write an Executive Briefing last month. Much to my own surprise, JQuery is still a major player.

1) JQuery
2) React
3) Angular

JQuery dwarfs the rest according to StackOverflow Survey. A full 85% of all respondents said they use JQuery.

It didn't say that JQuery was the sole library, I suspect not. However with the advent of Web Components we are seeing a trend in getting 'closer to the metal'. Just like it was done 20 years ago in nothing but HTML and Javascript. 

I always enjoyed JQuery but picked up an attitude (after reading lots of posts) that JQuery is not needed, it's on its way out etc. I think it's time for an attitude adjustment.
Hello, World! It's Justin!
Tags: redis, datastructures, hashes, database
Published: 2020-06-23 19:38:17

Hello, Dev.to peeps! Super excited to start on this platform!

The education team at Redis Labs has been busy creating helpful, efficient, and relevant content covering the fundamental data structures used to store data in a Redis instance; I'd like to share our video on Hashes, our first dive!

Instead of storing records in tables and rows with a rigid SQL structure, Redis allows us to store information in memory using traditional data structures to allow us to maximize speed and flexibility.  Hashes are a great start as they mimic the traditional SQL row closely with fields and values assigned to a single key. 

Take a look at this quick explanation on Hashes used to store data for an old school RPG pixel dungeon-crawler, Mages & Minotaurs!  I've been working on this game's theoretical data structures so much that I might just have to whip up a real playable version!

{% youtube -agsJUihrWw %}
Material Dialog Positioning
Published: 2020-06-23 20:33:59

First pass in your 'MessageComponent' on Open

```typescript
     // data you want to show is contained in the matDialogConfig
     let mc = this.getConfig(data);
     // Tell Matdialog which Angular component to use.
     let mdRef = this.md.open(MessageComponent, mc);
```

Grab the data out of MessageComponent

```Typescript
    import { MAT_DIALOG_DATA } from "@angular/material/dialog";
    import { Component, OnInit, AfterViewInit, Inject } from "@angular/core";
    import { inject } from "@angular/core/testing";
    
    @Component({
      selector: "lib-message",
      templateUrl: "./message.component.html",
      styleUrls: ["./message.component.css"],
    })
    export class MessageComponent implements OnInit, AfterViewInit {
      constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
        // get the injected dialog data
        this.data = data;
      }
    
      ngOnInit(): void {}
      ngAfterViewInit() {}
    }
```
In HTML, this is only markup needed.

```html

    {{data}}
```

The CSS in the MessageComponent allows full control on position.

```css
    :host {
        display: grid;
        justify-content: center;
        align-items: center;
        background-color: yellow;
        position: absolute;
        top: 10em;
        left: 20em;
        height: 10em;
        width: 20em;
        box-shadow: 0 0 5px rgb(0, 0, 0, 0.27);
    }
```
Your message component takes precedence over the CDK Overlay! Very nice.
¿Como funciona Go Machin?
Published: 2020-06-23 20:25:33


Si quieres conducir o ir de pasajero al viajar, descarga la app Go Machin, ábrela y selecciona Buscar Viaje o Publicar viaje.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gq4hmnuqighlu8chxlv8.jpg)




##<b>Buscar viaje</b>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fci6ci4wyu62hp2fodt2.png)
Si prefieres ir de pasajero pon en Buscar viaje, ábrela y solicita un viaje a un conductor que vaya en tu misma dirección.


##<b>Publicar viaje</b>![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uzlmw1w5cy4aapd1e2gx.png)
Si quieres conducir, puedes publicar tu ruta de salida y llegada, agregar cuantos asientos vacíos tienes y el valor por cada uno. Pronto te llegaran solicitudes donde puedes ver con quien viajar.

##<b>¿Con quién vas a compartir tu vehículo?</b>
Personas en tu ciudad que utilizan Go machin para viajar de una ciudad a ciudad. Las coincidencias se basan en criterios de ruta.

##<b>¿Cómo funcionan los pagos?</b>
Los precios se fijan para ayudar a los conductores con los gastos de combustible y otros costes del viaje. Los pagos se gestionan a través de la app de forma segura o en pago efectivo, al inicio del viaje.

##<b>¿Los conductores pueden llevar a varios pasajeros?</b>
Sí, Go Machin permite que compartan vehículo un total de 3 Gomers ( minimiza la cantidad de contactos y, por lo tanto, puede ayudar a las personas a viajar de manera más segura en estos tiempos difíciles). Una vez que se han confirmado los puntos de recogida y llegada, otros pasajeros que vayan en esa dirección pueden unirse al viaje compartido.

_#CompartirNosMueve_ 
www.gomachin.com
Solving N + 1 problem with GraphQL, TypeScript, and PostgresQL
Tags: typescript, graphql, postgres
Published: 2020-06-23 20:23:25

One of the common problems that most of the developers face with graphql, is the N + 1 problem, it means that the server executes multiple unnecessary round trips to datastores for nested data, resulting in slow response times and expensive requests 

###For Example 
<code>
```graphql
query{
  users{           
    id,
    full_name,
    pets{
      name
    }
  }
}
```
</code>
in the query above, will be executed 1 query to the database to the datastore get the users and for each user another extra query for each user to fetch its pets (N queries for N users) resulting in N + 1.

###Now What to do?

to solve this problem the Graphql team in Facebook created Dataloader 
wich batch our data, AKA: request all the data from the database, at the start of the server, and when we are going to request one item, all that we do is pass down the identifier of the item and execute a search inside the array of data, which is a lot faster than execute a query to the database every time is made a request because is retrieving data from memory not datastore

Once this is clarified let's puts our hands on 

for this post I'll be using the API example I use for my last [post](https://dev.to/wonder2210/graphql-typescript-postgresql-api-271g) after clone into your PC the repo and install everything
run:
<code>
```bash
yarn add dataloader
```
</code>  

create the following folder and file

<code>
```
  ...
     src/
        utils/
           loaders.ts  
  ...
```
</code>
and in uutils/loaders.ts
</code>
```typescript
import {BatchLoadFn} from 'dataloader';
import {Pet,User} from '../database/models';



export const Pets : BatchLoadFn<number,Array<Pet>>= async (ids)=>{
    const pets= await Pet.query();

    return ids.map(i=>pets.filter(item=> item.id===i))

};

export const Users : BatchLoadFn<number,Array<User>> = async (ids)=>{
    const users = await User.query();

    return ids.map(id=> users.filter(i=> i.id===id));
}
```
<code/>

the way it will be used in our resolvers is through the context :
 src/index.ts
<code>
```typescript
...
import DataLoader from 'dataloader';
import {Pets,Users} from './utils/loaders';
...

...
const config : Config = {
    schema:schema,
    introspection: true,//these lines are required to use the gui 
    playground: true,//   of playground
    context:{
        loaders:{
            users: new DataLoader(Users),
            pets: new DataLoader(Pets),
        }
    }

}
...
```
</code>
now in your resolvers instead of using a query to get the data nested
you use the loaders passed down through the context and using the id to find the match in the loaders

{% gist 
https://gist.github.com/Wonder2210/bb7a0799235930f0742ae33d02591baf
 %}
And we can appreciate an increase of performance in the response 
![Performance](https://dev-to-uploads.s3.amazonaws.com/i/u2d0jvadq9x06fhgcy1b.png)

Thank's for read it , if you have any suggestion for me I would love to know it, leave it below in the comments box, if you liked it , please follow me here and also on twitter, Thanks! take care!
Before you start coding !
Tags: architecture, mongodb, redis, node
Published: 2020-06-23 20:16:36

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ti2g0v92x7htjxkij30t.png)
I’ve been lately working on a mobile application backend I am gonna talk on the next posts the problems I faced, things I learned.
👇👇👇👇
In this post, I'm gonna talk about one of the problems I faced is mainly using Redis as a database for those who don't know Redis.👨🏻‍💻
Its a memory database used mainly on caching.👨🏻‍💻
As we said its a caching database so we cant use it as the main database for our social or chat app.👨🏻‍💻
So I was obliged to redesign the database again using MongoDB creating models.
Making choices was the hardest part.
So what I got from this experience.
👇
Before you start coding think,
write down the main functionalities you gonna build, design them, analyze, and read more about your choices  so you don't get blocked after.
Re-escribiendo un switch 
Published: 2020-06-23 20:09:48

Hace poco me toco realizar un filtro   que tenia una particularidad, 
este filtro tenia   8 opciones, pero desde la base de datos yo recibía solo un id, para lo cual en la vista  me tocaba realizar comparación del id que  me llegaba desde la base de datos  con los nombres  de los filtros que tenia en un array.  Inmediatamente pensé  en un switch, pero los switch son estructuras que no me gusta usar mucho  cuando tengo mas de 3 opciones porque  se  puede volver un tanto  incomodo de mantener.

Esto es algo muy común y hoy vamos a ver algunas alternativas

## switch tradicional

![switch ](https://dev-to-uploads.s3.amazonaws.com/i/3c0gpdtj3onu5a7wlxac.PNG)

Aquí podemos ver como la implementación se va volviendo una 
estructura compleja que no es fácil de interpretar. 

## switch refactoring

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

Aquí podemos ver como en una sola linea 
resolvimos  lo mismo que teníamos anteriormente. 

Buscar otras formas de hacer tareas comunes como esta puede ser una muy buena practica para mejorar nuestras habilidades y  si se te  ocurre alguna otra forma  me gustaría leerla.
  
{% codepen https://codepen.io/Corovino/pen/zYrwaVv  %}
Job Search Week 18
Tags: makers
Published: 2020-06-23 19:54:03

I got my message board app completed this week and I did another review. I also started a new project at the end of this week a MERN todo app which I'm testing with Jest.

Day 1

On Monday I finished off my message board app by connecting the front-end to the back-end. I also refactored the code to implement mongoose.

Day 2

After finishing the message board app I had to update the read me on how to use and run the tests so I did that on Tuesday formatting it making easy to read. I also updated my projects guide to show my message board project.

Day 3

Wednesday I did another review this one is my fifth review. It was a todo app built using ruby. My process is looking very good at the moment but I need to take a little more time at the start to ask more questions. So once I get that down I should be all good.

Day 4

I spent Thursday going over the review finishing what I had been doing and refactoring it. I also updated the read me to explain what it was and how it worked.

Day 5

Finally, on Friday, I started on my MERN todo app using Jest which I prefer over Mocha and Chai. I want to have a really well-tested app using Jest so I can get some extra practice in with Jest and the MERN stack.

Summary

Getting my project done was a great way to start the week and getting another review done is a good way of getting feedback. Plus starting a new project is always fun so this week was really good overall.
DayJS, An excellent alternative to MomentJS
Tags: devresources, javascript, node, react
Published: 2020-06-24 06:08:51

---
title: DayJS, An excellent alternative to MomentJS
published: true
date: 2020-06-23 19:46:35 UTC
tags: Devresources,Javascript,Nodejs,React
canonical_url: https://codingislove.com/dayjs-vs-momentjs/
---

![DayJS](https://codingislove.com/wp-content/uploads/2020/06/dayjs-vs-momentjs-1024x684.jpg)

[MomentJS](https://momentjs.com/) has been the go-to library for many JS developers for quite some time for date formatting, parsing, and manipulating. It comes with very good features but also comes with some limitations. An excellent alternative to MomentJS is [DayJS](https://day.js.org/), a minimal library at just 2kB!

I’ve used MomentJS in many of my old [react](https://dev.to/codingislove/easy-ci-setup-for-react-app-using-gitlab-in-2-steps-3kk2-temp-slug-6730392) and [angular](https://codingislove.com/angularjs-for-complete-beginners/) projects and I still like it. The size of MomentJS used to be 232 kB, 66 kB gzipped (Old version) which was quite big for any project so I started looking for alternatives.

I’ve used few other libraries like [JS-Joda](https://js-joda.github.io/) as well but I found DayJS to be very convenient with a simple API similar to Moment and just 2kB size

## Let’s compare [DayJS](https://day.js.org/) and [MomentJS](https://momentjs.com/)

### Size

The latest version of MomentJS as of June 2020 has a size of 58kB minified and 18kB gzipped

MomentJS with all locales has a size of 350kB minfied and 72kB gzipped

The size of MomentJS without locales seems to be around 200kB on ES6 imports as mentioned by few users on [MomentJS size issue](https://github.com/moment/moment/issues/3376) on their Github repo.

The Latest version of DayJS as of June 2020 has a size of 7kB minified and 2kB Gzipped.

DayJS with all locales has a size of 167kB Minified and 37kB gzipped

### Performance, DayJS VS MomentJS

I ran 2 basic tests on both the libraries.

1. Parse an ISO date and format it
2. Parse an ISO date and get seconds from it

Here are the results:

#### **1st test :**

`MomentJS took 1.6949999990174547 milliseconds`  
`DayJS took 0.3600000054575503 milliseconds`

#### **2nd test :**

`MomentJS took 0.6649999995715916 milliseconds`  
`DayJS took 0.22000000171829015 milliseconds`

As you can see, DayJS performs 3 to 5 times better!

Considering the size and performance, It is clear that DayJS is an excellent alternative to MomentJS. Go for it!

## Wrapping up

This article is written in no way to degrade MomentJS. They have done some great work and thousands of developers have benefitted from the library. It’s just that DayJS is better at this point in time.

MomentJS has improved a lot recently. We never know MomentJS might improve further and become the best. So watch out!

The post [DayJS, An excellent alternative to MomentJS](https://codingislove.com/dayjs-vs-momentjs/) appeared first on [Coding is Love](https://codingislove.com).
WebdriverIO ERROR Resolved -  no test specified
Tags: webdriverio, testing, testautomation, beginners
Published: 2020-06-23 19:30:57

The errors ‘echo error no test specified && exit 1’ and ‘missing ) after argument list’ sometimes occur when running your WeddriverIO tests with npm run test.

Here are three (3) suggestions to resolve these errors.

{% youtube Xm-q99UPD_0 %}
How to perform migrations in Mongodb
Tags: help, node, mongodb, javascript
Published: 2020-06-23 19:30:41

Hey everyone

I am working on a side project where I am using mongodb nodejs nextjs.

I am performing some schema update and my code is breaking up as the objects created before schema update have not been updated or not have a particular field.
Can somebody provide me the best way to perform dB migrations in mongodb using javascript.
Matt's Tidbits #73 - Deciding which Kotlin scope function to use
Tags: mattstidbits, android, kotlin, tidbittuesday
Published: 2020-06-23 19:19:30

[Last week I shared my experience of migrating from RxJava 2 -> 3.](https://medium.com/@matthew.b.groves/matts-tidbits-72-migrating-from-rxjava-2-3-9d2ed162d4) This time, I have a quick tidbit and some resources on Kotlin scope functions.

Kotlin has a set of handy functions all with slightly different behavior but designed to help make your code easier to read and maintain:
- let
- run
- with
- apply
- also

It can be a little confusing to figure out which of these to use in each situation, but lucky for us, the authors of the Kotlin language have some official recommendations which they have shared on this page:
https://kotlinlang.org/docs/reference/scope-functions.html#function-selection

Additionally, I have found this chart on that page to be especially helpful in figuring out which function to use, as it explains common intended usage scenarios:
![](https://cdn-images-1.medium.com/max/1600/1*OEhj0a7FTeUo49X1ZBuJiA.png)

Furthermore, this helpful chart from Jose Alcérreca (Android Developer Relations @ Google) that was shared by one of my coworkers pairs some of these concepts with code snippets:
https://medium.com/androiddevelopers/kotlin-standard-functions-cheat-sheet-27f032dd4326

Finally, no discussion of these scoping functions would be complete without mentioning this article by Digital Products' own [Anton Spaans](https://medium.com/@streetsofboston):
https://medium.com/the-kotlin-chronicle/lets-also-apply-a-run-with-kotlin-on-our-minds-56f12eaef5e3

I hope you learned some things and feel better equipped to use the Kotlin scoping functions in your own project! Do you have your own ways of remembering which of these functions to apply when? (unintended joke there) - let me know in the comments! And, please follow me on Medium if you're interested in being notified of future tidbits.

*This tidbit was originally delivered on June 19, 2020.*