teleren/devto huggingface dataset:
Getting Started
Tags: php, tutorial
Published: 2020-04-14 17:55:59

### Required programs
First you must download and install the following programs from the internet:
* [XAMPP](https://www.apachefriends.org/download.html) - modules: Apache, PHP, MySQL, phpMyAdmin, Fake Sendmail (only if sending emails)
* [Visual Studio Code](https://code.visualstudio.com/) - PHP extension recommended
* [Chrome](https://www.google.co.uk/chrome) - any browser is fine but Internet Explorer may display styles incorrectly

This tutorial will use examples based on developing using Visual Studio Code on Windows, but most parts will apply to other IDE and OSes.

### Creating project folder <a name="proj-folder"></a>
1. Open Visual Studio Code.
2. Click Open folder... or File > Open folder...
3. Find your XAMPP installation and enter the htdocs folder.
4. Create a new folder called NeatTreats.
5. Click New File in the Explorer tab (left) or File > New File. Save the file as `index.php` which means it is the landing page (links to other pages).

### Opening your site <a name="open-site"></a>
1. Open File Explorer to your XAMPP installation folder.
2. Run xampp-control.exe and start the Apache and MySQL module.
3. Open your browser to URL `localhost/NeatTreats` (if your project folder NeatTreats is in the htdocs folder).
4. Make sure you have an index.php file inside NeatTreats and it will be displayed!
5. When you make changes to the code, refresh the browser using <kbd>F5</kbd> to see what changed.

### Entering SQL commands <a name="sql-commands"></a>
1. Open File Explorer to your XAMPP installation folder.
2. Run xampp-control.exe and start the Apache and MySQL modules.
3. Open your browser to URL localhost/phpmyadmin.
4. Enter commands into the console at the bottom. It is good practice to learn the commands rather than use the GUI tables.
MySQL Language Basics
Tags: sql, tutorial
Published: 2020-04-14 17:53:27

This post will detail the rules of MySQL with code examples for each. In later posts, we will dive into how to use these features with examples. You can also use this post for future reference.

## Table Of Contents
* [Syntax](#syntax)
* [Annotation](#annotation)
* [Keys](#keys)
* [Insert](#insert)
* [Update](#update)
* [Select](#select)
* [Delete](#delete)

## Syntax <a name="syntax"></a>
* Each query should end with a `;` semicolon.
```sql
SELECT * FROM Customer;
```

## Annotation <a name="annotation"></a>
* Comments will be removed before sending the query to the server.
```sql
-- Single line comment
/* Multi line
comments */
```

## Defining Structures <a name="defining-structures"></a>
* Before you can work with data, a structure has to be made.
* This ensures the data is organised and goes in the right place.
* Each database has multiple tables. Each table has multiple rows. Each row has multiple fields.
* Commonly, the first field in a row is a unique ID.
```sql
-- Create a new database.
CREATE DATABASE DatabaseName;

-- Specify which database to create tables in.
USE DatabaseName;

CREATE TABLE TableName (
    TableNameID INT,  -- Unique ID field, as integer.
    FieldName2 VARCHAR(255),  -- Variable length (up to 255) string field.
    FieldName3 FLOAT,  -- Float field.
    FieldName4 DATE,  -- Date field (calendar date).
    FieldName5 TIMESTAMP,  -- Timestamp field.
    FieldName6 CHAR(255),  -- Fixed length (exactly 255) string field.
    FieldName7 BOOL  -- Boolean field.
);
```

## Keys <a name="keys"></a>
* A use of database management software is to improve organisation.
* Primary keys are the unique fields of rows in a table.
* Foreign keys are references to *valid* primary keys in another table.
```sql
CREATE TABLE TableName2 (
    TableName2ID INT,  -- primary key
    TableNameID INT,  -- foreign key for other table 'TableName'
    PRIMARY KEY (TableName2ID),
    FOREIGN KEY (TableName1ID) REFERENCES TableName (TableNameID)
)
```

## Insert <a name="insert"></a>
* Adds a whole new row to a table.
```sql
INSERT INTO TableName
   (TableNameID, FieldName1, FieldName2)
VALUES
   (1, 'hello', 12.5);
```

## Update <a name="update"></a>
* Updates certain fields in one or more rows in a table.
```sql
UPDATE TableName SET FieldName2=0.5 WHERE FieldName1='hello';
```

## Select <a name="select"></a>
* Obtains the value of certain fields of one or more rows in a table.
```sql
-- Selects all fields from all rows.
SELECT * FROM TableName;

-- Selects only FieldName1 from all rows.
SELECT FieldName1 FROM TableName;

-- Selects only FieldName1 from a row with a unique ID of 1.
SELECT FieldName1 FROM TableName WHERE TableNameID = 1;
```

## Delete <a name="delete"></a>
* Removes one or more rows from a table.
```sql
-- Deletes all rows from table.
DELETE FROM TableName;

-- Deletes multiple rows whose FieldName2 is less than 7.5.
DELETE FROM TableName WHERE FieldName2 < 7.5;

-- Deletes only the row with a unique ID of 1.
DELETE FROM TableName WHERE TableNameID = 1;
```
Live tonight: Build a React & Firebase Blog Site
Tags: react, firebase, webdev
Published: 2020-04-14 17:51:58

---
title: Live tonight: Build a React & Firebase Blog Site
published: true
description: Let's hang out while I polish my most popular blog series!
tags: react, firebase, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/cch5j07a9l2atwg4go7s.png
---

It's been several months since I wrote my [Build a React & Firebase Blog Site Series](https://dev.to/ashleemboyer/build-a-react-firebase-blog-site-part-1-4gn0). I've not heard from anyone that the instructions don't work anymore, but I just want to double check! If you want to hang out while I work through each post in the series, I'll be [live streaming on Twitch](https://twitch.tv/ashleemboyer) tonight at 7PM EDT. And no worries if you can't make it at the start, I'll probably be at it for a few hours. Come and go as you please, I just hope you'll say hello! 😊

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).
Lecturer's Apprentice: A Chatbot for Assisting Novice Programmers
Tags: ai, chatbot, struggling, advisory
Published: 2020-04-14 17:41:16

Students often struggle to communicate with their peers or lecturers about some of the issues they face during their time at university, either it be academic or personal. One of these issues is understanding Introductory Programming. Programming requires an understanding of how certain logical flows or algorithm work. Teaching students takes a great deal of time, and at times students who lack confidence prefer not to ask questions in class. This results in students failing to understand the foundations of introductory programming. Some investigations have been conducted on students battling with the initial steps of figuring out the basic programming concepts.For many first year students, adapting to the new university environment is a struggle and can take a considerable amount of time. Sometimes students may not attend their lectures and may generally drop out of university in the middle of their first year. Changes in the environment are not the only challenges students face. Financial aspects play a big role in a students academic life.Some students may miss classes in order to work for funding for their tuition.Other students opt to take out bank loans with high interest rates in order to pay their tuition.The reason for creating a Lecturer-Chatbot is to enable students to get advice based on topics that they may be afraid to ask lecturers or peers. With this tool they will be able to talk to an Artificial Intelligence program that gives them advice on specific issues. This tool will allow students to get advice so that they are able to cope with some of the issues they face and resolve problems in a viable manner as well as mitigate the thoughts of dropping out.Lecturer-Chatbot differs from many other chatbots because it is an Advisory Tool for struggling students compared to other popular chatbots like SIRI (A virtual assistant for apple users), Google Assistant (This is a virtual assistant used by android users), BIXBY (This is Samsung’s virtual assistant for all users who are using Samsung devices) and ALEXA (a virtual assistant developedby amazon). Lecturer-Chatbot is different in that it helps students struggling with academic issues specifically in introductory programming and other personal problems. A student can either choose to solve a problem, be entertained, or follow a more formal approach and ask relevant questions on how to overcome introductory programming learning problems.

Read Full Article at https://ieeexplore.ieee.org/abstract/document/9015857
What are you guys working on?
Tags: discuss, conversation, share, sideprojects
Published: 2020-04-14 17:22:27

---
title: What are you guys working on?
published: true
description: Little post to hype up and show-off your side projects.
tags: #discuss, conversation, share, side-project
---
I spent most of my morning working on my current side project, dnd-graphql. If you're not familiar with Dungeons and Dragons, it's a table-top role-playing game with the goal of creating fun stories with your friends. A couple months ago I found out the the company that maintains the game, makes the core rule-set openly available through the [Open Gaming License Version 1.0a](https://www.wizards.com/default.asp?x=d20/oglfaq/20040123f). So I decided to create an API containing the rule set in the hopes of making the information more accessible to other application developers.
But I'd love to hear what all of you are working on!! It's a shame that there's so many projects that get lost in the day-to-day of the software world. Hopefully we can connect passionate people with great projects.
JS Internals
Published: 2020-04-14 17:15:21

Javascript is weird. Some people love it, others hate it. It has a lot of unique mechanisms which are not present and have no counterparts in other popular languages. Code execution order, for instance, which might be sometimes unintuitive, definitely stands out.

Understanding the browser environment, what it is composed of and how it works will make you more confident in writing JavaScript and well-prepared for potential issues that might happen.

In this piece, I’ll try to shed some light on what is happening under the hood of the Chrome browser. We’ll take a look at:

V8 Javascript Engine — compilation steps, heap and memory management, and call stack.
Browser runtime — concurrency models, event loops, and blocking and non-blocking code.
JavaScript Engine:

    The most popular JavaScript engine is V8 which is written in C++ and used by Chromium-based browsers such as Chrome, Opera, and even Edge.
   Basically, the engine is a program that translates your JavaScript into machine code and executes the result on a computer’s central processing unit (CPU).
Browser Runtime
      So V8 can execute JavaScript according to the standard, synchronously, using a single call stack. But there is not much we can do with it. We need to render the UI. We need to handle user interactions with the UI. Moreover, we need to handle user interactions while making network requests. But how do we achieve concurrency when all our code is synchronous? It’s possible thanks to the browser engine.

The browser engine is responsible for rendering pages with HTML and CSS. In Chrome it’s called Blink. It’s a fork of WebCore which is a layout, rendering, and Document Object Model (DOM) library. Blink is implemented in C++ and exposes Web APIs like DOM elements and events, XMLHttpRequest, fetch, setTimeout, setInterval and so on, which are accessible via JavaScript.
JS OBJECTS
Tags: properties, methods
Published: 2020-04-14 17:02:49




Booleans can be objects (if defined with the new keyword)
Numbers can be objects (if defined with the new keyword)
Strings can be objects (if defined with the new keyword)
Dates are always objects
Math are always objects
Regular expressions are always objects
Arrays are always objects
Functions are always objects
Objects are always objects

OBJECT properties:
Properties are the values associated with a JavaScript object.
A JavaScript object is a collection of unordered properties.
Properties can usually be changed, added, and deleted, but some are read only.
Accessing JS objects:
objectName.property or ObjectName['property']
JS Objects methods:
For example we have
var person = {
 first_Name: "John",
 last_Name : "Doe",
 id : 5566,
 full_name : function() {
 return this.first_Name + " " + this.last_Name;
 }
};
In a function definition, this refers to the "owner" of the function.
In the example above, this is the person object that "owns" the full_Name function.
In other words, this.first_Name means the firstName property of this object.

Accessing Object Methods:
ObjectName followed by . and methodName. In the above example person.full_name().
Object constructors:
function Person(first, last, age, eye) {
 this.first_Name = first;
 this.last_Name = last;
 this.age = age;
 this.eye_Color = eye;
}
//create the person objects
var my_Father = new Person("John", "Doe", 50, "blue");
Object Methods:

-->Object.assign()
      Copies the values of all enumerable own properties from one or more source objects to a target object.
-->Object.create()
       Creates a new object with the specified prototype object and properties.
-->Object.defineProperty()
       Adds the named property described by a given descriptor to an object.
-->Object.defineProperties()
         Adds the named properties described by the given descriptors to an object.
-->Object.entries()
        Returns an array containing all of the [key, value] pairs of a given object's own enumerable string properties.
-->Object.freeze()
          Freezes an object. Other code cannot delete or change its properties. 
-->Object.fromEntries()
          Returns a new object from an iterable of [key, value] pairs. (This is the reverse of Object.entries).
-->Object.is()
        Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).
-->Object.isExtensible()
       Determines if extending of an object is allowed.
-->Object.isFrozen()
      Determines if an object was frozen.
-->Object.isSealed()
         Determines if an object is sealed.
-->Object.keys()
       Returns an array containing the names of all of the given object's own enumerable string properties.
-->Object.preventExtensions()
       Prevents any extensions of an object.
-->Object.seal()
         Prevents other code from deleting properties of an object.s.
Visualize Google Cloud Billing data in Grafana with BigQuery
Tags: devops, grafana, googlecloud, sre
Published: 2020-04-14 16:28:58

---
title: Visualize Google Cloud Billing data in Grafana with BigQuery
published: true
description: 
tags: devops,grafana,googlecloud,sre
---

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

Wouldn't it be nice to have your infrastructure GCP billing along with with your infrastructure monitoring dashboard?

Let's get started!

## Export GCP Billing to BigQuery

Reference: https://cloud.google.com/billing/docs/how-to/export-data-bigquery

### Summarized Steps

* Create a BigQuery *data set*. GCP will save the Billing data here.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/2jrz5xroi6ossgyjhvi6.png" width="300" height="300"/>


* Go to Billing console and configure the *Billing export*.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/tgdt2uxjma0gwnpwzq15.png" width="200"/>

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ot9yr9scbhcn50pzzy9c.png" width="200"/>

## BigQuery

First, let's ensure that the billing data are already exported.

Let's say we want to know how much cost was incurred per service from April 1, 2020. The SQL query would be this.

```sql
SELECT service.description as service, currency, sum(cost) AS cost
FROM `DATASET_NAME.gcp_billing_export_v1_*`
WHERE usage_start_time >= "2020-04-01 00:00:00 UTC"
GROUP BY service, currency
ORDER BY cost DESC
```

Example result

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

## Grafana

Finally, use the example configuration to visualize the query in Grafana.

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

This is the equivalent query.

```sql
SELECT $__timeGroupAlias(usage_start_time, 1d),
  service.description AS metric,
  sum(cost) AS cost
FROM `DATASET_NAME.gcp_billing_export_v1_*`
WHERE $__timeFilter(usage_start_time)
GROUP BY 1, 2
ORDER BY 1, 2
```

* `$__timeGroupAlias` and `$__timeFilter` are Grafana SQL macros.
* The column that is aliased as `metric` will be the labels to be shown and grouped in the graph.

## The End

Any question? Let me know in the comments section!

Thanks for reading!
Promises
Published: 2020-04-14 16:26:13

### What are promises?

Its a special JavaScript object to handle asynchronous operations in an easy way.

The constructor syntax for a promise object is:

```js
  let promise = new Promise(function(resolve, reject) {
    // Perform some asynchronous task here
  });  
```

The function passed to new Promise is called the executor. When new Promise is created, the executor runs automatically.

#### Arguments of Executor:
  
  It contains two callbacks
  1. resolve
  2. reject

  **resolve(value)** — if the job finished successfully, with result value.
  
  **reject(error)** — if an error occurred, error is the error object.
  
  
  The promise object returned by the new Promise constructor has these internal properties:

  * **state** — initially "pending", then changes to either "fulfilled" when resolve is called or "rejected" when reject is         called.
  * **result** — initially undefined, then changes to value when resolve(value) called or error when reject(error) is called.
  
  ![Promise States](https://yatharth1706.github.io/assets/promise1.PNG)
  
### Methods on Promise

1.**then**: for fetching results and errors from promises
Syntax:
```js
      promise.then(
        function(result) { /* handle a successful result */ },
        function(error) { /* handle an error */ }
      );
```

Some Examples:
```js
      let promise = new Promise(function(resolve, reject) {
        setTimeout(() => resolve("done!"), 1000);
      });

      // resolve runs the first function in .then
      promise.then(
        result => alert(result), // shows "done!" after 1 second
        error => alert(error) // doesn't run
      );
```


2.**catch**: for fetching errors from promise

Example:
```js
      let promise = new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error("Whoops!")), 1000);
      });

      // .catch(f) is the same as promise.then(null, f)
      promise.catch(alert);
      
```

3.**finally**: for performing cleanup operations. It will always execute no matter your callback is returning resolve callback or reject callback.

Example:
```js
      new Promise((resolve, reject) => {
        setTimeout(() => resolve("result"), 2000)
      })
      .finally(() => alert("Promise ready"))
      .then(result => alert(result));
      
```

**Link for tutorial video** [Click here](https://youtu.be/_J3QK56lU7A)
Setup python 3 environment on mac with zsh
Tags: python, mac, zsh
Published: 2020-04-14 16:25:13

---
title: Setup python 3 environment on mac with zsh
published: true
description:
canonical_url: https://dev.to/kgoedert/setup-python-3-environment-on-mac-with-zsh
tags: [python, mac, zsh]
---

Trying to setup my development enviroment on a mac, I had some problems, specially integrating my virtual environment information on my shell. On zsh specifically, with [oh my zsh](https://github.com/ohmyzsh/ohmyzsh). The theme am I using is [PowerLevel9k](https://github.com/Powerlevel9k/powerlevel9k)

The steps that worked:

## Installation

- Install [homebrew](https://brew.sh/)

- Install python 3 and pip 3 with brew. Installing python 3 also installs pip3

```
brew install python3
```

- Install [virtualenvwrapper](https://virtualenvwrapper.readthedocs.io/en/latest/)

```
sudo pip3 install virtualenvwrapper
```

> Usually in python projects you do not install packages with sudo, but this way virtualenvwrapper will be installed globally and available to all the projects

## ZSH Configuration

Edit your `~/.zshrc`and:

- Enable virtualenv plugin on .zshrc

```
 plugins=(...virtualenv)
```

- Set python 3 as the default for virtualenvwrapper

```
export VIRTUALENVWRAPPER_PYTHON='/usr/bin/python3'
```

- Load virtualenvwrapper script

```
source /usr/local/bin/virtualenvwrapper.sh
```

- To be able to show the active virtualenv on the prompt add (I just added the virtualenv, the others are the default ones)

```
POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(context dir vcs virtualenv)
```

- Edit your `~/.oh-my-zsh/plugins/virtualenv/virtualenv.plugin.zsh` and comment out the line

```
export VIRTUAL_ENV_DISABLE_PROMPT=1
```

- source your zsh

```
source ~/.zshrc
```
Flawk is in alpha!
Tags: showdev, react, javascript
Published: 2020-04-14 16:11:11

---
title: Flawk is in alpha!
published: true
description: I have been working on a product called Flawk for the past 5 months, and now it's in alpha
tags: showdev, react, javascript
---

I have been trying to build a business and gain financial independence for a couple of years now. It isn't going super well, but I am hoping that Flawk is my first step in the right direction.

I started out building Flawk to help make Meetups, including the ones I run, more engaging, and inclusive by focusing on the interactions between the presenters and audience. After having a few false starts (5 months of false starts) I finally came across a meaningful way to start - remote events. Although I have big plans for Flawk and at its core it should still provide more engaging and inclusive human interactions, I chose to focus on hosting and attending remote events.

You can check out our new home page [Flawk.to](https://alpha.flawk.to) and get a little bit of a better idea of what we are offing. But as we enter alpha I am looking for people who are currently hosting or want to start hosting events to work with me to build an amazing experience. If you are interested you can fill out a request form here: https://alpha.flawk.to/request-access.

I also want to start using Flawk myself as soon as possible! Which is what this post is really about. I want to put on a live event and give a talk about something, probably React related, but I don't know what! So here I am asking you, what do you want to see a presentation on!? Here are some subjects I enjoy talking about:

* Computer Science basics (data structures, algorithms, Big O)
* React (Hooks, building your first app, NextJS)
* RxJS
* Technical Hiring
* Testing and doing TDD with Jest and React Testing Library

If you have something that is not on that list that you would like to hear about, comment below I would like my first [Flawk](https://flawk.to) event to be extremely fun and also useful!

Thanks for listening and leave comments on what you'd like to see me talk about! I will follow up with the link to the event once it is scheduled.

❤️
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-14 16:01:31

day 36/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learning about Scaffold.of(context).snackbar, snackbar, Navigator.of(ctx).pop(true/false), alerdialog,
https://github.com/triyono777/100-days-of-code/blob/master/log.md
JWT, Cookies, Custom Hooks and getServerSideProps
Tags: react, javascript, showdev
Published: 2020-04-14 15:58:47

---
title: JWT, Cookies, Custom Hooks and getServerSideProps
published: true
description: Added authentication to a NextJS app
tags: react, javascript, showdev
---

Hey everyone!

I just released some videos that show you how to add authentication to a next js application! It uses MongoDB, Cookies, JSON web tokens, SWR, React and of course NextJs.

I am definitely not a pro at authentication, I am probably the furthest from it. But I would love any feed back ya'll have on these videos and the code that I am writing! I am always trying to improve. 😀

{% youtube LfITaJNEUtI %}
{% youtube 5Lc34F4R4i8 %}