teleren/devto huggingface dataset:
DEV Survey ✅ — Front-end Data Visualization Tools
Tags: javascript, webdev, discuss
Published: 2021-03-22 21:48:08

*TL;DR: PLease complete [this survey](https://forms.gle/mY89MpSf7HRnHevs5). Thank you! 🙏*

Hey friends 👋 I guess that if you've ever been building a web application in your life, chances are you were using a charting library, a data grid, or any other data visualization tool to present your data in a meaningful and comprehensible way.

The overwhelming success with thousands of views and hundreds of bookmarks under this post in [Cube.js blog](https://dev.to/cubejs) proves my point 🙂
{% link https://dev.to/cubejs/understanding-front-end-data-visualization-tools-ecosystem-in-2021-2nog %}

[Cube.js](https://cube.dev?ref=dataviz-survey) an open-source project that provides developers with an easy way to create an analytical API over their data stored in any database. More importantly, that API can be paired with any front-end frameworks and data visualization libraries.

{% github cube-js/cube.js no-readme %}

[In our Slack](https://slack.cube.dev?ref=dataviz-survey) and in private conversations, the Cube.js team is often asked for a recommendation of a charting library, or a data grid, or any other data visualization tool that works great with Cube.js. 

All of them do, but we decided to create a website with a list of data visualization tools that can be used by developers to choose the best tool for their projects.

**As the first step, we want to understand how you, as developers, approach this choice and which criteria are the most relevant. That’s why we’re kindly asking you to take part in this short survey:**

### [DEV Survey ✅ — Front-end Data Visualization Tools](https://forms.gle/mY89MpSf7HRnHevs5)

Thank you in advance! 😇🙏

Surely, we’ll make the results public in the [Cube.js blog](https://dev.to/cubejs), so feel free to subscribe to it and stay tuned!

Also, after you fill the survey, feel free to drop a few lines in the comments. What are the best data visualization on public websites that you know? What are the best tools to make such data visualizations? Let's discuss!
Packer: Using an image family from another project
Tags: googlecloud, gcp, packer
Published: 2021-03-22 21:45:23

Following on from my previous post: [Packer: Building images on Google Cloud](https://dev.to/mcrmonkey/packer-building-images-on-google-cloud-ape) You should now be able to build compute images on GCP and you may have used this to build a pre-configured image you can effortlessly deploy again and again without having to wait to install software.

You may now want to use that image, or someone else's image from a different project as a starting point for your web or database server.

If you do you, can add the following line to your packer template in the builders section to specify another project to source your image from:

```
source_image_project_id
```

Here's how that may look when used in your packer template:

```json
{
  "builders": [
    {
      "type": "googlecompute",
      "project_id": "my project",
      "zone": "us-central1-a",
      "source_image_family": "base-image-linux",
      "source_image_project_id":, "example-project",
      "ssh_username": "packer",
      "image_name": "packer-{{timestamp}}",
      "image_family": "socks-web"
    }
  ]
}
```

Here the `base-image-linux` may contain our companies standard logging setup and common utilities. From this you could then install your web server or database utilities on top of that common image.

Another example may be to use the public images provided by a regulatory body where you need to add some helper scripts before you deploy it to your project.


:tada:
A quick reference for shadows in CSS
Tags: webdev, css
Published: 2021-03-22 21:38:27

Shadows add physical realism. When used well, they can help create interfaces that _pop_. 🍾

You will reach for different properties depending on what type of element you are targeting, and what it is you want to do.

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgeyrr1wo378ax8txoqz.png" alt="syntax summary" style="display:block;width:100%;max-width:1200px;margin:0 auto;">

The codepen below allows you to play with the `box-shadow` property to understand the effect the different parameters have on the shadow.

{% codepen https://codepen.io/robjoeol/pen/jOVjdeW %}

Below is a summary of what you can do with shadows.

{% codepen https://codepen.io/robjoeol/pen/qBaMQEN %}

---

You can subscribe to [my RSS feed](https://roboleary.net/feed.xml) to get the latest articles I publish.
This post was updated 2 minutes ago: 263900 posts gathered, 0 Days 00 Hours 00 Mins to go!
Tags: showdev, devto, api
Published: 2021-03-22 21:35:04

## Quick Links

 - [About this page and why I created it](#about)
 - [Last 50 articles added](#latest)
 - [Stats](#stats)

<a name="about"/>
## About this page and why I created it! &#10084;

I want to run some analysis on dev.to for some future posts!

So over the next 15 days (at time of writing) I am grabbing every single article ever written on dev.to!

This page serves two purposes, it lets me see how many articles I have downloaded and it lets me experiment with automatically updating a page!

This page should update every 5 minutes automatically!

So bookmark this page and come back in more than 5 minutes, if all goes according to plan there will be a different set of articles listed below and all the stats will have changed!

Below are links to the last 50 articles added to the database, who knows they might offer you some reading inspiration!

At the end of the article are some stats so far, just in case you are interested!

Let's hope that dev.to doesn't rate limit or block me (I am only running 30 queries a minute just to be kind to their resources so fingers crossed it will be fine) so I can grab all the data I need!

Anyway, no need to take this post too seriously, it is purely an experiment! However I will be doing a full write up on how to use the API to update a post automatically and how I grabbed all the data too!

---

<a name="latest"/>
## Last 50 articles added

here are the last 50 articles added to the database, have a quick look and see if any of them interest you!



---

<a name="stats"/>
## Some stats on this experiment!

Just in case you are wondering what sort of things we can analyse (a very limited sample):

 - Number of articles added in the last hour: **0**
 - Number of articles added in total so far: **263900**
 - ID of last post checked (as some posts are 404): **691700**
 - Average number of reactions (hearts, unicorns and bookmakrs) on all stored entries: **19.91**
 - Average number of comments on all stored entries: **2.41**
 - Estimated time remaining to gather all articles: **0 Days 00 Hours 00 Mins**


## Other examples of people using the API

I wanted to show what some other people have built with the API, so below are some posts suggested in the comments that you might want to check out!

{% link https://dev.to/khangnd/dev-stats-a-restful-service-to-display-dev-to-stats-58ln %}
How to use Media Queries in HTML, CSS and JavaScript
Tags: beginners, html, css, javascript
Published: 2021-03-22 21:08:20

This was originally posted at <a href="https://www.lindaojo.com/blog/how-to-use-media-queries-in-html-css-and-java-script/" target="_blank">lindaojo.com</a>

Media queries can be used to check many things, such as:
<ol>
    <li>width and height of the viewport</li>
    <li>width and height of the device</li>
    <li>orientation (is the tablet/phone in landscape or portrait mode?)
    resolution</li>
    <li>Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.</li>
</ol>

Media queries are commonly associated with CSS, but they can be used in HTML and JavaScript as well.

<h3>Media Queries in HTML</h3>

We can use media queries to determine what `<link>` to use in the `<head>` of an HTML file as shown below.

```html
<html>
  <head>
    <link rel="stylesheet" href="all.css" media="all" />
    <!-- Use for screens that have a width of at least 50rem -->
    <link rel="stylesheet" href="small.css" media="(min-width: 50rem)" />
    <!-- Use for screens that have a width of at least 80rem -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 80rem)" />
</html>

```

We can use media queries on the `<style>` element too.

```html
<style media="all and (min-width: 800px)">
  h1 {
    font-size: 2rem;
    color: green;
  }
</style>
```

Media queries can also be placed within the `<picture>` element. How? By specifying them on the `<source>` element which lets us pass multiply image options.

```html
<picture>
  <!-- Use image in landscape mode -->
  <source srcset="alligator.png" media="(orientation: landscape)">
  <!-- Use image in portrait mode -->
  <source srcset="girrafe.png" media="(orientation: portrait)">
</picture>
```

<h3>Media Queries in CSS</h3>

This is the most common environment for writing media queries.

The `@media` rule is used in media queries to apply different styles for different media types/devices.

```css
@media only screen and (min-device-width: 500px) and (max-device-width: 8000px) {
  .container {
    display: hidden;
  }
}
```

<h3>Media Queries in JavaScript</h3>

You can add media queries to your JavaScript by using the  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia"  target="_blank">window.matchMedia()</a> method.

For instance, if we want to change the background color of the `<body>` to `red` when the screen width exceeds 600px, we can do that by first creating a constant using "window.matchMedia()" as shown below.

```js
// Create a media condition that targets viewports at least 768px wide
const mediaQueryCondition = window.matchMedia( '( min-width: 600px )' )
```

```js
if ( mediaQueryCondition.matches ) {
    document.body.style.cssText = `
        background-color: red;
    `
}
```

That's it folks! You can now add media queries anywhere you want in the whole wild world.

See you next week!
SQL Review - How to create an ERD in MySQL
Tags: sql, mysql
Published: 2021-03-22 20:32:14


---
title: SQL Review - How to create an ERD in MySQL
published: true
description: How to create an ERD in MySQL
tags: #sql #mysql
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/if9yo0ajfxnfnbkzeyar.png
---



During my self study of SQL, I've encountered the concept of the ERD or the Entity Relationship Diagram, which seems quite interesting as it can be useful in building your database. It also seems gives you a visual representation of the tables in your database which I assume can also aid in problem solving. 

In order to create an ERD in MySQL, select Database > Reverse Engineer, as demonstrated by the graphic below:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8jlp0nl7fpwyzc7ijba.png"></img>

Then, select the Continue button

<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s21x0wqdv1x4kmxyuq63.png"></img>

MySQL will now ask for your password, which will be the same password you used to create the database initially.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2g6epkduihaart76q7s.png"></img>

Next, you will be asked to select a database to work with. Select a database, then select "Continue".
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39mzyqs5rrcwo1gghmzn.png"></img>

Select "Execute"
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n38x1s0uon0zjneap45u.png"></img>

Tada, there is your ERD. 
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3941j5ikoq7fxl25kb5.png"></img>
Nested comments in Laravel
Tags: laravel
Published: 2021-03-22 20:08:30

Last week I added a nested comments feature to my blog. You can see it at the bottom of [this post](https://www.jeroenvanrensen.nl/blog/uuids-in-laravel), where I received a few comments. In this post, I would like to tell you how I added this feature.

**Note**: This is not a step-by-step tutorial. Rather, I'll explain some things that I think are interesting.

## Migrations

First of all, I added a `parent_id` column in my comments migration.

```php
$table->integer('parent_id')->nullable();
```

If it is null, it is a root comment and else it is nested.

## Leaving comments

Next, I updated my [Livewire](https://www.jeroenvanrensen.nl/blog/laravel-livewire-intro) component to allow for replies, but only on root comments. When someone clicks "reply", a `parent` property at the component will be set to that comment and it shows a little message like "In reply to: Jeroen".

When a user hits "save", a little check is done to see if the comment really belongs to the current post and if it is a root comment, because I only want to allow comments to be nested one level deep.

## Showing comments

When showing comments, all root comments (with an empty `parent_id`) will be listed, and for each comment, all children will be listed as well. These are exactly the same, except the children are a little bit indented at the left and don't have a "reply" button.

## Notifications

When someone replies to a comment, everyone who also replied to that comment will get notified, but participants on other comments won't.

Before this, everyone would get notified. But that's sometimes weird if there are two discussions below one post.

## Conclusion

Thanks for reading! I hope you learned something. At least it was a joy to write.
All should Svelte!
Published: 2021-03-22 20:04:23

React is not reactive!
React is a terrible name for React.js!

Lorem Ipsum is simply **dummy text** of the printing and typesetting industry. Lorem Ipsum has been the industry's standard ~~dummy text~~ ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

--- 

> "React, is a terrible name for React.js" - John Lindquist


By managing state in React, you are actually doing computer's job for it!

> React is NOT reactive!


All should Svelte, because Svelte is/has:
- reactive
    - no bloatware virtual DOM code
- very fast
- very small APP size

---

Code blocks
```
{ 
    if (PRO) {
        console.log('Svelte');
    } else {
        console.log('React');
    }
}
```

    { 
        alert('All Should Svelte!');
    }


---
APP size graph

![Alt Text Example](https://sinisavukmirovic.github.io/Svelte-WHAT-and-HOW-Tutorial/public/img/size.png)

Framework speed graph

![Alt Text Example](https://sinisavukmirovic.github.io/Svelte-WHAT-and-HOW-Tutorial/public/img/speed.png)

---
Video that will go down in history: [Svelte Presentation](https://www.youtube.com/watch?v=AdNJ3fydeao "Must watch!")

[How Simple it is](https://youtu.be/YtD2mWDQnxM?t=294 "Must watch!")

email: <allshouldsvelte@gmail.com>

---

Automatic URL's syntax in MarkDown

[How To Svelte](www.youtube.com/channel/UCoYGF_kcmubmm_3Xk_2PYCg/videos)

www.youtube.com/channel/UCoYGF_kcmubmm_3Xk_2PYCg/videos

`www.youtube.com/channel/UCoYGF_kcmubmm_3Xk_2PYCg/videos `
FEAR & my shining Ruby
Tags: devjournal, writing, ruby
Published: 2021-03-22 20:00:32

For the past 2 weeks, I've been **learning Ruby** with John C. {% twitter 1364742690361999360 %}Due to other commitiments & the time difference, I haven't attended every live session & have been catching up with lessons & execises via the recordings.

Today with Ruby, I've been going through classes. As someone who previously learnt Java & didn't consider myself well-versed in the language. I had a false and negative sense of what I thought about the language, myself and my ability to understand and use things related to the backend.

For a long time, I shyed away from using anything I saw as a backend language. In my case Java. As I saw it as something I didn't get, which wasn't true. In fact, learning Java at uni was the first time I'd ever done any kind of programming, so I shouldn't have been to hard on myself.

To bring it back to my point. As John explained classes, his explanation was so clear that I immediately remembered what I'd learnt & knew about OOP **(object oriented programming)**. 
I'd learnt so much doing Java, which I hadn't recognised or acknowledged. I now felt a sense of achievement & didn't feel as bad as I had done all this time. I actually knew & had learnt stuff. Yeyyy!

Blown out of the water by my new found enjoyment of Ruby, OOP & what I could do. It made me think about my initial negative experience learning Java & why I'd perhaps moved away from certain languages, instead of moving toward them. 
So far, I've enjoyed using Ruby & look forward to revisiting Java again at some point.

What I'm trying to get at, is that sometimes we let our past bad experiences define our perception of how hard or difficult something is without ever trying it agan or revisiting things. We can let the fear of (not being good, appearing stupid, technical etc - insert your word/s here)stop us from achieving.


As Will Smith once said, fear can be **False Events Appearing Real.**
Through my experience with Ruby, it's highlighted to me, I am capable, the back-end might also be an area I quite like and I have nothing to fear. It's all a learning process.

From the tales of a junior dev.
Free APIs for beginners
Tags: api, react, free
Published: 2021-03-22 19:39:11

Hello, this my first article on Dev
When you start learning react or any framework, you would like to use some free APIs instead of creating dummy data or even learning how to integrate with APIs 

let's start with my favorite one ...

1- [Quotes API](https://api.quotable.io/random)
This API allows you to get a random quote every time you make a `get` request or a list of quotes and much more 

response: 
```
{"_id":"EBX5NXqc-R6-","tags":["famous-quotes"],"content":"Six essential qualities that are the key to success: Sincerity, personal integrity, humility, courtesy, wisdom, charity.","author":"William C. Menninger","authorSlug":"william-c-menninger","length":120}
```
you can read more in their [Github](https://github.com/lukePeavey/quotable)


2- [FakeStore API](https://fakestoreapi.herokuapp.com/)

This API is very useful if you want to learn about routing. For Example, your homepage should make a request to get all products `'https://fakestoreapi.com/products` and in your product page you request a single product by Id `'https://fakestoreapi.com/products/1` 

Don't forget to check the [docs](https://github.com/keikaavousi/fake-store-api) 

3- [RandomUser](https://randomuser.me/) 
send a get request to `https://randomuser.me/api/` voila, you got a random user ... now go finish that profile page.

not only that, you can also request a specific nationality by providing a nat query :yay: `https://randomuser.me/api/?nat=us,dk,fr,gb`

[read more](https://randomuser.me/documentation) 

4- [WeatherAPI](https://weatherstack.com/)

this one is free but you need to sign up first... with a limited number of requests (1000 Calls / month)

5- [NewsAPI](https://newsapi.org/)
You need to signup first to get an API key, 
for example 
`https://newsapi.org/v2/everything?q=apple&from=2021-03-23&to=2021-03-23&sortBy=popularity&apiKey=API_KEY`

6-[Todo list](https://jsonplaceholder.typicode.com/)
creating a todo list ? don't bother with dummy data, here is your free api 

7- [MetaWeather](https://www.metaweather.com/api/)

...

I'll keep updating this article when I find any free APIs 
if you have anything in mind, great! let me know in the comments
Why you should take 
Google Career Certificates?
Tags: google, certificate, career
Published: 2021-03-22 19:18:58

Nowadays education is available for everyone in this world and at almost no cost. Anyone curious & willing to learn can learn from any part of the world. As there are so many platforms available where one can learn whichever topic he/she is interested in. Going along with the trend **Google** **The** **Tech** **Giant** has also come in the space.

As we all know that to join Google college degree is not required. Thus following this Google has started his own [**Google** **Career** **Certificates**](https://grow.google/certificates/#?modal_active=none) which might eliminate the college degree stuff.

They have added their courses on the Coursera platform on topics related to coding & management. Till now they are giving Career Certificates on **IT support**, **Data** **Analytics**, **Project Management**, **UX** **Design** & **Android Development**. All these courses are designed and built by subject-matter experts and senior practitioners at Google from each of the job fields.

The best part of these courses is that it doesn't require any prior experience, you can learn whenever you want & after completion of the course, you will be able to stand out from others as it will help you make your resume competitive.
You will gain access to **resume** **builder** **tool**, **coaching** **sessions**, **mock** **interviews** & many other career resources. 

The best part of Google Career Certificates is that it will help you connect with the top employers who are currently hiring. Google has partnered with great companies like **Intel**, **Snapchat**, **Walmart**, **Deloitte**, **Google**, and many more.
You will be able to connect with **130+** **US** employers in the hiring consortium.
And all these companies will hire you based on these Google Career Certificates. Thus these certificates are having some real values.

As there are so many different platforms available which are giving their courses which are costly & the certificate earned from there has almost no value anywhere. Thus instead of giving your money & time anywhere else, I encourage you to take your interested Google Career Certificates as they are cheap, focused & require relevant time to get your foot in the door with top companies.