teleren/devto huggingface dataset:
HTML 5 Grid-Template-Areas
Tags: html, css
Published: 2019-12-11 19:28:06

Consider this CSS:

![areas](https://thepracticaldev.s3.amazonaws.com/i/qemg3qf5i3ekmc8m9yj6.PNG)

It's the primary layout for a web site section. We want each page to have a Header, Footer, Aside and Main section.

**Assigning Areas to HTML Components**

CSS is used to create classes that assign the area(s) to specific HTML elements, either by class name or tag name as in the case of the aside shown here:

![css](https://thepracticaldev.s3.amazonaws.com/i/2rt3aw1031dk0rtcab91.PNG)

**The Matching HTML**

Each Div element is a container for one or more HTML elements. Each div element is placed strategically in the grid based on the class name or tag name.
 
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/11nxhz5nr3kn6jsws42u.PNG)

**The Result**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mk2bwo4diogiou0fu6p3.PNG)

**Grid-Template-Columns and Rows?**

The grid-template-areas markup takes precedence over the following markup.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u9t2he7mf50y2fy57ewc.PNG)

Notice that the 15em shown above limits the width of the aside column. If we change it to 10em, we get this effect. Subtle but effective. 


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wxcerdjwleq144nc9jpc.PNG)

**Responsive?**

Yes, out of the box ready for any size browser.

JWP2019
Charming the Python: Modules
Tags: python, beginners
Published: 2019-12-11 19:22:16

*If coding tutorials with math examples are the bane of your existence, keep reading. This series uses relatable examples like dogs and cats.*

---
## Modules

Modules are chunks of code, saved in a file, that are made to help you do things easier. A module could be a file containing a single variable, or function, a massive codebase.

A module is a python script, saved as filename.py
### Creating
Here's an example of something you may want to use later. 
```python
# fullname.py
def generate_full_name(firstname, lastname):
      space = ' '
      fullname = firstname + space + lastname
      return fullname
```
### Importing a Module
In order to use a module that you've created, you'll need to `import` it in a different file. Once imported, it can be used anywhere in your new file.

The syntax for using an imported module is `modulename.funtion_name(parameters)`
```python
import fullname

print(fullname.generate_full_name('Vicki', 'Langer'))
```

### Importing Functions from a Module
You can use multiple functions from a module, by importing each one.

To do this, you'll follow the below syntax. Each script may have many functions. If you don't want to import allllllll of them, this is a great option.
```python
from modulename import feed_pet, generate_full_name
```

### Built-In Modules
There are modules that are already included with Python. Here are some common ones.

#### math
```python
import math
print(math.pi)

>>> 3.141592653589793
```

#### random
random gives pseudo-random outputs
```python
from random import random, randint
print(random())   # returns something bewtween 0 and 0.9999
print(randint(3, 72)) # returns a number between two arguments
```

---
Series based on {% post https://dev.to/asabeneh/30daysofpyton-challenge-43ii %}
Let's build Flawk.to - Week 9
Tags: javascript, react, showdev
Published: 2019-12-11 19:21:35

Continuing on the busy weeks! My new baby son is still in the hospital and I just got back from a business trip. There is a lot of really exciting things happening and my attention to Flawk.to has been reduced. This day however I am dedicated to having a stream!

Tonight at [9PM EST](https://in-my-tz.now.sh/t/32312c416d65726963612f546f726f6e746f) we will be connecting the frontend from for creating events to the backend which will actually create the events! Here is what the screen currently looks like:

![Partial screenshot of creating an event](https://thepracticaldev.s3.amazonaws.com/i/lw4r391i5gcbfjrpqott.png)

As with everything else [Flawk.to](https://flawk.to) I will be using NextJS, NodeJS and React!

Stream starts tonight at [9PM EST](https://in-my-tz.now.sh/t/32312c416d65726963612f546f726f6e746f) (click the link to see the time in your timezone) on [twitch](https://twitch.tv/ericadamski). [Follow me on twitter](https://twitter.com/zealigan) to stay up to date with Flawk.to's progress!

---

We have a [public roadmap](https://flawk.to/roadmap)! You can vote for features you want to see and submit your own feature requests!
Changelog: Hidden Comments
Tags: meta, changelog
Published: 2019-12-11 18:56:01

About a month ago, we released [blocking tools for user safety](https://dev.to/devteam/changelog-block-tools-for-user-safety-4no3). That functionality was part of an ongoing priority to provide community members with the tools they need to deal with a variety of situations. **Today, we're rolling out the ability for authors to hide specific comments on their posts.**

When hiding a comment, the comment as well as any children comments will be removed from view in the article's comments section. A hidden comment (and any of its children replies) has not been deleted — it will still be visible in the comment's permalink. Once a comment has been hidden, there will be a visible notice at the bottom of the post.

That notice looks like this:

![Example of notification: "Some comments have been hidden on this post" and a link to the FAQ section](https://thepracticaldev.s3.amazonaws.com/i/ffnbdobk2xpxq14pb472.png)

To hide a comment, authors can click the dropdown of any comment in your post to hide it:

![Example of hide comment button](https://thepracticaldev.s3.amazonaws.com/i/fil60tdon747cfah9eas.png)

Given the above example, Clouds' reply comment and all replies will be hidden from the comments section.

We want to give authors the agency to manage the discussions happening on their own posts.  After all, it is _their_ post, and our community members shouldn't feel concerned that an incendiary comment may tarnish or derail their contributions. We hope this feature will help avoid situations where a comment thread becomes too heated, and will help allow authors to simply hide comments about typos or minor inaccuracies that have been fixed. This tool supplements the regular and consistent efforts of our community moderators, and of course its use is also governed by our Code of Conduct and Terms of Service.

As always, we're open to suggestions on how to improve this feature.  If you have a feature request or suggestion that will help us improve community safety, please feel free to [open an issue](https://github.com/thepracticaldev/dev.to/issues).

Happy coding. ❤️
Some basic differences between maths and statistics name conventions.
Tags: statistics, dataset, nameconvention, datamatrices
Published: 2019-12-11 18:54:28

I write this note because I was confused with the names used for different concepts in maths vs statistics and maybe someone else too is. It's gonna at least serve me as a small reminder.

Say we have a multidimensional dataset, the data points have particular coordinates (that's what is taught in linear algebra) that in statistics are called '[variables](https://www.khanacademy.org/math/ap-statistics/analyzing-categorical-ap/analyzing-one-categorical-variable/v/identifying-individuals-variables-and-categorical-variables-in-a-data-set)', and the data points themselves in n-dimensional space (with n 'variables' or 'features' as their dimensions) are called 'individuals', 'cases' or sometimes 'observations'. 

`Variables` (or `features`) can be categorical, discrete or continuous. 

`Data points` or `individuals` sometimes don't have identities (names, identifiers) and in order for a data person to clean the data (order it, look for missing or funny values, handle them in a sensible way) and start performing some statistical testing on a data set (graph the data, look at averages, standard deviations etc.), then there may be need to get them back in some kind of order after operating on them, so they need to be 'tagged'.
Add Dynamic Side Menu in Ionic 4 App with Active Class
Tags: ionic, dynamicsidemenu, ionic4app, ionic4appwithactiveclass
Published: 2020-02-07 09:28:13

---
title: Add Dynamic Side Menu in Ionic 4 App with Active Class
published: true
date: 2019-12-11 18:51:18 UTC
tags: Ionic,Dynamic Side Menu, Ionic 4 App, Ionic 4 App with Active Class
canonical_url: https://www.positronx.io/add-dynamic-side-menu-in-ionic-with-active-class/
---

The post [Add Dynamic Side Menu in Ionic 4 App with Active Class](https://www.positronx.io/add-dynamic-side-menu-in-ionic-with-active-class/) appeared first on [positronX.io](https://www.positronx.io).

**A comprehensive Ionic 4 step by step tutorial, Learn how to implement side menu dynamically in Ionic 4 app with active class for selected page.**

As we know, Ionic offers tons of UI components to create a Hybrid mobile application in lesser time. Most often, we fall into the situation where we need to use side menu navigation components to enhance the user experience.

The side menu looks intuitive and attractive and Implementing the side menu in Ionic 4 is very easy. It is even considered best from the user experience’s perspective.

[click here to read more](https://www.positronx.io/add-dynamic-side-menu-in-ionic-with-active-class/)
Reading one specific message from a Kafka topic
Tags: kafka, topic, offset, consumer
Published: 2019-12-11 18:26:11

---
title: Reading one specific message from a Kafka topic
published: true
description: 
tags: kafka, topic, offset, consumer
---

This utility class can be used to read one specific message from a Kafka topic, given its partition number and offset.


```java
import org.apache.kafka.clients.consumer.ConsumerRecords;
import org.apache.kafka.clients.consumer.KafkaConsumer;
import org.apache.kafka.common.TopicPartition;

import java.time.Duration;
import java.util.Collections;
import java.util.Properties;

public class KafkaPicker implements AutoCloseable {

    private static final Duration POLL_TIMEOUT = Duration.ofSeconds(1);

    private String topicName;
    private KafkaConsumer<Object, Object> consumer;

    public KafkaPicker(String topicName, Properties properties) {
        this.topicName = topicName;
        consumer = new KafkaConsumer<>(properties);
    }

    public Object pick(Long offset, Integer partition) {
        TopicPartition topicPartition = new TopicPartition(topicName, partition);
        consumer.assign(Collections.singletonList(topicPartition));
        consumer.seek(topicPartition, offset);

        ConsumerRecords<Object, Object> records = consumer.poll(POLL_TIMEOUT);
        return records.iterator().next().value();
    }

    public void close() {
        consumer.close();
    }

}

```

In the example below, you will need a `Properties` object to connect to Kafka with at least three mandatory properties: `broker. bootstrap.servers`, `key.deserializer` and `value.deserializer`.

I  this example, the `spring.json.trusted.packages` property is used by the Spring JsonDeserializer.

As we will be picking specific messages and not be reading in batch, it is recommended do set `max.poll.records` to 1, so unnecessary messages will not be read.


```java
    Properties properties = new Properties();
    properties.put("bootstrap.servers", "kafka:9092");
    properties.put("key.deserializer", "org.apache.kafka.common.serialization.StringDeserializer");
    properties.put("value.deserializer", "org.springframework.kafka.support.serializer.JsonDeserializer");
    properties.put("spring.json.trusted.packages", "*");
    properties.put("max.poll.records", "1");

    try (KafkaPicker kafkaPicker = new KafkaPicker("mytopic", properties)) {
        System.out.println("msg = " + kafkaPicker.pick(4L, 0));
        System.out.println("msg = " + kafkaPicker.pick(0L, 0));
    }
```
Back to drawing
Published: 2019-12-11 17:58:10

---
title: Back to drawing
published: true
description: 
tags: 
---

I think I wrote a comment here explaining how drawing helped me be a better programmer. And it has the additional benefits of being a hobby outside coding. While you can be creative as a programmer, those moments can be rare and most of the time, you're just redoing the same thing every day.

I left drawing when I decided to learn to program full time. I was going through university and I couldn't handle the lectures, learning to code and drawing at the same time (gotta rest). I don't regret my decision as I'm now working full time as a programmer in a country where finding a good job is a rarity.

Why I'm going back? Programming can be a very taxing activity mentally. Often, at the end of the days, I don't have any energy to spend on my own personal projects. And I don't really like spending my evening in front of the TV. I do sometimes read, but it requires the same amount of concentration (I read high fantasy stuff like The Malayan Book of the Fallen). So I chose to draw because, while it requires some level of concentration, it's more about eye-hand coordination than abstract thinking. And that fits perfectly my needs of low-key activity to do in my free time (And I think it's a good thing to have another marketable skill).

And what about you? Any activities you like to do to get away from the programming world? Please share in the comments.
FrontEnd Workflow help
Tags: help, webpack
Published: 2019-12-11 17:47:36

Hello,

I'm building my own boilerplate using webpack.
I would like to know how to structure a project with html components, for example I want to build a page, where Header and footer are different components.

For that I want to create a folder called Components inside that I'll have another folder called Header and another called Footer, inside each folder I'll have 3 files, header.html, header.js and header.scss.

On my root I have and Index.html, how can I, using webpack, load this 2 components inside index.html, without copying paste the html?

Everything I searched on web about that says that I have to use javascript to create my html and with a webpack plugin importing inside index.html.
Apache JMeter with Streamlit for Machine Learning
Tags: machinelearning, jmeter, streamlit, python
Published: 2019-12-11 17:32:54

I recently stumbled upon an open source project called Streamlit. Streamlit is a framework where you can build custom Machine Learning tools by focussing on data science rather than the user interface. You can spin up your app with the intuitive user interface and leverage Python modules at ease. In this blog post, I am going to present everything in detail about how I leveraged Streamlit for Apache JMeter and what are all the benefits, future plan, and more.

# What is Streamlit?

Streamlit is an open-source Python library that makes it easy to build beautiful apps for machine learning.

# What is Apache JMeter?

JMeter is an open source load testing tool and widely popular among developers and performance testers.

# Apache JMeter with Streamlit for Machine Learning

By integrating Streamlit with Apache JMeter, you can build machine learning models to train to detect anomalies from your JMeter test results. 

Please note that this project is just a beginning where you can execute and visualize the test results in interactive charts.

I am currently working on designing the machine learning model for performance testing metrics.

# Prerequisites

* Apache JMeter
* Your favorite IDE (I ❤ VS Code), you could try PyCharm as well
* Anaconda
* Python 2.7.0 or later / Python 3.6.x or later
* PIP
* Streamlit 

Set the environment variable `JMETER_HOME` to apache-jmeter folder.

# Clone the repository

{% github QAInsights/Streamlit-JMeter %}

Run the `app.py` by `streamlit run .\app.py`

This will open a new tab or launch the default browser with the URL http://localhost:8501

After successful launch, you could see the options to Execute and Analyze the JMeter test plan.

Please read my detailed [blog post](https://qainsights.com/apache-jmeter-with-streamlit-for-machine-learning/) to explore further.
How to configure the Eventbrite API
Tags: api, oauth, authentication
Published: 2019-12-11 17:29:05

This guide explains how to configure the Eventbrite API, using OAuth, to use that API in your application.

## Overview

1. Sign in to the Eventbrite developers platform (*step 1*)
1. Access the apps dashboard (*steps 2 to 3*)
1. Create a new application and grab credentials (*steps 4 to 6*)

## Step by step

**Step 1.** [Sign in to the Eventbrite Developers Platform](https://www.eventbrite.com/platform). This is where Eventbrite helps developers integrate with the service.

![eventbrite-home](https://blog.bearer.sh/content/images/2019/12/eventbrite-home.png)

**Step 2.** Hover over your profile and click on "Account settings" to [access your profile](https://www.eventbrite.com/account-settings/apps).

![eventbrite-home-menu](https://blog.bearer.sh/content/images/2019/12/eventbrite-home-menu.png)

**Step 3.** In the sidebar of your profile, scroll to the "Developer Links" sections and click on "API Keys". This is where you will manage your different credentials to authenticate with the Eventbrite API. 

**Step 4.** Click on "Create API Key" to create a new OAuth2.0 application.

![eventbrite-apps-new](https://blog.bearer.sh/content/images/2019/12/eventbrite-apps-new.png)

**Step 5.** Provide the details asked to save the OAuth consent screen, including:

* Contact details
* Application name and website
* Register the URL you will use to receive the callback once the user logs into Eventbrite.

![eventbrite-apps-form](https://blog.bearer.sh/content/images/2019/12/eventbrite-apps-form.png)

> 💡This information can change at any time.

**Step 6.** Save the form and that's it! Eventbrite will immediately create credentials. If you need to access them again, you can head back anytime to your [apps dashboard](https://www.eventbrite.com/account-settings/apps).

![eventbrite-apps-keys](https://blog.bearer.sh/content/images/2019/12/eventbrite-apps-keys.png)

## Video Overview

As always, follow the same instructions to configure your Eventbrite API integration in this video:

{% youtube iy0LufxPwwA %}

## What's next?

You're now ready to integrate natively with the Eventbrite API. To start building your integration, here are a few links:

* Learn more about the API in the [official documentation](https://www.eventbrite.com/platform/api)
* Automatically monitor your integration with a monitoring tool, like [Bearer](https://www.bearer.sh)
Does being an introvert influence the chance of getting hired at a job interview? 
Tags: discuss, career
Published: 2019-12-11 17:28:43

As the title say, if someone is an introvert, how does that influence their chances of getting hired at a job interview?

Do the interviewers consider or a good or bad trait? Or they don't really care about it?

Since there are a lot of stages of being introvert, let's take myself as an example.

I am an introvert myself, but I don't feel nervous around crowds at all, and it never causes any problem to talk to strangers at all if they initiate a conversation, but if not necessary, I don't start talking by myself.

So let's say I'm at a job interview, and obviously questions will be asked, I can easily answer them(as long as I actually know what to say at all), although it wouldn't be hard for them to realize I'm an introvert, since I would definitely not force a conversation.

Although if the topic is something I'm interested in, I can talk a lot.

So being this kind of introvert, would it influence my chances in any way?
Day 8 – Var vs Let vs Const -Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-11 17:20:44

__Today we’re going to learn about `var` vs `let` vs `const`__

Before __ES6__ VAR was the King. We used `var` in everywhere we wants to declare a variable

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/dqdd7xv2d64yh5l3kyp5.png)

`var variables` can be __re-declared__ and __updated__

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/fudm5babgkmr22yylvt4.png)

Now we divide var with two different types one `CONST` & other `LET`

`CONST` is declared for those value which __will not changed__ anytime! Or will __not be updated__ at any point. `const` __cannot__ be updated or re-declared, this will lead you to an error you if try

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/nnwj6gkp44sp6f6lz5mb.png)

We use `LET` when their is a __change__ of updating the variable

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o0e4redcn0tlrz65blqe.png)

`LET` can be __updated__ but __not re-declared__. This will give a error you can’t run code

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jj3t7nverumaxu71gs09.png)

__So in es6 we use `LET` & `CONST` not `Var`!__

Do you knew this before ?

You can see the graphical version here
{% instagram B58JXJ2gThE %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day8-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


You can read the old posts from here --

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}
Understanding MySQL Index Basics
Tags: database, mysql, sql, developer
Published: 2019-12-11 17:12:52

---
title: Understanding MySQL Index Basics
published: true
description: Understanding MySQL Index Basics
tags: database, mysql, sql, developer
---

An index is an on-disk or in-memory structure associated with a table or view that speeds retrieval of rows from the table or view. An index contains keys built from one or more columns in the table or view. For on-disk indexes, these keys are stored in a structure (B-tree) that enabled the SQL server to find the row or rows associated with the key values quickly and efficiently.

An index stores data logically organized as a table with rows on columns, and physically stored in a row-wise data format called row-store, or stored in a column-wise data format called column-store.

The selection of the right indexes for a database and its workload is a complex balancing act between query speed and update cost. Narrow indexes, or indexes with few columns in the index key, require less disk space and maintenance overhead. Wide indexes, on the other hand, cover more queries. You may have to experiment with several different designs before finding the most efficient index. Indexes can be added, modified and dropped without affecting the database schema or application design. Therefore, you should not hesitate to experiment with different indexes.

_row-store has been the traditional way to store relational table data._

**Without an index, MySQL must begin with the first row and then read through the entire table to find the relevant rows.**

The larger the table, the more these costs. If the table has an index for the columns in question, MySQL can quickly determine the position to seek to in the middle of the data file without having to look at all the data. This is much faster than reading every row sequentially.

##### Here is a sample command to add an index to the existing table

```sql
CREATE INDEX user_name_index ON user (name);
```

**if using b-tree,**

```sql
CREATE INDEX user_name_index ON user (name) USING BTREE;
```
This blog was originally published on my personal blog [Viral Patel](https://viralpatel.blog)