teleren/devto huggingface dataset:
Cleaner Flutter Vol. 6: Modeling some data
Tags: flutter, dart, clean, architecture
Published: 2021-02-04 17:49:59

---
title: Cleaner Flutter Vol. 6: Modeling some data
published: true
description: Turning entities to models
tags: flutter, dart, clean, architecture
cover_image: https://images.unsplash.com/photo-1451187580459-43490279c0fa
---

> ⚠️ This article was deprecated. ⚠️
>
> Check out the updated full article on my personal [blog](https://marcossevilla.dev/cleaner-flutter-vol-6).

You can find even more and keep in contact with me on my socials:

- [GitHub](https://github.com/marcossevilla)
- [LinkedIn](https://www.linkedin.com/in/marcossevilla)
- [Twitch](https://www.twitch.tv/noscopedevs)
- [Twitter](https://twitter.com/MarcosJSevilla)
- [YouTube](https://www.youtube.com/noscopedevs)
🔴 TechTalk - Multiplayer Games with Node.JS, 
 Socket.IO  and VueJS | TheDestroDevShow

Tags: node, javascript, vue, gamedev
Published: 2021-02-04 17:35:46

Hi everyone! 👋

I have started a LIVE TechTalk show on my channel.

And in the 4th Show, Murat Kemaldar joined as a Guest.

Murat is a 32-year old freelancing developer / creative living in Berlin, who likes to draw, play card games and create data visualizations.

<h3><u>Topic: Multiplayer Games with Node.JS and Socket.IO.</u></h3>

You can Watch on YouTube https://www.youtube.com/watch?v=nMtSZB734mA

{% youtube nMtSZB734mA %}

Enjoy 🌸

Also SUBSCRIBE to YouTube Channel - https://www.youtube.com/c/TheDestroDevShow?sub_confirmation=1

LIKE FB Page - https://www.facebook.com/the.destro.dev.show/

Follow on Twitter - https://twitter.com/destro_mas

Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋

<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
🔥 Building a JS Angular Gauge of Grammys Nominees Streams on Spotify 🎵
Tags: javascript, datascience, webdev, music
Published: 2021-02-04 16:55:25

Wanna know how to make a cool interactive Angular (Circular) Gauge using JavaScript?

Check out this simple [angular gauge tutorial](https://www.anychart.com/blog/2021/02/03/angular-gauge-javascript/) from amazing data designer Shachee Swadia — just published on the AnyChart blog.

In the article, she is visualizing the streaming statistics from Spotify for the 2021 GRAMMYs Record of the Year nominee songs. So you will also find out which of those tracks are the most popular.

![Angular gauge in JavaScript](https://www.anychart.com/blog/wp-content/uploads/2021/02/angular-gauge-js.gif)

All data visualizations built along the tutorial are available with the full code that can be played with on CodePen.
Jeff Bezos Stepping Down, Independent COVID Vaccine Systems, Tech Pricing Models, & more on DevNews!
Tags: news, podcast
Published: 2021-02-04 17:15:03

---
title: Jeff Bezos Stepping Down, Independent COVID Vaccine Systems, Tech Pricing Models, & more on DevNews!
published: true
description: Listen to S3E4 of the DevNews pod!
tags: news, podcast
series: DevNews Season 3
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

### Listen to S3E4 of the DevNews podcast right here on DEV:

{% podcast https://dev.to/devnews/s3-e4-jeff-bezos-stepping-down-independent-covid-vaccine-systems-ford-s-android-integration-and-tech-pricing-models %}

### **Here is a taste of what @saronyitbarek and I talked about this week:**
- Jeff Bezos' announcement that he is transitioning into the role of executive chair of the Amazon board in the 3rd quarter of this year
- Ford's joint deal with Google to use Android OS to power its vehicles' infotainment systems.
- Technology pricing models and what works best for different products

### **We also covered an additional, important topic with the help of a special guest...** 

- **[Cameron Yick](https://twitter.com/hydrosquall)**, Software Engineer at Datadog and co-creator of the NYC Vaccine List: a service trying to help people find and get a COVID-19 vaccine. Cameron spoke with us about why they think the vaccine rollout isn't up-to-par and what it will take to change that — and much more!


_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s3-e4-jeff-bezos-stepping-down-independent-covid-vaccine/id1525581923?i=1000507720294)
- [Spotify](https://open.spotify.com/episode/1SDK7UdHWRRQDiUQws8G8i)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzIw?sa=X&ved=0CAQQkfYCahcKEwiAiP7d3NDuAhUAAAAAHQAAAAAQAw)
- [Stitcher](https://www.stitcher.com/show/devnews)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews-dev-fH8hvsClkWp/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=160580326)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [PocketCasts](https://pca.st/ismxrdnc)
- [Transcript](https://devpods.herokuapp.com/podcasts/devnews/episodes/112)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- Our season three sponsors, [SendBird](https://sendbird.com/) and [Rudderstack](https://rudderstack.com/) ❤️ 

![News](https://media.giphy.com/media/kjCFOUT3ZIlAA/giphy.gif)
The difference between regular views and materialized views in PostgreSQL
Tags: postgres, sql, beginners, codenewbie
Published: 2021-02-04 17:11:04

Materialized views in PostgreSQL differ from the regular ones as they do `physically store the data` in the database.

We’ve already covered [how to create a regular view in PostgreSQL](https://learn.coderslang.com/0008-how-to-create-a-view-in-postgresql/), so let’s talk about the key differences between materialized and regular views. 

## How to create a materialized view

You can create a materialized view in PostgreSQL almost like the regular one.

The only thing that you need to add is the word `MATERIALIZED`

```sql
CREATE MATERIALIZED VIEW view_name AS
```

Follow up with the SELECT query and that’s it.

## Pros and cons materialized views in PostgreSQL

Materialized views do physically store data in the database.

This fact makes the access speed much faster as you don’t have to run the query every time.

On the other hand, you don’t get an instant update of the data and might end up in a situation where you’ve received an outdated set of results.

To refresh a materialized view you can run the following query:

```sql
REFRESH MATERIALIZED VIEW view_name;
```

Such refresh is similar to invalidating the cache and will synchronize the materialized view with the actual DB state.
Auto Text Effect (JAVASCRIPT)
Tags: javascript, 100daysofcode, css, html
Published: 2021-02-04 17:09:22

Today is the day 46 of my challenge #100DaysOfCode 💻

Auto Text Effect Using HTML5, CSS3 & JS 😍🎉

Demo : https://auto-texteffect.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day46
Why do we still speak in direct DNS?
Tags: discuss, webdev, dns
Published: 2021-02-04 16:53:54

I don't know about you, but I have observed so many DNS mishaps in my day, and also have observed that developers and non-devs consistently fail to have a succinct mental model of how to set DNS properly for a website.

There are lots of services that make setting DNS easier than ever, but I'm kind of surprised so many people still have to think directly in terms of CNAMES, APEX DOMAINS, and all the direct domain knowledge of DNS.

Can't we have a higher level abstraction that compiles to DNS with more safety guards? Sure, let me dip into DNS when I need to, but why are DNS settings tables still such a normal thing?

I write Ruby code so I don't have to write C code. I'm sure there are attempts in DNS abstraction, but the fact that I haven't come across them means they are probably still too leaky or just not mainstream.

Thoughts on the matter?
Changelog: Paste images into editor
Tags: meta
Published: 2021-02-04 16:46:50

For a while it's been possible to drag images into the editor and have them automatically upload and insert into the post. Thanks to this pull request from @nickytonline.

{% github https://github.com/forem/forem/pull/10145 %}

Now it's also possible to copy and paste and image straight into a post without needing to save it as a file first. For instance I took this screenshot while writing this post and just pasted it in.

![meta self screenshot](https://dev-to-uploads.s3.amazonaws.com/i/6bi6ykzl8e4p1jfu1xt4.png)

**PR to add paste images:**

{% github https://github.com/forem/forem/pull/10212 %}

A big thank you to @s_aitchison for fixing the issues with my code and getting this out the door
spice up your omnibox with deepl and more!
Tags: tutorial, beginners, html
Published: 2021-02-04 16:39:11



Do you find yourself translating sentences quite often or are you just a fan of [deepl.com](https://www.deepl.com/translator)?
Today we are going to use the custom Search Engine functionality built into most browsers to trigger a translation right from the omnibox!
Translating in Deepl results in the original text being added to the current url, like so:
![Deepl Url](https://dev-to-uploads.s3.amazonaws.com/i/08t9kso7iq24fxez45jw.png)

We can create a new Search Engine in the Chrome Settings, and set it up like so:
![Google Chrome custom Search Engine](https://dev-to-uploads.s3.amazonaws.com/i/99l1g6ywe6ifelcdom4i.png)

Here is the URL String you will have to enter: 
```
http://deepl.com/translator#en/de/%s
```

The %s is a placeholder for any text you would like to add later on.

Now, whenever we type "en-de" in the omnibox and press tab, we can enter the english text that we'd like to have translated by deepl. Pressing enter brings us right to the deepl page with the translation!

![Omnibox Deepl Search](https://dev-to-uploads.s3.amazonaws.com/i/t2bwjsre15tlc4bk8fh5.jpg)

You can also use this as a note-taking shortcut:

<pre>
<code>
data:text/html&#44;	
&lt;html contenteditable&gt;&lt;body&gt;%s&lt;/body&gt;
&lt;style&gt;
	html {
	 	font-family: system-ui; 
	 	background: %23f5f3f0;
	 	padding: 1em;
	}
	body {
	 	margin: 2em auto;
	 	max-width: 40em; 
	 	background: %23fff;
	 	padding: 1em;box-shadow: 5px 5px 0 rgb(0 0 0 / 10%);
	}
&lt;/style&gt;
&lt;script&gt;window.onbeforeunload = function(){  return &#39;Are you sure you want to leave?&#39;;};&lt;/script&gt;
&lt;/html&gt;
</code>
</pre>

![Note Taking omnibox shortcode](https://dev-to-uploads.s3.amazonaws.com/i/qh0i6959ud5p6th8gfft.png)

Now, all you have to do is type "note", press tab and write anything down!

![Test Note](https://dev-to-uploads.s3.amazonaws.com/i/d01znu0vdk03l0z5lck0.png)
STEPS TO GETTING APOLLO/QUERY DATA TO SHOW????
Tags: graphql, react, mongodb, help
Published: 2021-02-04 16:33:31

I have several queries made, I’m trying to show the information in my app. What components need the Apollo tag around them? ALSO, is it just one file that will be the setup to get the data? I know of the query setup layout you do, BUT, it’s not showing data. 

What’s a simple tutorial? 

ALSO.... do I set the client={client} do I set the url to my localhost????
Multiparadigm state manager for React by ~2 kB.
Tags: javascript, react, webdev, realar
Published: 2021-02-04 16:27:31

[Realar](https://github.com/betula/realar) **multiparadigm** state manager for React based on [reactive mathematic](https://github.com/betula/reactive-box).

[Light](https://bundlephobia.com/result?p=realar), [Fast](https://github.com/betula/reactive-box-performance), and Pretty looked :kissing_heart:

Targeted to clean code, modulable architecture, and time of delivery user experience.

Supported **two kinds** of data and logic definitions.

- Plain functional reactive programming with only functions

```javascript
const [getCount, set] = box(0);

const tick = () => set(getCount() + 1);
setInterval(tick, 200);

const App = () => {
  const count = useValue(getCount);
  return (
    <p>{count}</p>
  )
}
```
[Try on CodeSandbox](https://codesandbox.io/s/realar-ticker-functional-6s3mx?file=/src/App.tsx)

- And transparent functional reactive programming with classes, decorators and [jsx wrapper](https://github.com/betula/babel-plugin-realar)

```javascript
class Ticker {
  @prop count = 0
  tick = () => ++this.count;
}

const ticker = new Ticker();
setInterval(ticker.tick, 200);

const App = () => (
  <p>{ticker.count}</p>
)
```
[Try wrapped version on CodeSandbox](https://codesandbox.io/s/realar-ticker-classes-c9819?file=/src/App.tsx)

Realar **targeted to** all scale applications up to complex enterprise solutions on microfrontends architecture.

You can use as many from Realar as you want. For small websites or theme switchers, two functions are enough:ok_hand: Step by step on applications scale stairs you can take more and more. From sharing state to all application parts, to modulable architecture with apps composition.

[I made my choice!](https://github.com/betula/realar#readme)
How to use Scopes in Ruby on Rails
Tags: ruby, rails, tutorial, video
Published: 2021-02-04 19:26:46

---
title: How to use Scopes in Ruby on Rails
published: true
date: 2021-02-04 16:21:08 UTC
tags: ruby, rails, tutorial, video
canonical_url: https://web-crunch.com/posts/how-to-use-scopes-ruby-on-rails
---

{% youtube _LerTMQW76w %}

Scopes are used to assign complex ActiveRecord queries into customized methods using Ruby on Rails.

Inside your models, you can define a scope as a new method that returns a lambda function for calling queries you're probably used to using inside your controllers.

A use case for scopes is often for filtering by status, date, date ranges, ordering, groupings, and more. ActiveRecord already makes it quite easy to return rich data from your database. Combining those superpowers with scopes allow you to define more memorable queries that you and your team can harness through your Ruby on Rails application.

Here's a quick example of setting status on a `Post` class. As an example, let's assume we're creating a basic blog and we want some posts to be drafts while others are published. We can assign a status to each post which signifies this.

### Examples

```ruby
class Post < ApplicationRecord
  scope :published, -> { where(status: "Published") }
end
```

Then in our controller or views, we can return the newly scoped objects.

```ruby
class PostsController < ApplicationController
  def index
      # only returns those Post objects that have a "Published" status
      @posts = Post.published
  end
end
```

More complex queries can be performed in the same manner.

```ruby
class Post < ApplicationRecord
  scope :past_week, -> { where(created_at: Time.zone.now.at_beginning_of_week...Time.zone.now.at_end_of_week) }
end

```

This returns everything that was created for the current week.

### Chaining

Scopes are extremely powerful due to their ability to be chained together. Think of them as chain links. Keep in mind **Scopes should only ever be written to be chained**.

```ruby
class PostsController < ApplicationController
  def index
    # returns all published posts for the current week
    @posts = Post.published.past_week
  end
end
```

### Creating new records

Scopes can also be used while creating/building a record.

```ruby
Post.status.new.published #=> true
```

### Further reading

- [Scoping - Rails API documentation](https://api.rubyonrails.org/classes/ActiveRecord/Scoping/Named/ClassMethods.html#method-i-scope)

#### Looking for more Ruby on Rails content?

Check out my collections dedicated to the framework:

- [Let's Build with Ruby on Rails](https://web-crunch.com/collections/lets-build-with-ruby-on-rails) - I take on several projects and build them in public using Ruby on Rails
- [Ruby on Rails](https://web-crunch.com/collections/ruby-on-rails) - Various tutorials/guides
- [Let's Build for Ruby on Rails Developers](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers) - Watch me build a job marketplace and community for Ruby on Rails developers in public. I'm documenting the entire journey.
WHY DATA IS IMPORTANT IN DATA SCIENCE?
Tags: datascience, machinelearning, python, opensource
Published: 2021-02-04 16:16:14


#[WHY DATA IS IMPORTANT IN DATA SCIENCE?](https://waliamrinal.medium.com/why-data-is-important-in-data-science-29950b92e48f) 


##The most important task for a Data Scientist is to ensure the data has high integrity, optimal quality, well-organized, and data is in optimal form and condition to guarantee accurate, reliable, and statistically satisfying results.


###Once the dataset is cleaned and coherent you can now use it to analyze, visualize, create dashboards, and reports to understand how your business is performing in the real-world.


#Learn "WHY DATA IS IMPORTANT IN DATA SCIENCE?"


###(#datascience #machinelearning #artificialintelligence #deeplearning #data #programming #computervision #resources #tutorials #opensource)


#[WHY DATA IS IMPORTANT IN DATA SCIENCE?](https://waliamrinal.medium.com/why-data-is-important-in-data-science-29950b92e48f)
Axios.defaults.timeout
Tags: axios
Published: 2021-01-26 09:36:20

Axios is an external library used in making promised based HTTP requests. One of the coolest things that comes with it people hardly talk about is the axios timeout functionality.

This article simply explains how to use the axios timeout functionality to optimize/minimize the time it takes to make HTTP requests.

So when you make HTTP requests to a web server there would be sometimes when a response would be delayed for no reason. You may want to avoid this unnecessary delay with axios timeout object. What the axios timeout does is that it would abort a request when it takes longer time. Since the time is measured in milliseconds, whatever seconds set to it is how long the request takes and once it exceeds that times, the request is aborted. The default time is set to 0 which indicates no timeout. This gives you some form of control over making requests.

Here is how you can globally set timeout with axios.

`
import axios from axios;
axios.defaults.timeout === 3000;
`

One important thing to note is that axios timeout is response/request bound and not connection bound. What this means is that if there is no network on the clients side or for some reason the IP address is not found or may be the domain name is not found, axios timeout isn't going to work. But if for instance the server your making a request to is taking too long to load, then axios time out will work.

You can also set axios timeout this way
```
import axios from axios ;

axios
.post(‘url’, {timeout: 3000})
.then((res) => console.log(res))
.catch((err) => console.log(err))
```
In this case if your response takes more than 3 seconds, it goes into the catch block.
[BLOG] - Laravel Sail – Ambiente Docker para quem nunca viu Docker (e para quem já viu também)
Tags: laravel, php, docker
Published: 2021-02-04 16:04:15

O Laravel Sail é uma interface de linha de comando leve (assim como o artisan) e simples de usar. Seu foco é abstrair todo o uso do Docker para que seja mais simples durante o dia a dia.

Com o Sail é possível executar comandos do PHP, Composer, Node, Tinker , Artisan, rodar testes com o Laravel Dusk e até pré-visualizar e-mails com o MailHog.

[Continuar...](https://blog.erikfigueiredo.com.br/laravel-sail-ambiente-docker-para-quem-nunca-viu-docker-e-para-quem-ja-viu-tambem/)
Coding Live Stream: Stripe Integration
Tags: java, javascript
Published: 2021-02-04 15:38:53

Hey folks,
I published my first coding live stream a couple of days ago. 

It's about building a credit pard payment webapp from scratch (with Java, Spring Boot and a bit of Javascript) and was very well received by the audience.

If you think you might enjoy that, then here's the YouTube link: https://youtu.be/BIDNKRluql4 .

{% youtube BIDNKRluql4%}


Enjoy!
Marco
Podcast with Jeremy Glassenberg on API Product Management Best Practices
Tags: api, podcast
Published: 2021-02-04 15:32:35

---
title: "Podcast with Jeremy Glassenberg on API Product Management Best Practices"
published: true
description: "Episode 1 from Moesif’s Podcast Network" 
tags: api, podcast
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1debx8n1c8a06hd3w2u0.png
canonical_url: https://www.moesif.com/blog/podcasts/api-product-management/Podcast-With-Jeremy-Glassenberg-On-API-Product-Management-Best-Practices/
series: Podcast
---

## Providing actionable insights for API product managers and other API professionals

In an expansive discussion with Moesif advisor and expert API Program Manager, Jeremy Glassenberg, we cover many of the most important issues affecting PMs today, including how to achieve 10x results, which are the best tools to enable APIs, and how to avoid the most common mistakes when designing and launching APIs.

[Jeremy Glassenberg](https://www.apistrategist.com/) is an 11+ year veteran in building APIs and monetizing developer platforms. As employee number 20 at Box.com, he was their first PM, started the DevRel team, and grew the dev community to more than 15,000. Since then he’s held product leadership roles at Edmodo, Pinn, Tradeshift, and Deserve. Jeremy also advises and mentors PMs and startups, and is currently the Lead Product Management Lecturer at Product School.

Friend of Moesif, Kunal Punjabi, chatted with Jeremy over two days. The following is a condensed podcast of their discussion.

---

{% soundcloud https://soundcloud.com/moesifhq/api-product-management-a-z %}

---

# [Make Your API Platform Successful with Moesif!](https://www.moesif.com/)

---
How to use ReactJs setState to repeat the list of html (Short Tutorial)
Tags: react, setstate, jsx, reactdeveloper
Published: 2021-02-04 15:16:56

---
title: How to use ReactJs setState to repeat the list of html (Short Tutorial)
published: true
description: ReactJs ul, li html tag repeating through input hit enter.
tags: reactjs, setState,jsx, reactdeveloper
//cover_image: https://direct_url_to_image.jpg
---
####Hi, Namaste.

**After spending hours of time with reactjs I got the code to fix my reactjs issue, It's very shy for me because I used this react way many times but still hesitate to use it the proper way.**

###Here is return code look like 

```
return (
        <div>
          <input type="text" onKeyDown={downHandler}/>
          <ul>
              {list.map(v=> <li key={keyId++}>{v}</li> )}
          </ul>
        </div>
    )

```

and inside function I have used to repeat the html list so it's repeating the ul li tag with the input value.
for the unique key I have used one variable called "keyId" and I put it inside `key` attribute to make it unique.

```
const [list, setList] = useState([]);
    let keyId = 1;
    const downHandler = e=> {
        if(e.key === 'Enter'){
            setList(old=> [...old, e.target.value])
        }
    }

```

That's taking me hours of time to finding it on the internet.
Though it is very shy reactjs made my day messy and founding each issue to build something.

**Below the full code to repeat ul li tag with input value whenever hit 'Enter'**

```
import React, {useState} from 'react'

function February_4() {
    const [list, setList] = useState([]);
    let keyId = 1;
    const downHandler = e=> {
        if(e.key === 'Enter'){
            setList(old=> [...old, e.target.value])
        }
    }
    return (
        <div>
          <input type="text" onKeyDown={downHandler}/>
          <ul>
              {list.map(v=> <li key={keyId++}>{v}</li> )}
          </ul>
        </div>
    )
}

export default February_4


```

To get more content like this and to be shy with reactjs dummy issue stay with me.
Thanks.