teleren/devto huggingface dataset:
Web Design Final Project
Tags: webdev
Published: 2020-05-22 19:38:29

## My Final Web Design Project
## Demo Link
 https://mayarao.github.io/finalproject/index.html

## Link to Code
 `{% github https://github.com/mayarao/mayarao.github.io %}`

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I built the skeleton in HTML and used primarily CSS styling/features/animations to build most of the website. One Javascript feature on the `blog` page. I ran into a lot of issues using/working with Javascript, but was ultimately very proud of myself for building the image slider!


## Additional Thoughts / Feelings / Stories
Although I have significant experience with Python and SQL, web design was something new for me. Ultimately, building this travel blog was a very fun and very rewarding experience for me!

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
How to "destructure" props in Vue like you did in React
Tags: beginners, vue, javascript, react
Published: 2020-05-22 19:35:32

Coming from React, I really enjoyed passing down destructured props to child components, I thought it made the components cleaner and easier to read. Recently, I've been working a lot in Vue and thought Id share how to do the same thing we can do in React but in Vue.

### The Skinny


```vue
<my-component v-bind="propsObjectIWantToSendToChild" />
```


### The not so skinny


#### What does v-bind do?

From the docs: 

> Dynamically bind one or more attributes, or a component prop to an expression.

#### What does this mean? 

We know in HTML we can add a class as an attribute

```html
<p class="my-class">Here is a p tag</p>
```

But in Vue we might want to conditionally set the class using some Javascript.

```vue
computed: {
  loadingClass() {
    return isLoading ? 'active' : '';
  }
}

// template
<p v-bind:class="loadingClass">Here is a p tag</p>
```

Or we can use the nice shorthand Vue gives us for v-bind, removing v-bind and just adding `:class`

```vue
<p :class="loadingClass">Here is a p tag</p>
```

### Passing props

Usually, if I want to pass props to a component, we do something similar to the example above.

```vue
<my-component :user-id="userId" :user-name="userName" />
```

But sometimes we need to pass more than 1 or 2 props and it becomes a bit hard to keep track of and bloats the template.

> Insert v-bind

We can take the same component and do something like the following.

```vue
// my_parent_component.vue
computed: {
  myProps() { //please dont use this as a computed function name :)
   return { userName: this.userName, userId: this.userId };
  },
},
// template
<my-component v-bind="myProps" />
```

Then in my component you declare your props like any other component:

```
// my_component.vue
props: {
  userId: {
    required: true,
    type: String,
  },
  userName: {
    required: true,
    type: String,
  },
},
```

Hopefully this helps clean your templates up and you learned something. If you liked the content or have any questions please comment/like below and visit me at https://scottistern.com

**Resources**
- https://vuejs.org/v2/guide/components-props.html
- https://vuejs.org/v2/api/#v-bind
It’s Time Series All the Way Down
Tags: devrel, evangelism, iot, jobs
Published: 2020-06-05 10:49:04

---
title: It’s Time Series All the Way Down
published: true
date: 2020-05-22 19:34:01 UTC
tags: DevRel,Evangelism,IoT,Jobs
canonical_url: https://davidgs.com/2020/its-time-series-all-the-way-down/?utm_source=rss&utm_medium=rss&utm_campaign=its-time-series-all-the-way-down
---

As you are well aware, I’ve been doing IoT for almost 20 years (yeah, not a typo!). And for the last 2.5 years, I’ve been applying that IoT knowledge to Time Series Databases. Also, as you are probably aware, I am no longer at InfluxData, where I’d been doing that. Long story, but I’m not really allowed to talk about it much. One thing I have discovered over the past 2 months, since leaving InfluxData, is that it _appears_ as though I’m the only Developer Relations Professional who actually has expertise in IoT  **and** Time Series Databases. Who knew. 

It turns out that, while there are a number of Time Series Databases on the market, there aren’t actually that many _good_ ones. You can go by the DBEngines rankings:

![DBEngines.com ranking of top 20 Time Sereis Datbases](https://davidgs.com/wp-content/uploads/2020/05/Screen-Shot-2020-05-22-at-9.39.00-AM.png "Screen Shot 2020-05-22 at 9.39.00 AM.png")

But it turns out that you can game those rankings pretty heavily if you make an effort at it. Clearly some are better at gaming that system than others — not that I’m naming names or anything. I wouldn’t base my decisions on what is a _ **good** _ Time Series Database (TSDB) on those ranking though. As always, the answer is “it depends.”

That being said, I figured I should announce that I have now joined a new TSDB Startup as their Head of Developer Relations. That company is [QuestDB.io](https://questdb.io/). and, as you may have gathered from [this](https://davidgs.com/2020/this-stuff-is-fast/), I’m pretty enthusiastic about their database. Yes, it’s got some rough edges, but the performance is stellar, and the rough edges will smooth out nicely in short order. It’s a small company, but that just means that there is room to expand and grow!

I won’t be covering exclusively IoT-related topics for them though. They are well positioned for financial markets, DevOps, etc. as well so, since I’m Head of DevRel, I’ll be covering it all! 

So, stay tuned and let’s see where this goes!
Emmet Part 2 - Advanced
Tags: webdev, tutorial, beginners, html
Published: 2020-05-22 19:32:15

If you haven't read Emmet Part 1 - Basics, check that out first:
{% link https://dev.to/codestackr/emmet-basics-part-1-jjk %}

In this post, we cover the following topics: 
📌 Boilerplates
📌 Climb Up
📌 Grouping
📌 Attributes
📌 Item Numbering
📌 Implicit Tags
📌 CSS Sneak Peek

Part 3 coming soon!

## Boilerplate
You can create a basic HTML boilerplate easily! <--
- !

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>

</body>
</html>
```

## Climb Up
With Emmet we can easily traverse multiple levels. Here we can climb up a level using ^
- div+div>p>span+em^bq
```html
<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
```

## Grouping
We can achieve something similar by using grouping. To group, surround parts of the code with parenthesis. 
- div>(hdr>ul>li*2>a)+ftr>p
```html
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
```

## Attributes
We can also easily add attributes to any tag using square brackets.
- p[title="Hello World"]
```html
<p title="Hello World"></p>
```

## Item Numbering
When multiplying items, an index is tracked. We can use the index by inserting the $ sign.
- h$[title=item$]{Header $}*3
```html
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h1>
<h3 title="item3">Header 3</h1>
```

## Implicit Tags
tags do not always need to be used. In some cases they are implied. Here we create a table with a row and a column without specifying the `tr` or `td`.
- table>.row>.col
```html
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>
```

## CSS Sneak Peek
Emmet can be used for CSS too! Part 3 will be all about fast CSS workflows. 
- pos
- pos:s
- pos:a
- pos:r
- pos:f
```css
position:relative;
position:static;
position:absolute;
position:relative;
position:fixed;
```
---
Part 3 coming very soon! Check out the full video on my YouTube channel.
{% youtube EzGWXTASWWo %}

## **Thanks for reading!**

Say Hello! [Instagram](https://www.instagram.com/codeSTACKr) | [Twitter](https://twitter.com/codeSTACKr) | [YouTube](https://youtube.com/codeSTACKr)
Swift Discussion: Control Flow
Published: 2020-05-22 19:29:05

<h2>What is a conditional?</h2> – It runs multiple checks and runs code based on the results. These statements are part of a more broad concept called control flow.

<h2>What is a logical operator?</h2> – Symbols that combine or modify Boolean logic values true and false.

<h2>Which are the most common logical operators?</h2> – The most common ones are &&(AND), | |(OR), and !(NOT).
A simple golang web server using awesome echo
Tags: go
Published: 2020-05-22 19:21:54

If you are like me and used golang at some point in the past and haven't kept up with the language changes, the most significant change has been the introduction of go modules.

A very good introduction is available [here](https://blog.golang.org/using-go-modules). But the TLDR version is as follows.

In a new directory, create a file `main.go`.
```go
package main

import (
	"net/http"

	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
)

func main() {
	// Echo instance
	e := echo.New()

	// Middleware
	e.Use(middleware.Logger())
	e.Use(middleware.Recover())

	// Routes
	e.GET("/", hello)

	// Start server
	e.Logger.Fatal(e.Start(":1323"))

}

func hello(c echo.Context) error {
	return c.String(http.StatusOK, "hello world")
}
```

Run the following commands inside the directory.
```sh
go mod init example.com/hello
go get github.com/labstack/echo/v4
```

This will create files `go.mod` and `go.sum` which are similar to `package.json` and `package-lock.json` in node/npm world.

At this point you are ready to build. Note the binary built is called `hello` which is what you called the package.
```sh
go build .
./hello
```
My Very First NPM Package: SLAAAYER!
Tags: npm, javascript, node, slayer
Published: 2020-05-22 19:10:04

*Originally published on my [blog](https://medium.com/@gavischneider/my-very-first-npm-package-slaaayer-5d829342c613).*

No, it doesn’t do much, as you probably guessed from the name. But it’s my first NPM package, and it works. A tiny piece of software that has my name on it. That’s good enough for me.

The package is simple: add it to your dependencies, require and name it like so:
```javascript
const slayer = require(‘slaaayer’);
```
The name of the variable doesn’t actually have to be slayer, name it whatever you’d like.

Once you’ve done that, call slayer and pass it a number. The result is “SLAAAYER! 🤘🏻”, where the number you pass the function is the number of “A”s in the word slayer.
```javascript
console.log(slayer(10));
```
will log: SLAAAAAAAAAAYER! 🤘🏻

You can install the package here: https://www.npmjs.com/package/slaaayer

Stay tuned for future NPM packages. I think Cannibal Corpse has a good ring to it…
Sass Control Flow
Tags: sass, beginners, css, stylesheets
Published: 2020-05-04 00:42:30

---
title: Sass Control Flow
published: true
description: Notes and reference on Sass
tags: sass, beginner, css, stylesheets
series: SASS basics
---
#####If Else
Sass gives more control flow than CSS, beginning with the form of `@if` and `@else`. Based on the results of the control flow, the Sass will compile to different CSS based on the conditions.
```sass
@mixin foo($size) {
  font-size: $size;
  @if $size > 20 {
    line-height: $size;
  } @else {
    // @else shown as syntax demo, no need for it here
  }
}

.small {
  @include foo(14px);
}
.large {
  @include foo(24px);
}

// compiles to CSS
.small {
  font-size: 14px;
}
.large {
  font-size: 24px;
  line-height: 24px;
}
```
If you work with any other programming language, this should look  familiar, just note that there are no parentheses around the condition following the @if keyword. 

#####For loops
Sass also provides a `for` loop that can be used for control flow and automate repetitive tasks. Some things to note are that for loops can be either inclusive or exclusive, depending on how it is written. Using `through` is inclusive. Using `to` is exclusive. 

```sass
@for $i from 1 through 5 {
 // inclusive
}

@for $i from 1 to 5 {
 // exclusive
}
```

The syntax of how to create style rules for different font sizes for the various `h` tags based on some simple math is shown below. On the second line of the example below, the `#{$i}` is interpolation, which tacks on the value of `i` after the `h`.
```sass
@for $i from 1 through 5 {
  h#{$i} {
    font-size: 5rem - $i*0.75rem;
  }
}

// compiles to CSS 
h1 {font-size: 4.25rem;}
h2 {font-size: 3.5rem;}
h3 {font-size: 2.75rem;}
h4 {font-size: 2rem;}
h5 {font-size: 1.25rem;}
```
Another good application of a loop might be if a grid system is used, a more DRY method could use a loop to generate the values instead of repeatedly writing the measurement values, and later being able to change the values once and have them reflected everywhere.

#####Each
Another loop which can be used is `@each`, which is used to iterate over lists, which will be covered in the next installment in this series. The syntax is: 
```sass
@each $i in $myList {
  /* your code */ 
}
```
Project
Tags: ropeofhope
Published: 2020-05-22 18:59:21

[Comment]: # (This project is my first website that I have developed using Java, Html, CSS, JavaScript. I have also used mail API and Payment Gateway in the project. I have created the ER-Diagram too by my own and has used MySQL as Database.)

## About Project:
This project is my first website that I have developed using Java, Html, CSS, JavaScript. I have also used mail API and Payment Gateway in the project. I have created the ER-Diagram too by my own and has used MySQL as Database.

## Link to Code https://github.com/MradulSaini/RopeofHope


## How I built it:Initially when I was designing the ER-Diagram I face difficulty in creating the ERD and by practicing, I revealed that by practice you can achieve any task. While developing this project I got better understanding about the Servlets and JSP used in Java. I get to know about how Bootstrap is helpful to make your website responsive and how to use this tool.
Adonis 5 db:seed command. 
Published: 2020-05-22 18:58:41

---
title: Adonis 5 db:seed command. 
published: true
description: 
tags: 
---
I've been messing around with Adonis 5 and even though it's still in preview the framework is just awesome. Found the `db:seed` command in the docs but it doesn't seem to have been shipped yet so I decided to write mine pending when the command is released. I tried to make with work just like it did in version 4. Here's what I came up with: 

{% gist https://gist.github.com/Obapelumi/65e3d67ddc6493489dcdb8e88a02d4ca %}
.bind it's more than just this.
Tags: javascript, beginners
Published: 2020-05-22 18:56:50

You might know about bind, it takes a function and binds the `this` to any object you like. At least that's the common usage. Bind has another hidden super power I didn't know about for years.

``` js
function add(a, b){
  return a + b;
}
// With me so far?

const addToFive = add.bind(null, 5);

addToFive(20); // 25

// Okay let's head back to the article
```

We just, for lack of a better word preloaded one of the arguments of add using the second arg of the bind method, the null just means we bound this to a null object, because null is an object.

The effect is this, we can call a function with a predetermined argument.

Ps
Note I'm still working on the parallel universe series I can't wait to show you.

You don't have to use bind just so you know, you can use a functional technique called currying, see the comments for details.
Smart Customer Analytic Software and Platform
Tags: octograd2020, githubsdp, 2020devgrad
Published: 2020-05-22 18:50:06

## Project Abstract
Nowadays, shops need to develop their new business models by using Artificial Intelligence because Artificial Intelligence can analyze complex information precisely and provide important information to the business. However, the implementation of the AI system is not that easy because the developer must consider the other parts that are not related to the main part of AI processing and analysis such as deployment, data storage, etc. It makes the development of the AI system more difficult to develop. So, the creator has an idea to develop a private cloud platform that developers can focus only on the part of the system of AI analysis and processing. In this project, creators explore and develop the prototype system for learning and make the software solution that is easy to use, efficient and easy to install including to create software stack to create a platform as well as software to help analyze customer profiles intelligently with deep learning technology that execute on the platform above.

## Demo Link
The demo is in the Thai language.
[![](https://img.youtube.com/vi/AH0icAsNtu8/0.jpg)](https://www.youtube.com/watch?v=AH0icAsNtu8)

## Link to Code
Platform installation steps are in this repo.
{% github https://github.com/senior-project-spai/platform %}

And other source codes such as Web Clients, Web APIs, Detection are in another repository in this GitHub organization.

# The stack
Engine: OKD (Openshift Origin) 3.11
CI/CD: Github Actions
Message Queues: Apache Kafka
Object Storage: Minio
Database Engine: Mysql
Monitoring Software: Grafana & Prometheus
Backend: FastAPI
Frontend: ReactJS

Finally, I am now graduated. My journey just begins.

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
is java better than python?
Tags: python, java, codenewbie, discuss
Published: 2020-05-22 18:45:18

This post is comparing both languages in terms of pros and cons.
They are suitable for different needs . And their use is dependent on the type of project.

these are the advantages of java

it is old and well tested
-it has a large community
it is cross platform
it is suitable for Machine learning (ML) programs
-it is suitable for projects that require accurate calcuations. (eg. banking apps, scientific apps)
these are the advantages of python
-learning python is much faster

it requires less code to do something similar
there are a lot of already built methods for you to use
it has a large community
it is suitable for Machine learning (ML) programs
these are the disadvantages of java

it has a learning curve ( it is difficult to learn)
it is somehow proprietory (owned by Oracle and java 9 and above require some license to build enterprise apps)
these are the disadvantages of python

it is not as old as java
versions are usually not backwards compactible. (eg. python 2 syntax is different from python 3 syntax)
has less job opportunities compared to java

What do you think guys?
Tudo o que você precisa saber sobre Deno
Tags: deno, node, typescript, javascript
Published: 2020-05-22 18:05:52

---
title: Tudo o que você precisa saber sobre Deno
published: true
description: "Tudo o que você precisa saber sobre Deno, o novo runtime JavaScript e TypeScript"
tags: deno, node, nodejs, typescript, javascript, java-script
---

{% youtube ILQLPKmfjoM %}

Recentemente foi lançada a versão 1.0 do Deno, um novo runtime de JavaScript e também de TypeScript. Assim como qualquer outra pessoa que trabalha com JavaScript e vive nesse meio, eu não poderia deixar de comentar sobre isso, não é?

Tudo o que você precisa saber sobre Deno, o novo runtime JavaScript e TypeScript.

---

Segue o fio! Se inscreve no canal para não perder nada.

Quer participar do grupo de bate papo exclusivo do Universo da Programação e falar com as pessoas entrevistadas e comigo?

Você pode me apoiar via PicPay e receber acesso ao grupo (será necessário a instalação do app): https://picpay.me/ouniversodaprogramacao

Não perca nenhuma novidade, assine a minha newsletter (http://eepurl.com/dNIYOk).

Se você está querendo entrar na área de programação, confere meu livro aqui: http://bit.ly/universo-da-programacao

---

BrazilJS sobre o Deno: Deno: O que é e o que isso significa para o mundo Node.js https://www.youtube.com/watch?v=8lvOkqj4_W0

Bate papo sobre Nodejs com Glaucia Lemos e Rodrigo Branas: https://www.youtube.com/watch?v=nvryCcYkV_Y

Síndrome de FOMO: https://pt.wikipedia.org/wiki/S%C3%ADndrome_de_FOMO

Nostradamus: https://pt.wikipedia.org/wiki/Nostradamus

Paralisia por análise: https://woliveiras.com.br/posts/pare-de-procurar-conte%C3%BAdo-e-comece-a-praticar-voc%C3%AA-pode-estar-bloqueado-pela-paralisia-por-an%C3%A1lise/
Contribute to an existing GitHub project 👌
Tags: github, opensource
Published: 2020-05-22 18:40:12

Basically, GitHub is a Git repository hosting service. Git is a command-line tool, GitHub provides a Web-based graphical interface. It also provides access control and several collaboration features, such as wikis and basic task management tools for every project.

Let's begin contributing to an existing project.
###Clone###
Firstly, I need to download(clone) that remote repository to our local machine. (Use Git bash to run these all commands) 
<code>git clone (web URL)</code>
eg: git clone https://github.com/SachithMayantha/recipe-app.git

###Directory###
Then we need to go to your local repository folder. Change into the repository directory. 
<code>cd (folder_name)</code>
eg: cd recipe-app

###New Branch###
So, we need to create a new branch in this existing repository. Because we can't contribute to the master branch directly. (Because Repository owner is not me). Let's create a new branch to store our new changes.
<code>git branch (my-branch)</code>

###Checkout###
Then we need to switch to that new branch. Because our all changes store in there.
<code>git checkout (my-branch)</code>

###Let's Code❤😍 ###
This is your chance to show your coding skill. Make changes. You can add, delete or edit any code in that project.

###Add Changes###
Then we want to add our changed files to our remote repository branch.
<code>git add (file_name)</code> - command use to add one specific file
<code>git add .</code>  - command use to add all files

###Commit###
So, take a snapshot of the staging area (anything that's been added).
<code>git commit -m "(can write anything)"</code>

###Push###
Finally, push changes to our branch of GitHub remote repository. 
<code>git push --set-upstream origin (my-branch)</code>

I have to say a special thing about --set-upstream flag. When you push to a remote and you use the --set-upstream flag git sets the branch you are pushing to as the remote-tracking branch of the branch you are pushing. 
![](https://media.tenor.com/images/dc545e5a0f93c9b2bf1d4f0af54ebbff/tenor.gif)
Thank you.! Happy coding.! 😍❤
Final Year Project
Tags: devgrad2020, octograd2020
Published: 2020-05-22 18:23:19

My final year project is Cancer Detection and Analysis using Whole Slide Images. We divided the project into three parts.
Part 1- ROI Extraction:
We extracted Region of Interests from Whole Slide Images using Deep Learning. These ROI were patches of WSI containing the tumor.
Part 2- Cell Extraction:
We trained a MaskRCNN for cell identification and extracted cells from the ROI.
Part3 - Cell classifications
We used multiple classifiers like SVM, ResNet50 e.t.c for the classification of cells into the tumor and non-tumorous cells.

 #devgrad2020 #octograd2020