teleren/devto huggingface dataset:
Join the Android Development Online Summit'22!
Tags: android, androiddevelopment, conference
Published: 2022-05-04 15:08:34

We are looking for speakers and moderators!

Join our [Android Development Online Summit](https://events.geekle.us/android/?utm_source=communities&utm_medium=dev&utm_campaign=dev) by Geekle.us
Dates: June 21-22, 2022

You'll find the CFP on the website.
We are looking for use cases and live coding talks.

If you want to join as an attendee, feel free to join Career Track for FREE and get -30% discount for Senior Track with a promo code **ANDROIDEV**
How to add a CMS to your Gatsby Website
Tags: gatsby, webdev, javascript, tutorial
Published: 2022-05-04 14:53:14

**What is GatsbyJS?**

Gatsby is a framework for creating blazing fast websites and web applications. Powered by React and GraphQL, Gatsby gives you everything you need to build and launch your next project.

[Go to this page here](https://www.gatsbyjs.com/about/)

**Why Choose Contentful CMS?**

Contentful is a headless content management system (CMS). You upload your content (be it text, images, or video) to Contentful, and from there can organize and edit it as you desire. 

[Get all the Details here](https://www.contentful.com/about-us/)

**Prerequisities**

This post will assume that you have a Gatsby project already set up. If you need to set up a project, head to this [page] (https://www.gatsbyjs.com/docs/quick-start/), then come back.

**Gatsby Integration With Contentful**

```
npm install gatsby-source-contentful
```

**How to use it?**

Create the gatsby config file and add the following code

```
plugins: [
  {
    resolve: `gatsby-source-contentful`,
    options: {
      spaceId: `your_space_id_grab_it_from_contentful`,
      accessToken: `your_token_id_grab_it_from_contentful`,
    },
  },
]
```

Connect your gatsby website and contentful CMS. 

Here is an example of what a GraphQL query looks like...

```
import React from 'react'
import Layout from '../components/Layout'
import { graphql, Link, useStaticQuery } from 'gatsby'
import * as styles from './blog.module.scss'
import Meta from '../components/head'

const BlogPage = () => {
    const { allContentfulBlogPost: { edges } } = useStaticQuery(graphql`
        query {
            allContentfulBlogPost (
                sort: {
                    fields: publishedDate
                    order: DESC
                }
            ) {
                edges {
                    node {
                        title
                        slug
                        # publishedDate(fromNow: true)
                        # format uses momentjs
                        publishedDate(formatString: "MMMM Do, YYYY")
                    }
                }
            }
        }
    `)
    return (
        <Layout>
            <Meta title="Blogs" />
            <h1>Blog</h1>
            <ol className={styles.posts}>
                {edges.map((edge, index) =>(
                    <li key={index} className={styles.post}>
                        <Link to={`/blog/${edge.node.slug}`}>
                            <h2>{edge.node.title}</h2>
                            <p>{edge.node.publishedDate}</p>
                        </Link>
                    </li>
                ))}
            </ol>
        </Layout>
    )
}

export default BlogPage
```

Talk Later!
Project Ideas
Published: 2022-05-04 14:35:24

* Munchkin Loot Letter game 
* "Guess that Song" game using [Spotify API](https://developer.spotify.com/documentation/web-api/) to play 30 seconds of a random song (maybe selected from a playlist of choice). The player has to guess the title and/or artist before time runs out.
* Use the [Unsplash API](https://unsplash.com/developers) to do a free image search
* Summer Kindess App for recording random acts of kindness achieved throughout the summer
The programmers experience
Tags: javascript, programming, beginners, productivity
Published: 2022-05-04 14:33:58

"The realities and illusions of good learning.

As a programmer, you're exposed to a world of logic, a world of additions, subtractions, divisions of bits in their mulitiples. A world that requires you think.
In this framework as a newcomer, you may at some point in getting familiar come to a junction where there are two options, two great options that set your configuration pattern to be a model to how you'd learn things after 3 consecutive consistent decisions. 

- To learn just what is sufficient and necessary at that definite point
 or
- Go down a world of the rabbits, where you scavenge about for good information, searching from page to page, article to article, tweets to quora's with words and buzzwords popping up at your every look, just to understand why a layer of computer exists and what is responsible for it.

 It may seem that the former is efficient enough for any given task and should be done at all times but the latter has its end results tied to the general understanding of a programmer in any case, general understanding could mean:

 "ohh this word seems familiar 'A11y' : *checks google* *scrolls down*, *sees 'Accessibility is long-hand for A11y with 11 words in between A and y'"

The rabbit hole is an endless depth of knowledge well. Time therein may seem slow, while on the outside fast. This is but an illusion, so I've come to learn and experience. The rabbit hole is that deep that makes you question "_why is javascript written like this, why is var, let used like this, what is a scope, what does it mean by a programming language is fast?_" and proffers a solution that makes you search just about every nook and cranny of Google, MDN, read just about any book written by Kyle Simpson and Mark Haverbeke, while checking out that Bucky's JavaScript tutorials, Caleb Curry's video on engines then knowing there's such a thing as V8, runtime, environment, bindings, non-blocking, asynchronous, prototypal, sentinels, assemblers (What is that?), machine code, history of computers just because of a want to know why `var` and `let` are different which sends you for a quick therapy at the _ImpostorSyndrome_ hospital perpetually.

 The rabbit hole must in no way be likened to a I place of "jumping about" learning about everything there is to learn on different subject matters, but a digging through as it's obvious rabbits do not hop to create holes. 

> The man who has studied about variables and operators for 12 months is the one I prefer to the man who knows all of JavaScript. 

A true programmer seeks depth, a true -tian must seek depth." 
											-  My-journal.txt
Welcome Thread - v172
Tags: welcome
Published: 2022-05-04 14:27:46

---
title: Welcome Thread - v172
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![drawing of Baby Yoda, aka Grogu, with text saying May the 4th be with you](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ad5l8nmdxf6aq7o4mer7.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Frontend vs Backend vs Fullstack Developers
Tags: programming, frontendvsbackend, backendvsfrontend, fullstackdevelopment
Published: 2022-05-04 14:26:45

---
title: Frontend vs Backend vs Fullstack Developers
published: true
description: In this article, we take a closer look at object-oriented programming and the steps programmers can take to choose the perfect programming language.
tags: programming, frontendvsbackend, backendvsfrontend, fullstackdevelopment
---

Most people believe that all web developers essentially do the same work. They all create websites, web apps, and other web related applications. So, it’s not easy to tell them apart. Despite the similarity, web development is not a single skill, but an ecosystem of dynamic technologies and frameworks that are evolving everyday.

Needless to say, creating a fully functioning website which contain all the latest features is a challenging task. Web developers must become well-versed in a range of technologies and frameworks to develop fast, lightweight, and reliable websites.

In most cases, no one person has the skill to develop a high-performing website alone. Therefore, developers must work in teams, according to their dedicated roles to create websites we see and interact with every day.

To make things easier for developers, we divide them into three categories; [frontend Developers](https://programmers.io/hire-front-end-developers/), [backend Developers](https://programmers.io/things-to-know-about-backend-development), and [fullstack developers](https://programmers.io/full-stack-development/). These categories are based on the role a web developer plays during web development.

Here, we will present a between [frontend vs. backend](https://programmers.io/frontend-vs-backend-vs-fullstack-developers/) and full stack web development and explore what sets them apart from each other.
Understanding Functional Component and Class Component
Tags: react, component, javascript, webdev
Published: 2022-05-04 14:01:52

### What are Components
Components are the building blocks of any react app, they allow you to split the ui into smaller pieces. Rather than building the whole ui inside a file, the ui can be split into different files otherwise called Components. This small pieces of ui can be reused and handled independently.

It is a combination of :

- Template using html
- User interactivity using Js
- Applying styles using css
- Types of Components in react

React has two types of components, functional(stateless component) and class(stateful). We’ll be looking at each type of component below

## Functional(stateless) Component
A Functional component is simply a javascript function that accepts inputs which are properties(props) and returns a react element i.e JSX that specifies how a section of the user interface should appear.

Let us define a simple JavaScript function called Hello() which returns the How Are you JSX code. To pass this JSX into ReactDOM.render() we need to pass our Hello() function as <Hello/> into ReactDOM.render(). This has the same effect as above where the JSX is passed directly into ReactDOM.render() and gets rendered in the browser.

```
// This is a functional component
function Greeting() {
  return <h1>How Are you</h1>;
}

ReactDOM.render(<Greeting/>, document.getElementById('root'));
```
The code above can be rewritten using the es6 Arrow function expression as shown below

```
// This is a functional component
const Greeting => () {
  return <h1>How Are you</h1>;
}

ReactDOM.render(<Greeting/>, document.getElementById('root'));
```
Components written as such is referred to as functional(stateless) components.

Class(stateful) Component
Class component can be described as an ES6 class. The class component has a state and a lifecycle. In the older versions of React (version < 16.8), it was not possible to use state inside functional components. Therefore, functional components was majorly used for rendering UI only, whereas we’d use class components for data management and some additional operations (like life-cycle methods). With the introduction of React Hooks, and now we can also use states in functional components as well.

A Class Component:
- is an ES6 class, will be a component once it ‘extends’ a React component.
- takes Props (in the constructor) if needed
- must have a render( ) method for returning JSX

For Example:

```
class Hello extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

ReactDOM.render(<Hello/>, document.getElementById('root'));
```
With the above explanation i explained functional components and class component in react. I hope this helps :)
Application streaming: Where it has taken us
Tags: webrtc, discuss, cloud
Published: 2022-05-04 13:44:54

We’ve been streaming videos and music for a while now, consuming content like never before. The sheer convenience of not needing to download or get hard copies in the form of CDs, DVDs, or vinyl tapes was enough for us to move to streaming platforms; but it offered much more than that – accessibility.

**This blog was originally published [HERE](https://blog.neverinstall.com/application-streaming-where-it-has-taken-us/)**

We are in the midst of a similar paradigm shift that is helping make computer applications more accessible to more people in a manner similar to Netflix or Spotify.

## A natural progression

When we stream, we get access to libraries of pre-loaded content where all we need is to select what we wish to watch, and the rest is handled. However, seldom do we see such efficiency in a workspace. Especially in the digital age where most office work is conducted with applications and over the internet but still requires expensive hardware, downloads, set-ups, and more.

And this is the gap application streaming helps us bridge.

The concept is simple: stream applications similar to how we stream movies, with the traditional streaming platform's display and audio and other nitty-gritty features. There is, although, one differentia–interaction. Users can interact with the stream, alter it, and adjust it.

In [Neverinstall](https://neverinstall.com/spaces/devtools), we run apps in cloud-native environments with virtual displays. These virtual displays are then streamed directly to the browser of the user. The virtual display allows users to interact with the application as the platform forwards the user's input context (mouse, keyboard, etc.) to the apps. Since the delay between the input and the stream is negligible, the experience is similar to native desktop usage.

![meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kbvgw7a9c5zjc8aldce.gif)

## "Why", you ask?

Consider streaming a browser, perhaps Chrome (the most widely used), which would generally feed on the RAM, slow down the computer, and even freeze it. The stream allows you to use it on your PC while the browser runs on a different machine.

The opportunities that app streaming can unlock are unlimited, especially for developers, who often choose a programming language and dev tools based on their hardware rather than interest. A solution like application streaming helps developers bypass their machine's capabilities and code on pre-configured dev environments (Psst! It works on every machine).

## What else can we do?

- Designers offload their rendering activities for faster results while keeping their native resources free.
- Users can run productivity tools like Slack, Telegram, and Discord seamlessly, without halting a vital conversation, community outreach, or business meeting. Ever.
- E-sports people play desktop-class games from anywhere without the need to upgrade hardware with the latest release.

While it may be a while before we replace the use of heavy-duty machines with such solutions, we are well on our way towards it.
Brain Dump - May 2022
Published: 2022-05-26 20:41:18

---
title: Brain Dump - May 2022
published: true
date: 2022-05-04 13:44:15 UTC
tags: 
canonical_url: https://alex.party/posts/2022-05-04-brain-dump-may-2022/
---

I don't have any brilliant insights to share today, or anything like that, I'm mostly just wanting to kinda put out some information because I feel like I should write more regular updates.

I've recently started using [centered.app](https://centered.app) to help me focus, and BOY HOWDY has it helped (please ignore that I am writing this while not using it.) It helped so much so, that I took some time to make some modifications to the default Macos Shortcuts for setting Do Not Disturb mode that centered provides to start my own music playlist and close applications that are regularly distracting me.

I'll be speaking in a couple of days at [Stir Trek](https://stirtrek.com) about [geo-elements](https://github.com/fimion/geo-elements) and how to make custom elements by remaking deprecated HTML elements. I need to rework the conclusion of the talk a bit, but I think it's good? Hopefully people will get something out of it. I'll also be presenting this talk at [THAT Conference](https://that.us/events/wi/2022/) in July. So y'all all have another chance to see it in person.

I know at [least](https://chriscoyier.net/) [three](https://daverupert.com/) [people](https://andrewwalpole.com/) who are doing personal site redesigns. My current site is built on gridsome and netlify CMS, and while I've been doing [a lot more stuff with netlify cms](https://github.com/wearetraina/nuxt-cms-template), I kinda get worried about gridsome's future. also frustrated a bit when i try and do things in it. So i may do a rewrite of my site in astro or eleventy/slinkity. We'll see.

Originally Posted as [Brain Dump - May 2022](https://alex.party/posts/2022-05-04-brain-dump-may-2022/) at alex.party
Detecting Fake News with Python and Machine Learning
Tags: programming, python, machinelearning, news
Published: 2022-05-04 13:43:52

We consume news through several mediums throughout the day in our daily routine, but sometimes it becomes difficult to decide which one is fake and which one is authentic not every piece of news that we consume is not real. 

##Terminologies 

-**Fake News**
A sort of sensationalist reporting, counterfeit news embodies bits of information that might be lies and is, for the most part, spread through web-based media and other online media.
This is regularly done to further or force certain kinds of thoughts or for false promotion of products and is frequently accomplished with political plans.

-**Tfidf Vectorizer**
*TF(Term Frequency)*
These are the number of times a word is present in a document. Large values mean that a word is present so many times with respect to other words.

*IDF(Inverse Document Frequency)*
IDF is a proportion of how critical a term is in the whole corpus of data.

###*Project*
To detect fake news and real news. Using sklearn, we build a TfidfVectorizer on our dataset. Then, we initialize a PassiveAggressive Classifier and fit the model. In the end, the accuracy score and the confusion matrix tell us how well our model fares.

*PassiveAggressive*
Passive Aggressive algorithms are online learning algorithms. Such an algorithm remains passive for a correct classification outcome, and turns aggressive in the event of a miscalculation, updating and adjusting. Unlike most other algorithms, it does not converge.

###*Data Analysis*
The data set used can be found [(url)]

This dataset has four columns,
- *unnamed*
- *title*
- *text*
- *label*

###*Libraries*

```
import numpy as np
import pandas as pd
import itertools
from sklearn.model_selection import train_test_split
from sklearn.feature_extraction.text import TfidfVectorizer
from sklearn.linear_model import PassiveAggressiveClassifier
from sklearn.metrics import accuracy_score, confusion_matrix

```
The output is in form of a vector;
confusion_matrix(y_test,y_pred, labels=['FAKE','REAL'])
Fake=True Real=False

Link to the project code 
[(https://github.com/elsie-n/FakeNews/tree/main)]
Redirect with React Router v6
Tags: webdev, beginners, javascript, react
Published: 2022-05-04 13:36:20

**Issue**
Building an app that will redirect a user back to the login page if not authenticated.  

**Solution**
We can use Navigate with react router 6 and some simple conditional logic in order to redirect the user back to login when they attempt to view a page and is not authenticated.

Lets assume we have a backend set up that will accept a POST request in order to authenticate a user.  Our front end is set up to send a send a POST fetch request and if authenticated store that user in state.  The front end fetch could look something like this.

```javascript
const body = {
  username: username,
  password: password,
};

fetch("/login", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(body),
}).then((r) => {
  if (r.ok) {
    r.json().then((user) => setCurrentUser(user));
    navigate("/home");
  } else {
    r.json().then((err) => setErrors(err.errors));
});
```
Now we can utilize React Router v6 and Navigate to redirect the the user based on whether or not we have an authenticated user stored in state (currentUser).

Make sure you have installed React Router v6 which can be done with this command :npm install react-router-dom@6.

Next make sure you have imported BrowserRouter, Navigate, Routes, Route from react-router-dom.

```javascript
import { BrowserRouter, Navigate, Routes, Route } from "react-router-dom"
```
Once you have your routes set up we can add the following bit of logic to check whether an authenticated user is in state.  The following code assumes I have page that shows dogs.

```javascript
<Route 
  path="/dogs"
  element={
    !currentUser ? <Navigate to="/login" /> : <DogsShow />
/>
```
In english this asking if not currentUser then navigate to /login else render DogsShow.

And there you have it a quick and easy way to add redirect logic to your app.
How often do you use free libraries in your projects?
Tags: opensource, beginners, programming, discuss
Published: 2022-05-04 13:17:23

Hi!

A great part of the IT world exists thanks to open-source solutions. Accessibility makes them available not only for big fishes but also for non-profit organizations.
Come and see how DNA uses open-source solutions to develop commercial and non-commercial products and how we contribute to the community. You are welcome to join a discussion with Radek Madecki, Bartek Wroński, and Kamil Knyszyński who will share their experience and impressions while working with open source.

You can sign up for this event at https://www.meetup.com/pl-PL/dna-technology/events/285565451/
Maven Tutorial - Nice & Easy
Tags: java, tutorial
Published: 2022-05-04 13:05:42


Hey folks!

Ever looked for a comprehensive intro to Maven that is fun and entertaining at the same time? Then have a look at this brand-new episode of the "Marco Codes" YouTube channel: [Maven Tutorial - Nice & Easy](https://youtu.be/Xatr8AZLOsE).

In this video, you'll learn how to use Maven like a professional: From installations, using the mvn wrapper, using Maven together with IDEs and of course the Maven basics: From pom.xml conceps to running commands (clean install) as well as understanding Maven repositories and multi module projects. By the end of it, there won't be many questions left when it comes to Maven.

👉Maven Tutorial - Nice & Easy

{% embed https://youtu.be/Xatr8AZLOsE %}

Let me know what you think in the comments!
Javascript — 7 useful concepts with example
Tags: javascript, programming, concepts, example
Published: 2022-05-04 12:57:25


Javascript is a very popular language for a long time and is widely used around the community.

Here are 7 useful advanced javascript concepts every developer should know.

1. Hoisting
2. var vs let vs const
3. Function Rest parameters
4. Closures
5. Symbols
6. Iterables and Iterators
7. Generator functions

Each concept is explained in detail with examples on [canopas blog](https://blog.canopas.com/javascript-7-useful-concepts-with-example-a7f00a08e919).
ALGORITHM PROBLEM
Published: 2022-05-04 12:12:44

Write a program that prints the minimum number of coins to make change for an amount of money.

Usage: **./change cents**
where cents is the amount of cents you need to give back
if the number of arguments passed to your program is not exactly 1, print Error, followed by a new line, and return 1
you should use atoi to parse the parameter passed to your program
If the number passed as the argument is negative, print 0, followed by a new line
You can use an unlimited number of coins of values 25, 10, 5, 2, and 1 cent
How to write stdout both to the terminal and a file
Tags: programming, bash
Published: 2022-05-04 11:36:42

Below I use the [tee](https://phoenixnap.com/kb/linux-tee#:~:text=What%20Does%20tee%20Command%20Do,can%20precede%20or%20follow%20it.) command to write the output of an `npm run build` script to both to the terminal and to a log file.

```bash
npm run build | tee ./logs/build.log
```