teleren/devto huggingface dataset:
What are Websockets and why are they useful?
Tags: javascript, webdev, websockets, computerscience
Published: 2020-05-21 16:26:04


Websockets are an evolution of traditional client/server technology. They create a long-held single TCP socket connection between the client and server, allowing for bi-directional fully duplex messages to be instantly distributed with little overhead, leading to a very low latency connection.  

Both the [Websocket API](http://dev.w3.org/html5/websockets/) as well as native WebSocket support in browsers such as Google Chrome or Firefox means that this technology is widely supported. There are also Websocket library implementations in a variety of other languages, such as [Ruby](http://www.r3ef.com/Articles/2010/10/13/websockets-client-with-eventmachine.html) and [Java](https://github.com/adamac/Java-WebSocket-client/blob/master/src/com/sixfire/websocket/WebSocket.java).

# A brief history of the web
Originally, the internet wasn't designed to be dynamic. It was conceived as a collection of HTML pages linking to one another to form a web of information. Overtime, the number of static resources increased and richer items, such as images or video, became essential to the web. Server technologies advanced, allowing for dynamic server pages - pages whose content was generated based on a query.

The requirement to have more dynamic pages led to Dynamic Hyper Text Markup Language (DHTML) thanks to JavaScript. Various methods of communication to avoid page reloads were implemented to ensure data could be updated reliability and behind the scenes. Thanks to Microsoft, we ended up with Asynchronous JavaScript and XML (AJAX). In turn, AJAX made XHR Long-Polling and XHR Streaming possible, but none of these were solutions to a standardized cross browser solution to real time bi-directional communication. 

**Then entered Websockets**

# Why Websockets are a game-changer
Websockets represented a new standard for bi-directional real-time communication between servers and clients. The standards first approach means developers can create functionality that is truly cross platform. Since web sockets represent a single TCP socket connection, connection limitations are no longer a problem. Cross domain communication was built in with the connection handshake. 

# WebSockets v AJAX
WebSockets don;'t make AJAX obsolete by a long shot, but they do supersede [Comet](http://en.wikipedia.org/wiki/Comet_(programming)) (HTTP Long-polling/HTTP Streaming) as the solution of choice for true real-time functionality. AJAX is still best when making short web service calls, and with CORS support more widespread, it's becoming even more useful. However, if you need real-time bidirectional data streaming, the low bandwidth and latency makes WebSockets the obvious better choice.
The project that boost my career
Tags: octograd2020, graduate2020, student, firstliveproject
Published: 2020-05-21 16:42:42

## My Career Changing Project

It was the time of the hackathon month (October) when I was given an opportunity to work on a project that was going to be used in industry and has to be delivered asap. After grabbing the opportunity, I started to work on the project with a partner.

The project was to create an autonomous process to show the advertisement on programmatic DOOH (Digital out of home) screens based on real-time traffic noise and the density of the vehicles on the road around the screens.

For the automation, we choose Apache NIFI, and java and javascript as our scripting language. To get the details of the traffic we used Here maps Apis (their documentations were a great help as they were easy to understand and implement).

It required to play with multiple API and systems to make it happen in realtime. It was great learning to monitor and make real-time products as a student. After the campaign start for advertising, it went smoothly for the next 7 days but on the 8th day it crashed and was not giving the proper result, it was the first time I learned to face the pressure of the real-time product developers when a bug pops in. So, we had to fix the threshold value for the traffic so to show the ads at the perfect time.

As this project came to be a great success and the company got a great revenue due to this campaign. this made a great impact on my life as it boosts my confidence to learn to make more products that make a great impact on life.

You can visit these links to see the success stories of the project.
- https://www.adexchanger.com/digital-out-of-home/toyota-uses-programmatic-ooh-in-turkey-to-spread-the-word-on-hybrid-cars/
- https://awarion.com/toyota-hybrid-uses-ad-tech-to-showcase-its-car-tech/


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
ToDo app Reactjs
Tags: react, beginners
Published: 2020-05-21 16:42:05

---
title: ToDo app Reactjs
published: true
description: ToDo app with Shards React
tags: react, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u0r4ag7m3n5sag3unsih.jpg
---

Here I would use [CRA](https://create-react-app.dev/docs/getting-started/)
in order to keep the task fast and simple.
For the style I used [Shards React](https://designrevision.com/docs/shards-react/getting-started), just to 
try it.
[DEMO](https://todohook01.netlify.app/)
```react
import React, {useState} from 'react';
import './App.css';
import {Container, Button, Form, FormInput} from "shards-react";

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"


function App() {
    // Set toDo List
    const [toDoList, setToDoList] = useState([])
// Set Input Value
    const [value, setValue] = useState([])

    // Handle the submission
const handleSubmit = (mouseClick) => {
        mouseClick.preventDefault()
        addTodo(value)
        setValue('')


}
    //  add toDo
const addTodo = (text) => {
    if(text !== ''){
        const updateTodoList = [...toDoList, {text}]
        setToDoList(updateTodoList)
    }

    }
    // Delete todo
const handleDelete = (todo) => {
 const  filteredToDolist  = toDoList.filter(currentToDoListValue => ( currentToDoListValue !== todo ))
    setToDoList(filteredToDolist)
}



    return (
        <Container>
            <h1>To do</h1>
            <Container className="toDoInput">
                <Form onSubmit={ handleSubmit}>
                    <FormInput
                    placeholder='type here'
                    value={value}
                    onChange={keyboardStroke => setValue(keyboardStroke.target.value)}
                    />
                    <Button className="btn-submit" type="submit">Add to-do</Button>
                </Form>
            </Container>
            <Container className="toDoList">
                {
                    toDoList.map((todo, index) => (
                        <div className="list" key={index}>
                            <span className="text">{todo.text}</span>
                            <Button className="delete" onClick={() => handleDelete(todo)}>Delete</Button>
                            <hr/>
                        </div>
                    ))
                }
            </Container>
        </Container>

    );
}

export default App;

```
And just a piece of css:
```css
.App {
  text-align: center;
}

.btn-submit {
  margin: 1rem;
}

.list {
  max-width: 80vw;
}


.delete {
float: right;
}
```
Github Graduation: Queuey
Tags: octograd2020
Published: 2020-05-21 16:38:08

[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:
## Queuey - Crowd Vote DJ Web App
A web app for HS students to vote for songs to be played on the cafeteria loudspeakers. The app server then coordinates the music, connected to the speakers.

[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
NodeJS, Websockets, jQuery, ExpressJS


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
TIL about tree
Tags: tree, microlearning, commandline, todayilearned
Published: 2020-05-02 08:02:43

---
title: TIL about tree
published: true
description: While starting to rebuild Git, I learned about `tree`
tags: tree, microlearning, command_line, TIL
series: Learning while Doing
cover_image:
---

_This is a walk-with-me-while-I-do-things series, I'm going to tell you what I learned while I'm learning_

Yesterday I purchased [Rebuilding Git](https://shop.jcoglan.com/building-git/) by [James Coglan](http://jcoglan.com/) and today I set up for Chapter 1. I already learned something new on page 4 📖

`tree` is a command originated in MS-DOS (apparently) that has been ported to *nix systems. 
By running it in the terminal, it draws for you a graphical recursive representation of the content of the current folder and its children (files and directories), and prints the number of files and/or directories listed.

It might not come with your OS, it is a program on its own. If you are on a Mac and using [homebrew](https://brew.sh/) like me, just type
```
brew install tree
``` 

More info [here](https://linux.die.net/man/1/tree) and [here](https://vitux.com/linux-tree-command/)
Launching my very first VS Code theme: Nevermore
Tags: theme, vscode, opensource
Published: 2020-05-21 16:35:15

I usually stick with a theme that I like for a while. From Atom's One Dark to Dracula to, more recently, the Material Theme. And, for the most part, I liked how the themes looked, and besides changing the editor font-family, I didn't change any of the theme settings.

Despite that, creating a theme has been an item on my bucket list for a while, so I decided to give it a try.

I can't thank [Sarah Drasner](https://twitter.com/sarah_edo) enough for her fantastic tutorial on [Creating a VS Code Theme](https://css-tricks.com/creating-a-vs-code-theme/). The tutorial was my home page for the past few days while I worked on my version.

The tutorial is complete and explains everything from creating your Microsoft Publisher account (required to publish your extensions) to using an excellent generator to bootstrap your extension and her insights on the research she did for choosing the correct colors for the theme.

I highly recommend that you check the article if you intend to develop your theme.

## Theme appearance

The theme is a dark one, which uses a very dark shade of gray as the primary background color, the main accent colors are purple and blue, while lighter shades of gray are used for the primary foreground colors.

The theme has basic terminal colors support, which the Git status also uses.

I've created a basic CodePen with all the colors I used while creating the theme, check it out: [Nevermore Theme colors](https://codepen.io/cassiocardoso/details/yLYxNZb).

## Design decisions

The main inspiration for the theme was the poem: _The Raven by Edgar Allan Poe_. It inspired me to create the dark basis and setting the primary accent colors. But I needed some lighter colors for some tokens to get enough contrast. Having too darks fonts everywhere would make the eyes tired faster, that's where the lighter shades of the accent colors come into play.

Another decision of mine was to use italics to highlight some code tokens. I chose that because my current font [Dank Mono](https://dank.sh/) looks so good in italics that I tried to use it as much as possible. But I'm aware that not everyone uses or likes it. Therefore I also created a **no italics** version of the theme.

## It's live. What comes next?

I created the theme mainly for myself and as a creative exercise, but now that I launched it as an open-source project, I intend to maintain and keep improving it in the future.

I am sure there are some issues, especially with supporting languages that I'm not currently using, so I would love feedback and ideas on how to improve on these areas.

If you want to try the theme, you can get it for free on the Visual Studio Marketplace by [clicking here](https://marketplace.visualstudio.com/items?itemName=cassiocardoso.nevermore).

To file an issue or contribute to the project, check the [GitHub repo](https://github.com/cassiocardoso/nevermore-theme).
My First Angular App
Tags: octograd2020, angular, api
Published: 2020-05-21 16:35:05

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

## Covid-19 Dashboard


## Demo Link:
http://novelcoronavirus19.netlify.com/
 

## Link to Code:
https://github.com/bratinkundu/Covid19-angular

[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 built this project using Angular/cli and used some open source api for collecting the data. I tried to cover most of the topics of Angular that I had learnt till that time. This app will help you with providing the data of Corona Virus all over the world and also country wise. It also has a special page for discovering the statistics of cases in India and also the district wise data. I have also used chart.js for making the dynamic chart for a better experience.


The project is live on the above mentioned link. Do check it!!

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
onQueue
Published: 2020-05-21 16:30:05

## My Final Project
onQueue: onqueueplayer.web.app

## Demo Link
https://www.youtube.com/watch?v=uQor8VXAzY8

## Link to Code
{% github https://github.com/purdueapp/onqueue %}

## How I built it
- ReactJS
- Spotify Web Playback SDK
- SocketIO
- NodeJS

## Additional Thoughts / Feelings / Stories
Spotify recently came out with a group session feature which has made our application completely useless. 🙃

[Final Note]: It was a good learning experience
UI Components and Libraries for React, Vue, Angular
Tags: react, vue, angular, javascript
Published: 2020-05-21 16:17:43

UI Components & Kits, React UI Libraries, Vue UI Libraries, Angular UI Libraries

<a href="https://github.com/bradtraversy/design-resources-for-developers" target="_blank">https://github.com/bradtraversy/design-resources-for-developers</a>
<br>

<h3> 🔥follow me to get new design updates…</h3>
Sentiment Analysis of Tebak Gambar Game's Reviews
Tags: python, sentimentanalysis, college
Published: 2020-05-21 16:03:10

Machine Learning subject was taught by Mrs. Helen and Mrs. Intan. When I was taught by Mrs. Intan, it was fun like I felt before in Soft Computing subject classes. Mrs. Helen was being Mrs. Intan's substitution because Mrs. Intan was pregnant. She was actually nice but I didn't like how she taught us. It's too slow and I didn't understand the slides that she used. She was a new lecturer in my department but she already had a lot of experiences in things like this, even more than Mrs. Intan I guess.

The midterm test was made by Mrs. Helen and it was very difficult damnit. I couldn't answer the theoretical questions and I couldn't finish the mathematical questions because of the time limit. There was also the practical midterm test which was the project that I will tell here. She wanted us to make a simple NLP program and present it to her team by team. One of the NLP implementations was sentiment analysis and I used that as my project. My team consisted of Iyon, Kevin, and me. We were completely stupid on this kind of thing but I suggested to find a simple project from Github and used the different data. The project of my team was Sentiment Analysis of Tebak Gambar Game's Playstore Reviews like the title of this post. Tebak Gambar was one of the games in Google Playstore and we used the user reviews for analysing if this game was good or bad based on the user reviews. We were lucky to get some good sentiment analysis codes in Python but the different data that we built wasn't compatible with the codes.

I didn't understand why but there was always a kind of bug that made our data couldn't be analysed perfectly. The codes were perfectly fine with the sample data but when we used the different data we failed. We realised this failure on the day of our presentation time so we rescheduled the presentation to Mrs. Helen. We still didn't manage to fix the codes and Mrs. Helen asked us a lot of ambiguous questions to see if we understood the codes or not. Too bad because there were some codes that we couldn't explain, we were asked to present the program again in the next chance.

In the second chance of presenting our program, we tried to hide the bug. Of course Mrs. Helen would find it anyway because she gathered all programs that were made by the students but whatever. As long as we could pass the presentation we would be free. We could say that's the bug and we couldn't fix it. Go take a look at our program on [my Github](https://github.com/realicejoanne/ml-project1)!
🔥 Shortlisted resources for a developer by 
 GitHub users
Tags: design, webdev, css, html
Published: 2020-05-21 16:10:33

<h2>Curated list of design and UI resources</h2>

Stock photos, web templates, CSS frameworks, UI libraries, tools and much more

<a href="https://github.com/bradtraversy/design-resources-for-developers" target="_blank">https://github.com/bradtraversy/design-resources-for-developers</a>
<br>
<br>

<h3> 🔥follow me to get new design updates…</h3>
As a motive to improve my GPA, I built a GPA calculator
Tags: octograd2020, devgrad2020, githubsdp
Published: 2020-05-21 16:09:12

## Helwan-GPA
So my university is called Helwan, we sometimes joke about it and call it `Hellwan` as the weather is just hot as Phoenix, AZ in a hot summer - except in Hellwan it's like that all year but January. 


## Demo
 [Here is the demo](https://ahmeed2m.github.io/helwan-gpa/)

## The Repository 
{% github https://github.com/Ahmeed2m/helwan-gpa %}

## How I built it 
[Note]: # (what's the stack? did I run into issues or discover something new along the way?)
I built it using a new (amazing) technology I've just learned last year, ReactJS. And as I learn more and more into react I feel like this project evolves with me along the way.  

The GitHub Student Developer pack enabled me to improve my ReactJS and JavaScript skills a lot with all the awesome services GitHub offers. I've used FrontendMasters access from the pack to learn something new everyday!

Another thing that enabled me to show case the project is the Github Pro access within the pack. I used github pages to host my React application in more than one project. It's so amazing. And I'm planning to use and learn more services that are being improved everyday from the github team like GitHub Actions. I've been looking for a simpler way to do CI and GH has the answer for that too, just like it has for everything a developer needs.

## Why I built the app?
My gpa grade was `B+` last year and so close to be an `A` so I figured I should simulate future semesters and see how much of a grind I need to pull off to make it happen. (On a side note, if all things go alright I will be graduating with an `A` this semester, yay!)
While there are many GPA calculators out there and I could have used one of them, but where's the fun in that? specially that I was learning reactJS at the time so it was the perfect opportunity to build one.

## Thoughts
With GitHub and the opensource community I'm literally learning something new and cool everyday. I see new approaches to solve problems. I can see how software engineering is done in some amazing companies and learn from it to improve my practices.

So I would like to thank all the folks over at GitHub for bringing us this amazing platform.
Which features does PyQt possess that Tkinter lacks? 
Tags: python
Published: 2020-05-21 16:07:44

Both PyQt and Tkinter are GUI modules for <a href="https://python.org">Python</a>, but PyQt comes with additional features like networking, databases etc.

PyQt is a binding for <a href="https://qt.io">Qt</a> is probably the best cross-platform interface toolkit available right now, Tkinter may give you some troubles here.

If you don't know Python yet, you should <a href="https://pythonspot.com">learn Python</a> before trying to make GUI apps with Python.

## Look and feel

PyQt (Qt) is stable, mature, cross-platform and completely native. Tkinter generally looks like a few decades ago.

Take a look at these calculator applications, the first one in tkinter and the next one in pyqt.

Tkinter look and feel:

![tkinter calculator](https://dev-to-uploads.s3.amazonaws.com/i/jnxg9rawc62rt5rmlfkf.png)

PyQt look and feel:

![pyqt calculator](https://dev-to-uploads.s3.amazonaws.com/i/uexv078nlasqt94jxqre.jpg)

PyQt can adapt to the style of your operating system:

![pyqt](https://dev-to-uploads.s3.amazonaws.com/i/ivoiz3cr5ujt11hwb40w.png)

## Widgets

For small apps Tkinter can be a good choice, but it comes with a limited number of widgets. PyQt comes with many widgets and a <a href="https://pythonbasics.org/qt-designer-python/">designer</a>.

PyQt is supported by the Qt company, so it keeps getting more and more features. Tkinter has had the same number of widgets for over a decade.

## Code

PyQt uses a signal-slot system that takes some time getting used to. Tk works on an old fashioned callback system. 

For PyQt there's a lot more learning resources available than Tkinter. But it has a steeper learning curve, Tkinter is very small so easy to learn.

Here are some resources to learn PyQt:

* <a href="https://gumroad.com/l/pysqtsamples">PyQt course and book</a>
* <a href="https://pythonprogramminglanguage.com/pyqt5-hello-world/">Hello world example</a>
* <a href="https://pythonpyqt.com/contents/">Collection of examples</a>

To learn Tkinter:

* <a href="https://docs.python.org/3/library/tkinter.html">Tkinter on Python docs</a>
* <a href="https://pythonbasics.org/#Tkinter">Tkinter examples</a>
Classification of Movie Reviews in IMDb
Tags: jupyter, machinelearning, classification, college
Published: 2020-05-21 16:07:38

Machine Learning subject had two projects to do. The first one was for the midterm score and now I will explain the final project. As the title says, this project is about Classification of Movie Reviews in IMDb using Machine Learning's CNN Method. It's too long so I cut it for the title of this post.

To be honest, I didn't really help much in this project development. I already gave up. I didn't have any clue about Tensorflow shits. At first, I wanted to use the Rotten Tomatoes data since I found a good source code from Github but because my teammates Kevin and Iyon didn't understand how to operate python and other requirements needed, we changed into IMDb data and used [Google CoLab](https://colab.research.google.com/) as the compiler. This had been explained in [Tensorflow Tutorial](https://www.tensorflow.org/tutorials/keras/text_classification_with_hub#download_the_imdb_dataset) so it wasn't hard for us. So please check the README document if you want to reuse my project. Here's the [Github repository link](https://github.com/realicejoanne/ml-project2) by the way.

Well I'm glad everything's okay with the program not like the midterm one. We were already messed up for the midterm score so we wanted to give our best in this final project. I was perfecting the paper while Kevin and Iyon focused on the program development. Thanks to Faizin too who helped us to compile the program.

There's nothing to say anymore about this project LOL sorry. Ah yeah I just realise this is the last project in my college life. I will face the thesis project now.