teleren/devto huggingface dataset:
React and its components
Tags: react, beginners
Published: 2020-05-20 13:19:11

Recently I had the pleasure to work with the React library to finish a project for my bootcamp. So today I want to give a quick introduction to any new javascript newbies on what React is and the concept that it's built upon.

From the actual documentation, react describes itself as a javascript library designed for building user interface. The way this user interface is brought about is by creating it by components. These components are independent, reusable and able to manage there own state. Then you're able to combine all these components to build out complex user interface. When starting to build out this UI you'll have to make your first component and this will be your foundation. This first component will represent the body of the entire application and be the container for other components or now referred to as the child. Then these child components can be whatever you would want them to be. 

A good example for visualization is twitter, for this example i'm going to use Robert Downey Jr profile as reference. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ao7fvm9pqbh4j34kgjvu.png)

On here you can see several different things such as his profile bio, trends, profile suggestions, and the feed. All of these can be considered as components and built out separately. Also within some of these components they can even have children component of there own such as the feed, that has likes, comments, and retweets.

During implementation a component is usually made out of a class, state, and a render method. A component can maintain internal state data and this is the data that you want to display when it gets rendered.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g6sct2c8lngfg1wwd9x6.png)

This is an example from the react web page of a stateful component, the data held within is at 0 seconds. So shown to the right at somepoint in time that was also at 0 seconds. At the bottom we have something called a componentDidMount that as soon as the application get's initialized it will trigger another render. Here they have it set up that at every second that passes the State will change, and with react every time this happens there's going to be a render that occurs.


The advantages to having all these components is that instead of having one file that contains a bunch of different java script code inside of it, you will have a lot of different files that have small portions of code within them. This allows you to better follow and read the code that's held within. Another great thing about react is since you're working with components you can make small changes without having to worry about breaking the Parent component that it's held within, you can easily just remove and switch it out with another one at your disposal. 

References: 
https://reactjs.org, 
https://www.youtube.com/watch?v=N3AkSS5hXMA
Y(et) A(nother) CSS framework
Tags: javascript, css, html
Published: 2020-05-20 13:15:39

You might ask why another CSS framework? 

The quick question is, I didn't find one that fits my needs. Therefore, I made [yet another css framework](https://github.com/FlorianWoelki/YACSS).

YACSS is a modern utility and component based CSS framework. If you know Tailwind, you should be pretty familiar with YACSS. YACSS uses utility classes and beautiful prestyled components to work. You can look at some examples on the [github page](https://florianwoelki.github.io/YACSS/).

## What utility based classes are in YACSS?

The reason why there are for every single width or color a system is really easy to explain. The focus should be on the development of the product and not the difference between margin-left 1px or 2px.

We have different utility classes and systems:
* different colors (e.g. indigo, blue, red, gray) for background, on hover or text color
* spacing system (e.g. `m-1` sets a margin with 16px)
* font size system (e.g. `font-12` sets the font size to 12px)
* border radius system (e.g. `btl-sm` sets top left border radius to 2px)
* border system (e.g. `b-2` sets a white border with 2px width. You can set the border color with `bc-purple-700`)
* and much more to explore...

## What components are in YACSS?

Right now, there are some components you can dynamically change or apply:
* Sidebar, Navbar
* Buttons (Primary, Secondary, Tertiary)
* Links
* 12 grid system with large, medium and small device breakpoints
* Button Animations
* Avatars
* Alerts
* Cards
* Pagination
* Tags
* Modals
* Input Forms

The best thing is: you can customize every single component with the utility classes.
Websites Validation System
Tags: octograd2020
Published: 2020-05-20 13:11:20

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[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!)

## Website Validation - my final project

Nowadays, if we only need something - facts, products, statistics, addresses - we immediately turn to one of the popular search engines and after a while, we receive a list of potential answers. Research shows that most users choose one of the first five links on the result page. Therefore, in an era of a competitive market, for website owners, it is important for their site to be on a high position in the results list. This can be achieved by following a number of rules regarding search engine optimization. However, it is not that simple. Maintaining the quality of a huge website can be too much of a challenge. For example, checking if all of the links on the website work would be a very tedious task and seems to be almost impossible for huge services. 

That's why I decided to create a crawler that will automatically analyze the site and return the most important tips, which will help to keep the site on a high position. What distinguishes my solution from those currently existing on the market is the easily available and open-source project, which can be used as a step in CI/CD pipeline.

## How does it work?

On the created website user can specify the link and parameters for the analysis. Then they receive a list of issues found on their website such as not working URLs, wrong header structure, lack of robots.txt, and poor safety of usage. Moreover, there is a possibility for developers to use only the Rest API which gives all of the information in the form of JSON file.

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

## Link to Code

Here are the links to GitHub repositories of the back-end and front-end of my project.

{% github https://github.com/koalabzium/SEO_Validator %}
{% github https://github.com/koalabzium/SEO_Validator_Website %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## The stack

To build my project I used Python's BeautifulSoup to create a crawler and validators and Flask to create the API. For creating user interface I used React.js. 

## Thoughts and feelings <3 

The whole project was really fun to make! While doing it I was also writing a thesis about it and I really enjoyed this more literary side of it. I have to admit that the biggest challenge was gathering all the information about SEO to decide which parameters I want to take into consideration. I used more than 60 official sources to write my thesis. All in all, I am super happy with it and I am waiting impatiently for my thesis defense!



[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Compiler
Tags: octograd2020
Published: 2020-05-20 13:10:55

[Comment]: # I was required to build a compiler to compile java code. I first started developing the frontend (lexer and parser), then built a sentiment analyzer and then the backend which used to generate code. This project was part of my university module which was over 4 months however I took the project further and developed the compiler, even more, to be able to learn the ins and outs.
2020 was a Crazy Year.
Tags: githubsdp, devgrad2020, octograd2020, dotnet
Published: 2020-05-20 13:06:47

## My Final Project
I always felt that discord bots never had too much *variety*. There are so many to choose from, but most of them seem like an all-in-one clone of MEE6, Dyno, etc. I started to get irritated through the constant server outages or the poor admin commands. This is where RoyalGuard was born.

RoyalGuard is a bot made for administration and has unique features such as timed mutes, customizable welcome/leave messages, and welcome roles given on a new user event.

The plan is to deploy this across many servers, so that they can have better administration overall because RoyalGuard is meant for nothing but server administration. There will never be any extra "fun" commands, that is all for another bot of mine that I will work on in Rust.

## Demo Link (Bot invite link)
[https://discord.com/api/oauth2/authorize?client_id=698554777981681754&permissions=268827894&scope=bot](https://discord.com/api/oauth2/authorize?client_id=698554777981681754&permissions=268827894&scope=bot)

## Link to Code
{% github https://github.com/bdashore3/RoyalGuard %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

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

I had little-to no knowledge about the C# library for Discord known as DSharpPlus. However, since I programmed my own twitch bot (KingBot, also located in my [Github](https://github.com/bdashore3/KingBot)), I was able to have a base for my C# code that uses DI and EF Core.

I quickly realized that RoyalGuard needed more robust code which made me ask more questions in the C# and DSharpPlus discord servers (Those guys are amazing). From there, I learned about reducing static overuse, hosted services for timers, and the efficiency of an I/O cache for prefixes rather than using EF Core's first-level caching for all queries. 

## Additional Thoughts / Feelings / Stories

Since the pandemic occurred, it took me a total of three weeks to complete v1.0 which is now pending approval on the Discord Bot List. If I was to have school, the project would have taken two months for v1.0.

C# has a steep learning curve especially when coming from JavaScript. I have grown to love the language since it's really intuitive and there are so many tools at the dev's disposal. I'm starting to find more languages that are more intuitive and have great communities that encourage learning.

## Final Notes

I'm going into the medical field as a career starting next year when I attend college and med-school for seven years. However, just because one wants to become a doctor, artist, actor, writer, or anything in between doesn't mean that people cannot have a hobby. I always have the passion to learn something new and apply it to the real world.

Hard work and dedication will get you anywhere.

Thanks to DigitalOcean and the Github student dev pack for giving me the ability to host my bots via a VPS!
Undefeated Gym
Tags: webdev, database, php, javascript
Published: 2020-05-20 12:57:54


Let your body talk, show them what you are capable of. BECAUSE if you have a nice car you won't keep it in th garage, would you ?

💻 This Project is done with big love💻 

It is my first fully built, tested and deployed website, I'm so proud of because it was the first one, place where I practiced most of my web knowledge and also gained much more.

🚪 Feel Free To Visit the website from here : https://ahed-bahri.github.io/

In case you want to know more about the code `{%https://github.com/Ahed-bahri/Ahed-bahri.github.io %}`

Well, this particular website pushed me to do even more productive stuff now. Here I started with a mockup, then building using many different powerful web tools, such as Html5, CSS3, Bootstrap, Javascript, PHP and many different jQuery plugins.
I've learnt how to validate CSS, Html, magnify files, uses basic search optimization, test my responsive website on different devices and finally how to publish it using github Desktop, so today to see it online working just fine makes me proud.
This is a Dummy post, i will edit this later
Tags: octograd2020
Published: 2020-05-20 12:53:24

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[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 Final Project


## Demo Link
[Akash Repo](https://github.com/as8297)
 

## Link to Code

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

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


## Additional Thoughts / Feelings / Stories


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Django Blog
Tags: octograd2020, githubsdp, devgrad2020
Published: 2020-05-20 12:49:12

[Comment]: A place for you to write your blogs in a structured way

[Note]: I used Jetbrains pycharm editor


## Demo Link
I'll update the link when I host it 

## Link to Code

 https://github.com/RohithDevarshetty/BlogApp

## How I built it 
 created a virtual environment and installed the dependencies using documentation from Django and then followed coding entrepreneurs youtube channels when in doubt
Open-source algorithm for wearables in healthcare-applications
Tags: octograd2020
Published: 2020-05-20 12:44:40

## My Final Project
The final project is a bachelor thesis developed within an initiative that aims to integrate a smartwatch for use in healthcare-applications with physical activity and physiological signals. Out contribution includes the step counting algorithm and the basic firmware for the device.

## Link to Code
{% github https://github.com/MarcusNordstrom/C-Step-Counter %}

## Additional Thoughts / Feelings / Stories
Once the thesis is published I will add a link here
Edit:
The thesis is now published and can be accessed [here](http://muep.mau.se/handle/2043/31608).
FullEarth
Tags: octograd2020
Published: 2020-05-20 12:43:45

## About FullEarth
FullEarth is an OpenGL 3D globe representation of earthquakes around the world. It uses GEOJSON has sources and is compatible with USGS notification service. It was developed for Linux (Ubuntu).

## Demo
{% youtube wOWCfJ1ELCY %} 

## Link to Code
{% github https://github.com/Spationaute/FullEarth %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## How I built it 
I developed FullEarth for fun, to offer an open source alternative to a similar software that was only aimed at the Windows platform. It has no link with my PhD project except that it allowed me to clear my mind. 

This software is also my first shot at OpenGL. I used FLTK as the GUI library. I didn't find the use of OpenGL really hard since I have only used simple function. I still need to do a lot of optimization. An example could be to draw the coast lines and the faults line directly on the image before mapping it to the globe. 

Finally, I have difficulties to compile it on Windows. I have no running computer with this OS and cross compiling software with OpenGL is really hard!

## Additional Thoughts / Feelings / Stories
Don't be too harsh on your code evaluation, the software is incomplete and far from optimal. I was really just a simple project made to relax!
Platform for digitizing small-scale businesses 
Tags: django, webdev, octograd2020, react
Published: 2020-05-20 12:43:07


## Description: 
Me and my team built this platform in 36 hours in one of the hackathons
we attended. The idea was to design and develop a platform to help local shopkeepers and businessmen to go online and improve their sales. Keeping in mind the lack of technical fluency of such shopkeepers, we decided to build a platform where they only had to do two things:

1. Select how their website should look ( we had different selection windows : themes, navbar, footer, body, card ( for their products, etc ) ), kind of how people build their bitmoji avatar on snapchat

2. Enter the data ( in the form of spreadsheets ) of their products ( like price, quantity(stock), etc ) 

And once the user would hit the 'Generate Website' button, our backend system would create the website for them and host it on github pages ( static ) or heroku ( dynamic ) 


## Link to the project code: 
   Frontend: https://github.comindraasura/sabki-dukan
   Backend:  https://github.com/indraasura/sabki-dukan-backend
   Automated feedback system: https://github.com/indraasura/mythical-feedback



## How I built it:

I used React JS for creating the frontend interface and DRF with Jinja2 to create the templates and bring them together to create the website according to the data received from the user and to handle other API endpoints as well. To host the website, we used GitHub's API to create repositories and host them as github pages. 

We then added an additional feature and created a dashboard for the businessmen where they can conduct automated surveys. We used twillio's API to generate automated calls. The voice-over in these calls would be determined by the questionnaire flow created by the user ( we made a drag-and-drop interface with editable text ( for the questions ) and the user could connect these questions in the UI using lines and links ) For this, we used React-Storm and then all the user has to do is hit the 'Generate Call' button and the call would be made. 

We also used Google's speech-to-text and text-to-speech API to convert the questions into speech as well as record the customer's answer to the survey, convert it into text and store it in the DB
Automated Behaviour Prediction Using Graphology
Tags: machinelearning, python, personality, handwriting
Published: 2020-05-20 12:42:49

#### Hi! <a href="https://www.linkedin.com/in/himanshubhaskar/">Himanshu Bhaskar</a>this side. This is the project which I have done in my final year of graduation. Contributed along with my two friends <a href="https://www.linkedin.com/in/addy2202/">Aditya Garg</a> and <a href="https://www.linkedin.com/in/paras-jain-04a84614b/">Paras Jain</a>.
# About
> <strong>Graphology</strong> was the basis of this research project, which 
   claims to predict personality of a person through handwriting traits/features.

> We have tried to predict the personality traits(like optimistic, egostic, 
emotional, kind..etc) by finding handwriting traits(like pen pressure, slant of word, spacing between lines, spacing between words,etc,.) automatically by using machine learning.

# Methodology
> Methodology that is used throughout the research, from collection of datasets to the predictions and accuracy of results is show in the diagram below.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9ss8z3lfw0itoexg2c54.jpg)

# Data Collection
> Data is collected by five different graphologists, we gave them handwriting samples and they predict personality for each sample. We wanted the unbiased data that is why we have taken the data from different graphologists.

# Feature Extraction
> Features like Pen Pressure, Margin, Spacing between lines, Spacing between words, etc are calculated using opencv and our constructive algorithms.We have used techniques like Binarization of Image, Segmentation, Polygonization, Thresholding e.t.c. As shown in diagram below:-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p9ht2desu0prr8x1ba2w.jpeg) 



# Building Machine Learning Model
> Logistic regression model is used to estimate the behavioural characteristics of a person. A feature vector is created for every handwriting and it is mapped to the predicted labels given by the graphologist manually. For every feature, we build a logistic regression model and take a boolean value from each feature model, whether that particular feature is present or not in an individual’s handwriting.

# Results
>* Result 1: 30 samples were taken for training and 10 for testing. Logistic 
Regression algorithm is used. Accuracy achieved 40.2%.
* Result 2: 60 samples were taken for training and 20 for testing. Logistic Regression algorithm is used. Accuracy achieved 50.6%.
* Result 3: 60 samples were taken for training and 20 for testing. SVM algorithm is used. Accuracy achieved 52.3%.

# Screenshots
> ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/813jc03iu5200wlcqdsz.JPG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5pygm565293jlpo97z0r.JPG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/36xukczxbscsjh1dn3h3.JPG)

### For more details check out our published paper <a href="https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3562969">here</a>
[Placeholder Title]
Tags: octograd2020
Published: 2020-05-20 12:36:18

This pull request template helps you complete an application to the Class of 2020. Use the checklist below to verify you have followed the instructions correctly.

Checklist ✅
 I have read the instructions on the README file before submitting my application.
 I made my submission by creating a folder on the _data folder and followed the naming convention mentioned in the instructions (<username>), added my profile picture and markdown file.
 I have used the Markdown file template to add my information to the Year Book.
 I have completed the form: https://airtable.com/shrmuHxu38ZariKJi
 My application belongs to:
 Tier 1 📖: I added myself to the Year Book.
 Tier 2 ✏️: I wrote a post on DEV about a project I built.
 Tier 3 ✨: I want my project to be highlighted on stream.
 I understand that a reviewer will merge my pull request after examining it or ask for changes in case needed.
 I understand I should not tag or add a reviewer to this Pull Request.
 I understand the photo added to the template will be used in the ceremony "Graduate Walk".
 I have added the event to my Calendar.
The Marauder's App
Tags: octograd2020
Published: 2020-05-20 12:25:02

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[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 Final Project

Find free spaces in university labs:

- find out if a machine is free, occupied, or turned off
- find out how long any occupied machine has been logged in for (in case someone forgot to log off)
- find your friends! (so you don't need to study alone... or so you *can* study alone)

Killed by covid-19. Because now nobody is on-site.

## Demo Link

http://mapp.betterinformatics.com/demo 

## Link to Code

{% github https://github.com/compsoc-edinburgh/mapp %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

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

Frontend uses: 

- Bootstrap 4
- JavaScript (and unfortunately, jQuery)

Backend uses:

- Python / Flask
- Redis
- Go (for the SSH bot, that `finger`s every machine)
- Docker


Some tricky things include working around:
- uni breaking the `finger` command
- a bug where some users will still have processes running after they log off, making it harder to determine if someone is logged on / how long they have been logged on for

I also integrated with the university's authentication system, so I built a library called '[gosign](https://github.com/qaisjp/gosign)' to make it easier for others to integrate CoSign authentication into their own systems.

{% github qaisjp/gosign %}

<!--

## Additional Thoughts / Feelings / Stories
-->



[Final Note]: # (CONGRATULATIONS!!! You are amazing!)