teleren/devto huggingface dataset:
Becoming Cyborg
Tags: octograd2020
Published: 2020-05-20 04:39:13

While this probably isn't your traditional accomplishment post, one of my favorite tech moments this year was becoming a cyborg! I hope that this is a good break from reading through every file of people's Github repositories!

At the beginning of the year, I had a microchip with both RFID and NFC implanted into my hand. If you don't know about what those terms mean, they are Radio Frequency technologies. They usually encode data for authentication, or just for general purposes. You use this technology when tap your phone to pay for things, or (used to) tap your ID to get into school buildings.

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

So, what can I do with it? I can tap into school buildings if I am authorized to do so, pay for things, tap onto the Bus, make myself an amiibo, etc.; all with my hand! The biggest thing I've been using it for, though, is to send people to my website. (www.jerseyfonseca.com might as well plug here) It's a really fun conversation starter, and, well, it gets people to my website; win win!
Python...in the browser!? 🤯 : A Web Monetization x Web Assembly Experiment
Tags: gftwhackathon, python, webassembly, datascience
Published: 2020-05-20 04:38:34

## What I built

I built a demo hub where users can experiment with data science by graphing data sets in the browser then downloading them. Web Monetized browsers won't see the Ads on the page and can also experiment with additional graphing tools. 

>Note: This project is in the demo phase. In the future, I’d like to build out the graphing tools to handle more sophisticated data sets. As well as add a login/dashboard feature. 🙂 

## Why I built it

While researching what to build for [the Grant For the Web Hackathon](https://dev.to/devteam/announcing-the-grant-for-the-web-hackathon-on-dev-3kd1) I initially thought of creating something with a JavaScript framework since I'd be interacting with the browser API. However, my journey here on Dev.to is to learn more about Python and what we can do with it. So I thought about how I could incorporate Web Monetization with Python. After some digging, I found this cool project created by Mozilla called [Pyodide](https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser/)!  

> "Pyodide is an experimental project from Mozilla to create a full Python data science stack that runs entirely in the browser."
~ Michael Droettboom

Some of you may be thinking what's wrong with just using JavaScript? JavaScript is great but can you imagine a world where you can use mature data science libraries in the browser to quickly create data science tools and machine learning models? Not to mention being able to share those resources over the web? AND being able to make some money in the process?! 🤯🙌🏾


Pyodide is currently in its infancy and there are caveats and performance drawbacks but I'm excited to see where it goes!     

------ 

### Submission Category:
Creative Catalyst
Exciting Experiments


## Demo
 {% youtube _ev0WmOmq-c %}

## Link to Code
{% github ari-hacks/the-hub %}

## How I built it 

### Stack 
- [Web Monetization Api - Exclusive Content](https://webmonetization.org/docs/exclusive-content)
- [Web Monetization Api - Removing Ads](https://webmonetization.org/docs/remove-ads)
- [Pyodide](https://github.com/iodide-project/pyodide)
- Python | JavaScript | HTML | CSS


------

## Additional Resources/Info 
- [Mozilla](https://hacks.mozilla.org/2019/04/pyodide-bringing-the-scientific-python-stack-to-the-browser/)
- [Test Web Monetization](https://testwebmonetization.com/)
- [Webassembly.org](https://webassembly.org/)
- [UI Template](https://www.tooplate.com/view/2108-dashboard)
- Data Sets for Testing
  - [Google Trends](https://trends.google.com/trends/?geo=US)
  - [USGS](https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php)
  - [Plotly example data](https://plotly.com/)
- More on Pyodide
{% podcast https://dev.to/talkpython/212-python-in-web-assembly-with-pyodide %}
[PHP-WCMS]
Tags: 2020devgrad, octograd2020, showdev
Published: 2020-05-20 04:34:42

---
title: [PHP-WCMS]
published: true
description: I will graduate from [Herzing College], and this was my project.
tags: 2020devgrad, octograd2020, showdev
---

[Comment]: # (

PHP-WCMS is a user-friendly website Content Management System.

With PHP-WCMS you can easily build dynamic websites within a matter of minutes with just the click of your mouse! Maintain your web content, navigation, and even limit what groups or specific users can access, from anywhere in the world with just a web browser!)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My Project


## https://5203376.herzingmontreal.ca/php-wcms/
 

## How I built it (With an emphasis on security and functionality, PHP-WCMS is a professional and robust system suitable for any business or organization website. Built on the PHP programming language and the MySQL database, PHP-WCMS delivers superb performance on any size website.)


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Creating an virtual environment in python
Tags: python
Published: 2020-05-20 04:32:44

# How to install virtualenv:

### Install **pip** first

    sudo apt-get install python3-pip

### Then install **virtualenv** using pip3

    sudo pip3 install virtualenv 

### Now create a virtual environment 

    virtualenv venv 

>you can use any name insted of **venv**

### You can also use a Python interpreter of your choice

    virtualenv -p /usr/bin/python2.7 venv
  
### Active your virtual environment:    
    
    source venv/bin/activate
    
### Using fish shell:    
    
    source venv/bin/activate.fish

### To deactivate:

    deactivate

### Create virtualenv using Python3
    virtualenv -p python3 myenv

### Instead of using virtualenv you can use this command in Python3
    python3 -m venv myenv
Box CLI Maker
Tags: devgrad2020, githubsdp, octograd2020, go
Published: 2020-05-20 04:32:32

## Box CLI Maker

Make Highly Customized Boxes for your CLI 

## Features

- Make terminal box in 8️⃣ inbuilt different style
- Custom Title Positions
- Make your own Box style 📦
- Unicode and Emoji Support 😋
- Color Support 🎨
- Align the text according to the need
- Written in  🇬 🇴

## Demo Link
 
It's a library so you can install it via Go 

```terminal
go get github.com/Delta456/box-cli-maker
```

## Link to Code

{% github https://github.com/Delta456/box-cli-maker %}

## How I built it 

Using Go, VSCode, Terminal etc...

## What I learned

- Go Packages work 
- Semantic Versioning 
- GitHub Releases 
- Updating and Optimizing my code
- Making documentation of my code 
- much more.... 

## Additional Thoughts / Feelings / Stories

This is my first library that I have ever written!!
Software Architecture Final Project
Tags: octograd2020, githubsdp
Published: 2020-05-20 04:24:57

[Comment]: Canceled is an application I developed for my final project for my Software Architecture class. I got the idea for this application from twitter user @mattiekahn

[URL: https://twitter.com/mattiekahn/status/1224100727578120193]. 

Through this idea, I developed a simplified web application to implement a desired software architecture design.

## Link to Code: '{% github https://github.com/kr0wl/canceled %}'

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

Docker, Python, Flask, MongoDB Atlas, bootstrap

## Additional Thoughts / Feelings / Stories

This was a really fun project, I wish I had had more time to improve upon it and make it better.


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Think about one with virtuous life
Tags: philosophy, stoic, writing, asking
Published: 2020-05-20 04:17:25

_This article has been originally posted on my [blog](http://sandordargo.com/blog/2020/05/20/think-about-one-with-virtuous-life). If you are interested in receiving my latest articles, please [sign up to my newsletter](http://eepurl.com/gvcv1j)._

Marcus Aurelius jotted down the following thought: "This advice from Epicurean writings: To think continually of one of the men of old who lived a virtuous life."

This piece of advice might sound farfetched, but think about it! It's actually quite useful and pragmatic. A piece of advice that can help you in many situations regardless of your experience. Are you an aspiring developer? Are you a medior who wants to become a technical leader? Are you a senior who wishes to keep up with the latest trends in our (not so) fast-changing profession? Do you just lack motivation sometimes?

It doesn't matter which one you can identify with, you can always find someone who in certain aspects is better than you, someone who you admire. If anytime you feel that you could do better, think about that special person, think about what he or she would do. If you don't know, ask yourself what would your hero do if she was in your situation!

This will help you separate your ego from the situation. Then you can think about it from an external point of view. You can imagine your hero, you can depict what your hero would do. He or she doesn't even have to be a real person. He can be Luke (or Anakin...) Skywalker with a cool lightsabre. The only thing that matters is that you should put yourself in the place of your hero's and think from her perspective. 

This simple action will make things much easier. As soon as you think about what Luke would do, you stop thinking about excuses. You will only think about solutions instead. Whereas if you think about what you should do, your brain will immediately start to rationalize and to justify why it's totally fine to not do anything.

As soon as you have the solutions at hand just by thinking what your hero would do, you made it much more difficult to opt-out. You cannot say anymore that it's not possible, because you actually know it is. Eventually, you will start implementing the winning solution. Thanks to your hero.

Get yourself a virtuous hero and her unique perspectives! And the next time you feel lazy to write a unit test for a piece of legacy code, just because it seems complex, think about what your hero would do!
Effective Java! Limit Source Files to a Single Top-Level Class
Tags: java, effective, oop, architecture
Published: 2020-05-20 04:10:42

---
title: Effective Java! Limit Source Files to a Single Top-Level Class
published: true
description: A dive into chapter 25 of Effective Java
tags: java, effective, oop, architecture
series: Effective Java Review
canonical_url: https://blog.scaledcode.com/blog/effective-java/effective_java_limit_to_one_top_level_class/
---

Today we tackle a topic similar to the topic from last week where we considered nested classes. This time we consider multiple top-level classes in a single source file. The difference between what we are considering today and what we considered last week is that these classes are at the same level as the "base class". You may not even know that you can have multiple top level classes in a source file (you can only have one top level `public` class in a source file) and, per this chapter, that's OK because you shouldn't be using this ability.

Let's consider the benefits we get from having multiple top level classes in a file. We don't need to create as many files. It could be used a way to group related classes together. We don't pay extra for additional files so we should be good skipping that benefit and we can use packages to group related files. 

So let's look a little more concretely into what problems not following this advice can cause. One that the book doesn't mention is that this is an unexpected ability to take advantage of, because of this, it can be confusing to future developers working in your project when they are looking for where a specific class is defined. On top of this the main benefit that the book mentions is that you can run into cases where you have two classes defining the same class and which instance gets selected depends on how the code was compiled. This is demonstrated in the book by going through different orders of parameters you could pass to the Java compiler on the command line. Now I don't know about you, but I usually am not compiling code on the command line, I'm usually using my IDE so not only does the order affect how the code will execute but we, most of the time, don't have visibilty into the order or parameters passed to the compiler. 

To sum it up, having multiple classes defined at the top level in a single source file provides us basically no value but does bring with it predictability and maintainability troubles and thus should be avoided.
Superhero App
Tags: octograd2020, githubsdp
Published: 2020-05-20 04:00:18

## Story Behind Superhero App
It's been two months since I joined the internship program in a company. I learnt lot about Android App Development. Specially about Architecture Design implementation, Design Pattern implementation, Separation Layer, etc. And then I spent my weekend for implement my knowledge that I get from internship program. I made a simple app, superhero app.

Superhero App is an application that will inform you about list of Superhero, Anti-Hero, and Villain characters in the movie, comic, series, etc. This application will inform you detail about the characters.

## Demo Link & Link to Code
{% github https://github.com/naufalprakoso/Superhero-App %}

## How I built it
I built this project using Android Native and:
1. Kotlin
2. LiveData
3. ViewModel
4. Room
5. Coroutines
6. Gradle Kotlin DSL
7. Ktlint
8. Retrofit

## Additional Thoughts / Feelings / Stories
Made project with 💖 and spent my weekend to created this project for learning purpose.
DAY 2 Started Working on Tracker and wireframes for APP structuring
Tags: gftwhackathon, webdev, react, webmonetization
Published: 2020-05-20 03:59:05


Hello to all, we started working on our hackathon project. All things that we discussed or did for our second day of our hackathon project will be covered in this article.

Note: For tuning in to this article, please read the first-day article of this series so you can catch up and be part of our journey.
Let's begin.
So far, I worked on the first portion of the tracker part section of the App using reactjs. We all know and we are aware that bugs are unexpected and unavoidable. Thus, it happened and I have encountered some of it while developing the app. However, I tried searching and solving the causes of error, although I solved some parts but there are still some traces. I pushed my initial commit on Github so my partner can see the parts of the code too and will do her part. For the further bugs, it will be resolved by Hally’s help. She is going to do her part and vice versa until we reach the final commit of the first part of our app. 
view of the first part of the app Part 1  🔽 </p>
![Tracker](https://dev-to-uploads.s3.amazonaws.com/i/n20gbnuk0v4yz48jh2dp.png)
for chart part check 🔽
![Charts ](https://dev-to-uploads.s3.amazonaws.com/i/4vh9803adnnkq1rdm60f.png)
Improved with css 🔽
![Improved](https://dev-to-uploads.s3.amazonaws.com/i/cypc624lt0mjredq7d9j.png)
For the second part of our app we are going to work on an app that is given below 
# Second Part of the App Wireframes 🔽
Part 2
![Part1](https://dev-to-uploads.s3.amazonaws.com/i/5g2kcqdol8itjdl15jai.png)
The basic idea is after clicking on that button, which is the View Content, we are going to use web monetization as we said in the previous article.

We are still working on things right now, but we are going to share with you our daily progress here so stay tuned .Thank you & All the best to all have a good days😊.

#Authors 
* krishna
* hally 

# Team Members
* Follow Hally on Twitter👉[Hally](https://twitter.com/_itshally)
* Follow Me on Twitter👉[krishnadevz](https://twitter.com/_itshally)
* Follow hally on Dev.to👉[hallyDevto](https://dev.to/itshally)
* Follow hally on Github👉[hally](https://github.com/itshally)
* My Github 👉[krishnadevz](https://github.com/krishnadevz)
Permutation in string - LeetCode
Published: 2020-05-20 03:49:56

---
title: Permutation in string - LeetCode
published: true
description: Medium Problem
tags: 
---

Given two strings s1 and s2, write a function to return true if s2 contains the permutation of s1. In other words, one of the first string's permutations is the substring of the second string.

This is similar to [Anagrams in string](https://dev.to/chakrihacker/find-all-anagrams-in-a-string-leetcode-l4i)

The algorithm Used in above post works for this problem too, but I am gonna write a slightly different algo.

Input:

s1 = "ab", s2 = "eidbaooo"

Output is **True** because s2 contains one permutation of s1 ("ba")

For this kind of problem all we have to check in a sub string of length s1, whether s2 and s1 has same character frequencies without worrying about the order. like "ab" and "ba" which has same frequency

## Algorithm:

1. check whether s1 < s2 (error case)
2. create two arrays s1Map and s2Map of length 26 filled with 0 (input is a-z)
3. Loop through s1Map and increment s1 ith index based on a = 0 and z = 26
4. Also increment s2Map same as above
5. initialize count with 0
6. Now loop through s1Map and check s1Map[i] == s2Map[i]. if it's equal increment count by 1
7. The idea is if count is 26 at any window then permutation exists
8. Now loop through s2.length - s1.length
9. We return true if count is 26
10. create two variables r and l representing right and left
11. right will hold the s2[i + s1.length] - 'a' char array index (0 - 26)
12. left will hold the s2[i] - 'a' char array index (0 - 26)
13. increment s2[r]++
14. if s2Map[r] == s1Map[r], we found a match and increment count
15. if s2Map[r] == s1Map[r] + 1, there is no match, decrement count
16. decrement s2[l]--
17. if s2Map[l] == s1Map[l], we found a match, increment count
18. else if s2Map[l] == s1Map[l] -1, there is no match, decrement count
19. after loop return count == 26

Compare the image with code for better understanding

![Permutation-in-string-explanation](https://i.imgur.com/NbgugEo.jpg)

## Code

```js
/**
 * @param {string} s1
 * @param {string} s2
 * @return {boolean}
 */
var checkInclusion = function(s1, s2) {
	if(s1.length > s2.length) {
		return false
	}

	let s1Map = new Array(26).fill(0)
	let s2Map = new Array(26).fill(0)

	for(let i = 0; i < s1.length; i++) {
		s1Map[s1.charCodeAt(i) - 'a'.charCodeAt(0)]++
		s2Map[s2.charCodeAt(i) - 'a'.charCodeAt(0)]++
	}

	let count = 0
	for(let i = 0; i < 26; i++) {
		if(s1Map[i] == s2Map[i]) {
			count++
		}
	}

	for(let i = 0; i < s2.length - s1.length; i++) {
		if(count == 26) {
			return true
		}
		let r = s2.charCodeAt(i + s1.length) - 'a'.charCodeAt(0)
		let l = s2.charCodeAt(i) - 'a'.charCodeAt(0)

		s2Map[r]++
		if(s2Map[r] == s1Map[r]) {
			count++
		} else if(s2Map[r] == s1Map[r] + 1) {
			count--
		}

		s2Map[l]--
		if(s2Map[l] == s1Map[l]) {
			count++
		} else if(s2Map[l] == s1Map[l] - 1) {
			count--
		}
	}

	return count == 26
};
```
💅 How to create a triangle in CSS
Tags: css, html, tricks
Published: 2020-05-20 03:49:15

---
title: 💅 How to create a triangle in CSS
published: true
description: Do you know how to create a triangle in CSS without using images?, Well here is a short explanation
cover_image: https://codesandtags.github.io/blog/static/905f44927e32fe3920dee63c517a0a33/b0b8f/hero.webp
tags: css, html, tricks
---

A couple of days before, I had to face this common challenge, however, there are many solutions (using images, using divs, and using pseudo-elements with and empty content). For me, the best solution was using pseudo-elements, so that here is my solution.

If you want to read more about this common pattern, please review [this article in CSS Tricks](https://css-tricks.com/snippets/css/css-triangle/) (One of the best pages for CSS Content).

## Understanding ::before and ::after pseudo-elements in CSS

In few words a [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) is : 

> A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. 


## Creating the triangle

After understanding the above concept, it means we can add some content, or create another element given a selector. 
In our case, if we define a `border-width` and we have an empty `content`, the border will start from the center of the element.

Then, pretty much we need to play with the `border-color`, `border-width` and the `position:absolute` to create our triangle. Below, you will find a couple of examples in my [codepen](https://codepen.io/codesandtags/embed/ExVGWvG?height=265&theme-id=dark&default-tab=result). 

{% codepen https://codepen.io/codesandtags/pen/ExVGWvG %}


## What's the next?

Well, I think that's all using a short example. Given the above examples, you can add letters, transformations, animations, and whatever you can imagine, using the pseudo-elements.

To get a complete list, please [check the documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) and don't forget review the [compatibility with browsers](https://caniuse.com/#search=%3A%3Abefore).

If you want to see my original post, [you're welcome here](https://codesandtags.github.io/blog/how-to-create-a-triangle-in-css).

Cheers and keep learning! 🍻
How to use dart-sass with Vue
Tags: sass, vue, dartsass, css
Published: 2020-05-20 03:35:55

---
title: How to use dart-sass with Vue
published: true
description: We learn how use dart-sass in Vue for access to @use and @include
tags: sass,vue,dart-sass,css
---

# How to use

If you got here is because you can't find a solution how use `@use` or `@include` to you Vue app.

First install `sass`:

`npm i sass --save-dev`

Create file or add this code to `vue.config.js`:

```js
/* vue.config.js */
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass')
      }
    }
  }
}
```
Free book: Deploying Node.js 🚀
Tags: node, javascript, devops, book
Published: 2020-05-20 03:15:35

---
title: Free book: Deploying Node.js 🚀
published: true
description: A free, hands-on book and video course that teaches you how to manage, secure, provision and deploy node.js servers and applications.
tags: nodejs,javascript,devops,book
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tbo6n6w86mk0dbko84h2.png
---

[Get free, complete access here ](https://deployingnodejs.com)

Hi! I'm [Kati Frantz](https://katifrantz.com), a full-stack javascript engineer who has spent sleepless nights trying to figure out server management and node.js application deployments.

I've always found there was a lack of a reliable resource on how to deploy, manage, and scale node.js applications in the cloud. Over the past few years, I have built, deployed, scaled and managed node.js applications of all sizes.

I always wished there was a practical and simple guide for me to follow, teaching me how to deploy my own production ready servers, databases, queue workers, how to set them up, secure them, and deploy my node.js applications.

That's why I took out time to write this book, to share all the knowledge I have acquired over the years: a simple practical guide to provisioning, setting up, **securing**, **scaling**, **managing** and **deploying** node.js servers.

It's complete free, so go ahead and start learning. [Get complete access here ](https://deployingnodejs.com).

Please share this resource with someone who might find it useful.

Thank you !