teleren/devto huggingface dataset:
How I Got A Remote Job As A Frontend Developer
Tags: remote, career, productivity, job
Published: 2020-05-22 05:20:14

Once again,hello guys and today I will be sharing how I got a remote job as a frontend developer .I stay at Nigeria where I build petty web applications for open source projects. It wasn't easy finding a job over here so I decided to find a remote job to keep me busy.I'm a workaholic 😊😊.
So during my search for remote jobs I found a website that listed about 400 fully remote jobs from different companies and organization and then I knew I hit the jackpot 😎😎.
Here is The link to the website:
https://virtual-possibility.com/fully-remote-companies/
Later on I applied at 8 remote companies for 10 different roles thought it could work for me but it never worked out,I ended up getting rejection emails on top rejection email.It was really frustrating and depressing until I decided to aim a particular company and put all my effort into that company so I applied with all the best I got hoping that it was enough.
Few weeks passed,while going through my mails I saw a mail from the remote company I applied for which says that I would be interviewed via  a zoom meeting at a specific date.
I was a bit happy so I started reading and doing research on commonly asked interview questions including technical questions. I did this 5 days in a row,trust me I didn't want to lose the job.
Finally all the work I put into was now on my shoulder during the interview, though the interview wasn't that long just 10 minutes of my time I figured out the interviewer was friendly and he asked me some questions like 'Why do you want to work with us', 'Can you develop mini web applications' and others.The questions weren't that hard at first till it got to a point where the questions were now tough and I had to gather all the knowledge I knew and put it into good use and answered the questions though I wasn't sure if I got some correctly.
So few days after the interview,I received another mail from the company that I am now part of their development team and should check on on the other development members to guide me through their working process and their codebase.
So I bonded with the job and I was really into it.
Thanks for reading.
My Resume Website
Tags: octograd2020
Published: 2020-05-22 05:07:27

This is a resume website that implements cookie tracking, docker, flask, and sql to name a few, and while it seems very simple, it clearly shows use of many core development technologies to standing up a web app.

## My Final Project

I made my website that has blog posts, and resume information. While it seems trivial, there are some pretty fun things including phone and email validation, slack api connection, docker, and db to store cookies.

## Demo Link

https://harsh-patel.me

## Link to Code

{% github https://github.com/harsh1498/Resume-Website %}

## Build Explanation 
This was an interesting project and definitely needs some love. Now that I have graduated, I plan to work on it more. It is a flask web app that provides information about my knowledge and also shows these technical skills via the development of the web app. It has a blog section (Which needs to be cleaned up, I didn't want to store the data in the DB but my json currently doesn't support many features.) It also has a resume section which is simple UIkit for CSS, Flask in the backend, sqlite3 for the db storing cookie and viewer info, JSON for articles and constant-ish data, Docker to containerize the app, and Nginx as a reverse proxy on a GCP compute engine. Really fun to use all these these technologies in such a simple use case and can't wait to try more fun stuff.


## Additional Thoughts / Feelings / Stories
I loved building this because it really gave me a feeling that I can stand my own web apps all on my own, full stack. It is awesome and while I ran into some issues, I am glad I learned so much. 

Thank you GitHub, and congrats to all the 2020 graduates such as myself who cannot walk due to COVID-19
Building my personal website while I was at University.
Tags: 2020devgrad, octograd2020, showdev, frontend
Published: 2020-05-22 05:05:50

---
title: Building my personal website while I was at University.
published: true
description: I just graduated from the University of Technology Sydney, and this was my final project.
tags: 2020devgrad, octograd2020, showdev, FrontEndDevelopment
---



## My Final Project!
The motivation for me creating a personal website is to show to potential employees and find a graduate job in my area. I wanted a platform to showcase some of my finest work that I have made throughout university. I went for the NextJS/Now approach for a couple of reasons. 

* It has pre-rendering capabilities.
* React was my strongest front-end framework. 
* NextJS have support for most headless CMS'.

![My new website!](https://dev-to-uploads.s3.amazonaws.com/i/8t9n36k93owezhyp153w.png)

### Tech Stack
- NextJS
- Prismic CMS
- React JS
- Now server

Some features that I've implemented on my website: 
* Dark/Light mode using React Hooks
* Styled Components to implement consistent styling and CSS in JSX.
* CSS Animations for the Gradient text, hover and responsive changes.
* Headless CMS integration with Prismic to host my images and blog posts. 
* Font-pairing with Google fonts. 
* Mobile-first design. 
* Basic SEO.
* Meets basic accessibility criteria.

Just take a look at the latest Lighthouse report: 
![Lighthouse Report on rosalie.dev](https://dev-to-uploads.s3.amazonaws.com/i/ykr1gskrn4g9vy32wgo9.png)

I'm still working on this now, but I'm pretty happy with what's on there. There's still some areas of improvement on my website:

#### Accessibility
Need to add options for alternative text, aria-labelling and a better colour scheme that is suitable for colour blind viewers.

#### Performance
I need to change the sizes of images and find a way to compress the sizes so that it can be loaded quicker on both mobile and desktop. 

#### SEO 
Although I'm not too keen on fixing SEO because this is a portfolio page, I'd like to learn more about Google Tag Manager and use tools to view metrics. I am trying to not rely on Lighthouse for the scores, but I believe there is a lot of learning to be done in this area (A+B Testing, marketing, etc).

#### Write more blogs!
I've been trying to find the motivation to write more, but I've been working a lot so when I do find the time and topic, I'll be writing more.

__I'm open to suggestions to improve my website so please, let me know in the comments!__

## Demo Link
 https://rosalie.dev/

## Link to Code
https://github.com/developerpeachy/rosiedev
My 100 Days : from Scratch into getting a job
Tags: 100daysofcode, job, javascript, career
Published: 2020-05-22 04:55:05

For the next 100 days i’ll be coding everyday until i finish my side projects and start applying for jobs .
#**background** :
I was intrested in tech for ever . So last year , i decided to start building my stack and my skills . I’ve Self-learned html , css , js , react js , node js , express js , mysql and mongodb . But the thing i didn’t have was side projects , side projects that are the key player for landing a job . Therefore , i’ll be building side projects for the 100 days to come .
#**Why 100 days ?**
**1-** I think that 100 days will be enough for me to finish the projects.

**2-** To keep my self accounted and see my progress .

**3-** Get some recognition that might help me land a job.

#**What Projects ?**
My plan is to make three projects :
###**First**, The video reverse search engine :
Have you ever used google images reverse search engine , they don’t have one for videos so i’ll be building it.
###**Second**, a multiplayer Tic Tac Toe:
It seemed cool in my mind , so yeah will be building that too.
###**Third ???**
Haven’t planned this yet . What do you suggest?
#**How ???**
**1**-I’ll be coding daily for 100 days.

**2**- I’ll be posting my daily progress on twitter. [Follow me](https://twitter.com/houssemasri)

**3**- i’ll be posting blogs here to main progress.
Email Spoofer (Written in PHP) 
Tags: php, devops, github, devlive
Published: 2020-05-22 04:21:38

#A simple PHP EMAIL SPOOFER

Usage -

Simply Host the spoofer.php
In any webserver. 
You can also use free hosting from 000webhostapp.

" Https://github.com/raghavkhanna30/emailspoofer
"

Note - I'm not responsible for the illegal use. This is only for educational purpose. 

Cheers..!!!
Organizing the behavior of even and odd in :nth-child
Tags: css
Published: 2020-05-22 02:04:31

---
title: Organizing the behavior of even and odd in :nth-child
published: true
description: 
tags: css
---

#Beginning
It is useful to decorate even- and odd-numbered elements when writing HTML, so I organized the behavior of :nth-child(even) and :nth-child(odd).

#main point
## CSS to use for display
The color of the letters is blue, and if it is an even number, it is red.

```css
.list {
  color: blue;
}

.list:nth-child(even) {
 color: red;
}

.list2 {
  color: aqua;
}
```

## First, the basics of writing.
Even elements are counted from 0 to red in the character color

```html
<ul>
  <li class='list'>0</li>
  <li class='list'>1</li>
  <li class='list'>2</li>
  <li class='list'>3</li>
</ul>.
```

! [image.png](https://qiita-image-store.s3.amazonaws.com/0/5390/d3874b96-6513-93a6-0c8f-a05030223407.png)

## The tags are the same but the classes are different
The number of siblings remains the same even if the first element is of a different class, so .list:nth-child(even) is applied to the second element

```html
<ul>
  <li class='list2'>0</li>
  <li class='list'>1</li>
  <li class='list'>2</li>
  <li class='list'>3</li>
</ul>.
```

! [image.png](https://qiita-image-store.s3.amazonaws.com/0/5390/1e1649b7-90b8-2bd8-45a6-d998ae081b0b.png)

## with another tag in between
We only see sibling elements with the same tag. If you put another tag between them, the even and odd count will be reset.

```html
<ul>
  <li class='list'>0</li>
  <p>In-between elements</p>.
  <li class='list'>1</li>
  <li class='list'>2</li>
  <li class='list'>3</li>
</ul>.
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/5390/e8702dc1-10b8-f9f5-ac8f-faaa354c1351.png)


Here is the sample code for this time
https://jsfiddle.net/kon_yu/9p8qzbjc/13/
Instagram Unfollower Bot 
Tags: octograd2020
Published: 2020-05-22 04:19:49

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

People on Instagram take a number of followers very seriously. Sometimes people follow others just to be followed back, but every time it doesn't happen as expected.

The idea behind this project is to identify the people who are not following you even when you are following them. It returns a list of users with their Instagram username.

It uses a selenium chrome driver to automate the process and is built using python.
 

#### Link to Code
`{% github Ashi-s/instagram_followers_bot %}`
[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github https://github.com/Ashi-s/instagram_followers_bot %}`)






[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Spektrogram
Tags: octograd2020
Published: 2020-05-22 04:12:29

## My First Android Application
When I first started taking Software Engineering II, the main framework we got into learning was Flutter when it came to mobile app development. The ease of use of the framework and the overall beautiful UI that could be done really fascinated me, and I'm glad we went with learning Flutter! For the final project, we were asked to make whatever we wanted, and being an audio enthusiast myself, I wanted to recreate a tool that's heavily used in the audio enthusiast community for mobile!

The gist of it is that I recreated a spectrogram analyzer tool; it's very simple in the fact that all it does is analyze an audio file you give it. The main idea is that with the generated spectrogram, you can find out whether or not an audio file is lossless (not compressed, like the file format .mp3 is)

Usually, a file is lossless if it is a .wav, or .flac, or other lossless formats, but that doesn't mean that the audio itself is lossless because an mp3 to wav conversion can be made, otherwise known as transcoding, and that is generally a pretty bad thing to do.

If you're curious and would like to learn more in technical detail about lossless audio, I could recommend the following article; it details pretty much everything you would need to know!:
`https://www.whathifi.com/us/advice/high-resolution-audio-everything-you-need-to-know`

I mainly made this app for fun and to learn some new things along the way with Flutter!

## Demo Link
`https://www.youtube.com/watch?v=6C-QkhAH8j8&feature=youtu.be`

## Link to Code
`https://github.com/dangersflow/Spektrogram`

## How I built it
I used the Flutter framework along with the FFMPEG Flutter port. FFMPEG allowed me to generate a spectrogram given an audio file relatively simply! Everything else was mostly standard Flutter libraries to save some information and to create the UI.

## Additional Thoughts / Feelings / Stories
Upon looking at my code from about a year ago at this point, I can't help but feel pretty bad about keeping everything in one file hahahaha; the structure definitely could have been better, but I feel like I have learned a lot since then. Aside from that, I feel pretty proud about it! I tend to use it myself every now and then, and a couple of my friends in the audio enthusiast community gave me feedback along the way, and in the end, it was generally positive feelings, so I'm super happy about that :)
Learning Management System
Tags: octograd2020, graduate2020, student
Published: 2020-05-22 04:02:04

Hello everyone!! So, I would like to talk about the project which I developed over a period of 20-25 days. It's a complete Learning Management System which is on par with leading educational platforms. It includes all features required for an efficient Learning Management System.

It provides separate login system for Faculties and Students. Student's dashboard allows him/her to see the analytics on the current course progress in various graphical representations. It can track the progress and efficiency of student on various factors as soon as he/she progresses in the course.

On the other hand, we have faculty logins, who can create a new course through their dashboard, host it on the platform, and easily create new tests, quizzes, lessons with just few clicks.

It is also having the capability of generating automated certificates, once a student completes the course and passes all assessments.
Reflect: a website blocker for the productive. 
Tags: octograd2020
Published: 2020-05-22 03:54:23

## My Final Project
Recently, I launched reflect: a digital wellbeing Chrome and Firefox extension that encourages users to reflect on their relationship with technology. Our mission is to help people work distraction-free with more intention and purpose.

## Demo Link
https://getreflect.app  

## Link to Code
https://github.com/jackyzha0/reflect-chrome

## How I built it
My team and I trained an NLP model using self-collected survey data using Keras. The Model API is served via Flask and deployed on Google Kubernetes Engine. CI/CD pipeline done through GitHub webhooks and CircleCI. The extension was built using Typescript. We also built the website with HTML/CSS/JS. It was an incredibly rewarding experience to create something new and learn about NLP and extension development along the way! Since we work remotely, we'd pair program a lot, teach each other various concepts and technologies, and review each other's pull requests -- each step of the process was entirely collaborative. :)
CSS Text Animation - Learn to do HTML/CSS Text Animation Effect Beginner Guide
Tags: css, animation, html, beginners
Published: 2020-05-22 03:41:19

CSS Text Animation - Learn to do HTML/CSS Text Animation Effect Beginner Guide
In this tutorial, you will learn how to do a Cool CSS Text Animation from scratch no JavaScript used, This is a CSS Animation Beginner guide for HTML - CSS Text Animation Effect...

❌❌❌❌ No JavaScript used ❌❌❌❌

You will learn :
👉 CSS @Keyframes
👉 Where to Find Cool Colores
👉 Where to find stock images
👉 How to use Google Fonts

If you guys find this useful share with your friends..........

Tutorial Link - https://bit.ly/3e9NiJE
There are other http status codes too..!
Tags: http
Published: 2020-05-22 03:09:04

When my father sees a 404 page on my computer he knows that it is some kind of an error. He usually sees that on his smartphone sometimes when the internet goes off or something else. Even my father doesn't know it is a HTTP status code for Page not found, he knows that 404 is related to that kind of problem someway.

Yes, http status codes are meant to give us detail about the status of http requests.

I came to know more about the usability of this when I started doing API development. The Http status code I was more familiar with are 404, 500, 301, 200 , 403 , etc. I never thought there are lots of other status codes too. But when I started seeing a status code '202 Accepted' in an API response I came to think more about the purpose of it for client-server communication. '202 Accepted' means the request has been accepted and the processing is being done.

We need to think that not all successful(in some sense) requests are '200 OK'. According to the result of a request the status code need to be chosen. Example, for validation errors the status code must be '422 Unprocessable Entity' and when a request fails due to the lack of a payment plan the status code need to be '402 Payment Required'.

Status codes speaks by itself and can thus make api communication more meaningful. Read the wikipedia page for more info. https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
Fix "cannot 'squash' without a previous commit" for Git
Tags: git
Published: 2020-05-22 03:04:13

Suppose you create a new codebase and you have only 2 commits. Now you want to combine the 2nd commit to the 1st commit with this command.

```
git rebase -i HEAD~1
```

However, Git cannot perform that and it returns an error message like this.

```
error: cannot 'squash' without a previous commit
```

For this case, you should try this.

```
git rebase -i --root
```
Improving Medical Image Segmentation with Augmentation
Tags: devgrad2020, octograd2020, githubsdp
Published: 2020-05-22 02:37:39

[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!)
Hello everyone, this is my first post on [dev](dev.to). I recently graduated with an MSc in Computing Science from Simon Fraser University, and I wanted to talk a bit about my Masters thesis. I worked on improving the segmentation of skin lesions from images and made two novel contributions, which were published as the following papers:

- [Mask2Lesion: Mask-Constrained Adversarial Skin Lesion Image Synthesis](https://link.springer.com/chapter/10.1007/978-3-030-32778-1_8), MICCAI SASHIMI 2019
- [Illumination-based Transformations Improve Skin Lesion Segmentation in Dermoscopic Images](https://arxiv.org/abs/2003.10111), CVPR ISIC 2020


## My Masters Thesis

[Input Space Augmentation for Skin Lesion Segmentation in Dermoscopic Images](https://summit.sfu.ca/item/20247), Simon Fraser University, 2020


## Overview of Contributions
![The two contributions of my thesis](https://dev-to-uploads.s3.amazonaws.com/i/nzmh5cocjiz8f4uygyis.png)
 

## Link to Code
[Here](https://github.com/kakumarabhishek/Illumination-based-Transformations-Skin-Lesion-Segmentation) is the code for my CVPR ISIC paper.

Thank you for reading, and [here is my home page](https://www.sfu.ca/~kabhishe/) if you are interested in knowing more about my research.
Oasis - Senior Capstone
Tags: octograd2020
Published: 2020-05-22 02:27:09

## Oasis
This project was my final project for my New Media BFA degree at Rochester Insitute of Technology. The goal was to create an interactive exhibit to be displayed at the schools yearly Imagine RIT creativity fair. But due to current events it was canceled and our team pivoted to create a more digitally centered experience.

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

Oasis is a meditation experienced that is personalized towards its user and provides a relaxing and engaging experience to help relieve stress. Through the use of a respiration belt to paint on a canvas users can see their breathing meditation come to life. Since we had to move to a digital platform the belt has been removed from the equation and an artificial breathing method has been implemented.

I highly recommend checking out the website as it has links to the application, and a more in-depth discussion on our solution.

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

## Process and Demo
https://oasis.cad.rit.edu/

## Link to Code
https://github.com/HurleyAndrew/OasisOnePager

## Behind The Scenes
This project had a few main components. A belt that measured breathing, a wall that was interactive, and an application and website to display this breathing data and either information to aid in our user's journey. We used Javascript, HTML/CSS, OpenProcessing, p5JS, Arduinos, pressure sensors, and version 2 of the Kinect. p5JS and OpenProcessing were used to create graphics based on the data coming from the Arduino and respiration belt.

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

## Additional Thoughts / Feelings / Stories
Sadly we could not show off the engineering behind the respiration belt. We hope one day we are able to let others experience our installation the way it was meant to be. It was challenging to come up with everything from scratch. Noone on the team was an engineer and commercial breathing belts retail at >$100 so we had to do some serious thinking to get our own belt working. We do however hope the digital experience is found to be relaxing and enjoyable for those who try it out.
Count Square Submatrices with All Ones - Leet Code
Tags: array, dynamicprogramming
Published: 2020-05-22 02:26:54

---
title: Count Square Submatrices with All Ones - Leet Code
published: true
description: Medium Problem
tags: array, dynamic-programming
---

# Given a _m * n_ matrix of ones and zeros, return how many **square** submatrices have all ones.

## Example 1:

```
Input: matrix =
[
  [0,1,1,1],
  [1,1,1,1],
  [0,1,1,1]
]
Output: 15
Explanation: 
There are 10 squares of side 1.
There are 4 squares of side 2.
There is  1 square of side 3.
Total number of squares = 10 + 4 + 1 = 15.
```

![Continuous Square Sub Matrices](https://i.imgur.com/sjWCYRT.png)

The trick here is to find how many squares can be formed at `matrix[i][j]`

From the image you can say that

`matrix[i][j] = min(matrix[i - 1][j], matrix[i][j - 1], matrix[i - 1][j - 1]) + 1`

In words it's the minimum of top, left and diagonal and the current square so add 1

You can solve this by recursion and checking matrix[i][j] can make a square, but it will be O(n^3)

To optimize we can use above technique, which is basically dynamic programming

## Algorithm:

1. Initialize a result matrix to add up square matrices as encountered
2. Loop through each element _matrix[i][j]_ and check the maximum square can be formed at that point
3. Add matrix[i][j] to res

Here's the code:

```js
/**
 * @param {number[][]} matrix
 * @return {number}
 */
var countSquares = function(matrix) {
	let res = 0
	for(let i = 0; i < matrix.length; i++) {
		for(let j = 0; j < matrix[0].length; j++) {
			if(matrix[i][j] == 1 && i > 0 && j > 0) {
				matrix[i][j] = Math.min(matrix[i-1][j], matrix[i][j-1], matrix[i-1][j-1]) + 1
			}
			res += matrix[i][j]
		}
	}
	return res
};
```