teleren/devto huggingface dataset:
How about an open source hiring platform ? 
Tags: showdev, devjournal, opensource
Published: 2020-04-04 16:39:03

---
title: How about an open source hiring platform ? 
published: true
description: Another thing I just ended building due to Covid-19
tags: showdev, devjournal , opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pdorkp4uikcrg0e6d7kb.png
---


Yeah yeah, another hiring platform , we've got so many , why would you build another? and it looks so crappy, why would anyone use it?

Will answer all of that, give me a sec! 

Now, Let's see. Click on the link below to get to it. 

[HireMe](https://hireme.barelyhuman.dev/)

## What's different!?

Nothing actually, its a lot worse than most of the sites *at the moment*.
Reason being, that I spent only a few hours to build this monstrosity. 

## Why would I use it?

You don't have to, I built it because of all the people that have been getting layoffs from their employer due to the recent events and I thought it'd be nice to have another platform for them to try out on.

And since I want people to actually get in touch with the candidate instead of just judging and throwing away a profile based on what they see written on the profile.

I know it saves them time to filter out unneeded profiles but then you miss out on candidates that might be worth the time. This is pretty opinionated so let's not get into a huge debate about it, cause at the end of the day I'd still apply for a job which states 5 years of experience even when I hardly have 3.


## You really think huge companies would get on it?

I don't know, I don't have that expectation, not when I haven't added all the features that I think the platform should have. It's an MVP , enough to get 2 people connected. There's no email verification so yeah, I can have huge amounts of junk signups by morning tomorrow. Thus, pushing people from actually even using it. 

Some might even say I built a platform that's built for spammers to abuse. While I do realize that these issues exist. I'm still throwing it out and will be working on improving it as soon as I can.

But still, 
The point of its existence is to help people out, now whether people use it for the reason it was built or make it junkyard, it's on them.

I'll keep improving the site as I get more and more time, but for the time being, as I need Iron Man playing in the background to work at full speed. This is going to be it. 

People are allowed to raise issues and send PR's.

It's open source for a reason!!

Update: The App now has Magic Link based login and signup, but sendgrid seems to have a heavy loaded queue due to the twilio hackathon etc, etc so I don't think the emails are getting delivered at the speeds that they should. 
Will shift to nodemailer later. The UI has been beautified a little bit too. If that mattered

Update: Sendgrid servers seem to be back to normal and the app's login is now functional.
30 day leetcoding challenge - Day 4 - Move Zeros
Tags: leetcode
Published: 2020-04-04 16:25:44

    //One pass Time O(n) space O(1)
     public void MoveZeroes(int[] nums) {
        
        if(nums == null || nums.Length == 0)
        {
            return;
        }
        
        int temp = 0;                
        int nonZeroIndex = 0;
        for (int i = 0; i < nums.Length; i++)
        {
            if (nums[i] != 0)
            {
                temp = nums[i];
                nums[i] = 0;
                nums[nonZeroIndex] = temp;                
                nonZeroIndex++;
            }
        }

        
    }
Custom web search with Alfred on your Mac
Tags: productivity
Published: 2020-04-04 16:19:38

# Custom web search with Alfred on your Mac

You can create a custom web search with Alfred (Spotlight on steroid) without a Powerpack upgrade.

- Show Alfred preferences - press `⌘ + Space` (or your custom shortcut) and type Alfred ![Searching for Alfred preferences](https://dev-to-uploads.s3.amazonaws.com/i/clylqcqiw1x2eri44n2b.png)
- Go to the **Features** tab and select **Web Search** from the side menu ![Alfred Web Search list](https://dev-to-uploads.s3.amazonaws.com/i/89lgfktu98pah4jcnonu.png)
- Click on **Add Custom Search** button on the bottom right corner
- Fill the desired data and click on **Save** button

  ```markdown
  Search URL: https://developer.mozilla.org/en-US/search?q={query}
  Title: Search MDN for ‘{query}’
  Keyword: mdn
  ```

  You can also drop a custom icon if you want. Mine is from this [link](https://media.prod.mdn.mozit.cloud/attachments/2013/11/15/6457/5e0f6aa96fb8e4593f143aa803576698/mdn_logo_only_color.png)

  ![Add Custom Search for Alfred](https://dev-to-uploads.s3.amazonaws.com/i/9u8kbbwvag6krs0jzh9g.png)

- Open Alfred app
  Press `⌘ + Space` and type e.g. **mdn ternary operator** ![Working example (mdn)](https://dev-to-uploads.s3.amazonaws.com/i/mxgjb1ddx6h4nvevw0a8.png)
- The result will be like this ![The result from the search query](https://dev-to-uploads.s3.amazonaws.com/i/m5u92ie1w1s1emojbyuk.png)

## Custom Searches (from Alfred documentation)

Custom searches allow you to set up search queries for sites you use regularly but are not included in Alfred’s default searches.

Find out the search URL on the site of your choice, then replace the query with {query} in curly brackets. Use the test search to ensure your search works as expected then click “Save” to add your new query.

## Custom Search fields (from Alfred documentation)

**Search URL**: This is where Alfred goes when you use the keyword that you have assigned to this custom search. {query} is what you want to search for in that specific application or website.

**Title**: What is displayed in the results when you use your keyword.

**Keyword**: The keyboard shortcut that you want to use to call up this custom search.

**Encode query using UTF8**: This option helps if you’re using non-standard characters. Try ticking it if your query didn’t work the first time.

To hide a custom search you no longer need, either uncheck the “Enabled” box or select the custom search row and press backspace to delete it.

For more details, take a look at our [tutorial on creating your own custom searches.
](https://www.alfredapp.com/help/features/web-search/custom-searches/)

<!-- ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fz4908j6xssif95aeutf.png) -->
The Beginner's Guide To React: Styling React Component with className and inline Styles
Tags: react, beginners, webdev
Published: 2020-04-04 16:18:24

# **Inline Styling**
To style, a React element we need to pass an object instead of a string to the ``style`` attribute.

> Note: The key of an object must in **camelCase** and the value is usually a string.

**Example**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const style = {
        display: "inline-block",
        fontFamily: "sans-serif",
        margin: "24px",
        padding: "4px 8px",
        backgroundColor: "#1a202c",
        color: "white",
        borderRadius: "8px"
      };

      const element = <h1 style={style}>DEV</h1>;

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

**Output**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1586016631/the-begineer%27s-guide-to-react/sqmoujimg4wtspbf5j0x.png)

#**CSS Stylesheet**
You can write your own CSS styles in a separate file, just save the file with the **.css** extension and add it to the ``head`` tag.

> Note: But here we are using **[tailwindcss](https://tailwindcss.com/)** framework.

```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const element = (
        <h1 className="inline-block m-6 px-2 py-1 rounded-md font-bold text-white bg-gray-900">
          DEV
        </h1>
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>
```
**Output**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1586016631/the-begineer%27s-guide-to-react/wmv1pxdi3dfmsscxlemy.png)
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-04-04 15:52:53

day 26/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today still learning about provider, change notifier, alternative symtax like : consumer, changeNotifier.value
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Data structures can make or break your coding interview
Tags: datascience, python, tutorial, career
Published: 2020-04-04 16:18:07

Understanding data structures is a key skill for being a software engineer, so it makes sense that you can expect to use them in your technical interviews. Often times, using the correct data structure can make the difference in getting the job or not. 

We made a video on some key data structures you need to know for your code interviews, including examples of when you should use each data structure and a links to them in Leetcode for practice. 

This tutorial goes into...

Arrays
Linked lists
Stacks/queues 
Hash tables
Heaps
Binary trees

Happy coding! 

https://www.youtube.com/watch?v=K_ZuEy9_W_E
📜 Git Cheat-Sheet [infographic + pdf]
Tags: beginners, git, github, inthirtyseconds
Published: 2020-04-04 16:17:46

**git** is an indispensable tool for all breeds of developers. I have compiled a tiny cheat sheet for common git commands. There's a link to a pdf version at the end of this post.

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

> Hey! Thanks for Reading!
📁 [pdf version](https://github.com/godcrampy/cheat-sheets/tree/master/git) of this cheatsheet
⭐ All my cheat-sheets will be posted on this [repo](https://github.com/godcrampy/cheat-sheets/)
😄 Have a wonderful day!
Creating Responsive D3 Chart using ReactJS
Tags: javascript, react, d3
Published: 2020-04-09 11:59:18

---
title: Creating Responsive D3 Chart using ReactJS
published: true
date: 2020-04-04 16:02:00 UTC
tags: JavaScript,React,D3
canonical_url: https://www.rajeeshcv.com/2020/04/04/react-d3-responsive-chart/
---

This post shows how to create a responsive chart using [D3](https://d3js.org/) and React.

Here is demo URL [https://i5u7r.csb.app/](https://i5u7r.csb.app/) to play with and it looks like this

{% youtube fefdzyL6UzY %}

Building D3 chart requires `width` and `height` values upfront, this helps D3 to map data points to an `x`, `y` coordinate on the SVG canvas. In this post, we’re creating a simple line chart with x-axis and y-axis and it resizes when the browser window is resized and axes ticks are updated based on the available width and height.

First, we need a way to get `width` and `height` values and it should update when the browser window is resized. For this, I’m creating a custom resize hook called `useResize`, which returns the size of HTML element passed to it.


```js
function useResize(ref) {
const [state, setState] = useState();
  useEffect(() => {
const getSize = debounce(() => {
if (!ref || !ref.current) {
return;
      }
const width = ref.current.offsetWidth;
const height = ref.current.offsetHeight;
      setState({
        width,
        height,
      });
    }, 1000);

window.addEventListener("resize", getSize);
    getSize();
return () => window.removeEventListener("resize", getSize);
  }, [ref]);

return state;
}

```

`useResize` hook subscribes to `resize` event and uses `offsetWidth`, `offsetHeight` properties on the HTML node to get `width` and `height` respectively.

> Make sure `getSize` method is not called frequently to reduce the number of updates. Here, I’m using `debounce` helper function from `lodash`.

In my chart component, `ref` of my root element is passed to `useResize` hook to get its size.

```jsx
const LineChart = props => {
  ....
const rootRef = useRef(null);
const size = useResize(rootRef);
  .....
return (
    <div className="chart-area" ref={rootRef}>
      .....
    </div>
  );
};

```

Once we have this in place, implementing a line chart is straight forward. However to make the axes responsive, i.e. change its tick based on the available size. Pass a ratio based on `width` or `height` to the `ticks` method of both axes.

```js
const { width, height } = size;

const xAxis = d3
  .axisBottom()
  .scale(xScale)
  .ticks(width / 100); // I've hard coded 100 here, you can change it based on the no:of ticks required
const yAxis = d3
  .axisLeft()
  .scale(yScale)
  .ticks(height / 50); // I've hard coded 50 here, you can change it based on the no:of ticks required

```

Here is the full working demo running in [CodeSandbox](https://codesandbox.io/s/responsive-d3-chart-i5u7r)

{% codesandbox responsive-d3-chart-i5u7r %}

Hope you enjoyed this, happy coding.
Ward Discovery - Twilio Hackathon

Tags: covid19, python, twiliohackathon, aws
Published: 2020-04-04 15:59:27


Ward Discovery

What do I want to build?
I'd be building a Web App that connects hospitals that are in need of isolation wards with the providers. Think of it as an Airbnb for Isolation wards.

There might be some other hospitals, stadiums, and other public places closed down due to COVID-19. In the midst of this pandemic, the public places which are willing to set up beds/offer spaces as additional isolation wards would be able to aid the patients' need. 

This would serve as a life-saver for infected patients to ensure a smooth quarantine process.

Demo link
To be updated

Project Link
https://github.com/mrsaicharan1/ward-discovery

Progress:
    Completed:
        1. Ward Skeers & Provider Authentication using AWS DynamoDB
        2. Ward ID generation and basic layout for available wards



How I built it (what's the stack? did I run into issues or discover something new along the way?
Technologies would include Flask, MongoDB, HTML, CSS.
AWS Elastic Beanstalk for deployment.

Additional Resources/Info
The Novel Corona Virus has transformed into an epidemic that has affected every aspect of life across the globe. Almost every country is under strict lockdown and the number of cases has been plunging. Due to this, there is a major shortage of isolation wards in hospitals.

https://www.thejakartapost.com/news/2020/03/18/erick-thohir-to-turn-soe-owned-hotel-into-isolation-ward-for-covid-19-patients.html

https://www.thesun.co.uk/news/11177679/coronavirus-britains-empty-hotels-will-be-turned-into-makeshift-hospitals-to-help-nhs-cope/

https://edition.cnn.com/travel/article/hotels-turned-hospitals-coronavirus/index.html

Hackathon Home Page
https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8
Copy a string representation of the specified object to the clipboard with Chrome DevTools
Tags: javascript, webdev, productivity
Published: 2020-04-04 15:41:35

**TL;DR**: If you want to copy a string representation of the specified object to the clipboard, you can use a [Command-Line API](https://developers.google.com/web/tools/chrome-devtools/console/utilities) function `copy()`.

## Exercise

Go to [WeAreDevelopers World Congress Speakers](https://www.wearedevelopers.com/events/world-congress/program/speakers/) website, open the developer tools and follow the code bellow

```javascript
// NodeList of document's elements that match the selectors
const speakers = document.querySelectorAll(
  ".speakercolumn .title-heading-left"
);

// Create an Array from NodeList, because NodeList is not iterable with `map()`
const speakersArray = Array.from(speakers);

// Iterate through `speakersArray` to get `textContent` from every speaker (item of array)
const speakerTextContent = speakersArray.map((speaker) => speaker.textContent);

// copy the final result to clipboard
copy(speakerTextContent);
```

```javascript
// The same function as above but without constants
copy(
  Array.from(
    document.querySelectorAll(".speakercolumn title-heading-left")
  ).map((speaker) => speaker.textContent)
);
```

That’s it. Pretty simple right? Thanks for the reading.
Curated List of Data Annotation Companies
Tags: machinelearning, datascience, dataannotation
Published: 2020-04-04 15:32:07

After sharing a list of tools and frameworks around data annotation I decided to also collect and maintain a [list of data annotation companies and service providers](https://data-annotation.com/list-of-data-annotation-companies/). 

Quite often we don't want to spend hours in classifying images, drawing bounding boxes or segmentation maps. Since there are plenty of companies focusing on outsourcing these cumbersome tasks it often makes sense as an ML engineer to use these services and spend your own time on model training and optimization.
Commit secrets to Git (encrypted)
Published: 2022-12-09 14:09:17

---
title: Commit secrets to Git (encrypted)
published: true
date: 2020-04-04 15:27:31 UTC
tags: 
canonical_url: https://blog.niradler.com/commit-secrets-to-git-encrypted
---

As part of the covid-19 extra free time, I'm learning google cloud and terraform.

My first experiment was to deploy a simple docker file to cloud run service and to set up a custom domain.

When I got the results needed, I wanted to commit the files to Github, but I've found out that the terraform files can expose secrets. To avoid using a third party solution, I decided to use a tool to encrypt the files before committing. I looked for a simple solution, self-contained and portable, so I decided to create my own solution.

[git-secrets](https://github.com/niradler/git-secrets) - simple npm package that can be used with husky (git hooks), to transparent encrypt and decrypt files in your repo.

Setup:

```
npm i -S git-secrets husky

  "scripts": {
    "start": "node src/server.js",
    "infra:init": "terraform init",
    "infra:plan": "terraform plan",
    "infra:deploy": "terraform apply",
    "infra:destroy": "terraform destroy",
    "secret:init": "./node_modules/.bin/git-secrets init",
    "secret:hide": "./node_modules/.bin/git-secrets hide",
    "secret:reveal": "./node_modules/.bin/git-secrets reveal"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run secret:hide && git add .",
      "post-commit": "npm run secret:reveal"
    }
  },

npm run secret:init

```

Now, add files you would like to encrypt before committing them to the config file.

.git-secrets (can be any other file by setting env variable GIT\_SECRETS\_CONFIG)

```
terraform.tfstate
variables.tf
secrets.json

```

The next step is to choose your secret password and pass it to git-secrets. You can pass the key by cli param (--key=secret), env variable (GIT\_SECRETS\_KEY), and by creating the key file (make sure you add this file to .gitignore, filename=.git-secrets.key)

The final step is to test all our configurations, commit the changes we just added and check the files on GitHub to see the result.

- _disclaimer: this is a work in progress and not safe for production or enterprise projects, but can do the trick for self-projects when the risk is low._
Houston Animal Cruelty and Rescue SPCA
Tags: houstonanimalcruelty, spca, animalrescue
Published: 2020-04-04 15:26:14

Welcome to purpose for all the animals
Houston Cruelty and Rescue SPCA
We fill in as a critical animal security and safety relationship within the USA. With extra than twelve activities and organizations inside the USA. Which include the assessment and evasion of mercilessness, the reaction to destruction, and significantly extra.
https://www.houstonspca.org/cruelty-and-rescue/
A voice for the voice beneath a hundred years earlier. 

Houston Animal cruelty and rescue SPCA serves our social event as a terrific animal supporter. Nowadays, we easily save a good sized variety of animals reliably and discover homes that fondness them. Allow simplest 24-hour animal ambulances within the district discover extra than 6,000 occurrences of viciousness constantly and input the ability in an extremely good association with fourth-12 month’s masters.
Our guarantee 

We remain by our main goal to advance and regard all creatures and to scrub them of anguish, misuse and abuse, and gladly keep our creatures in cherishing homes or noteworthy spots.
CONTACT US
7007 Old Katy Road
Houston, TX 77024

(713) 869-(7722)
Fwitter android app v1.0.4 is released on play store.
Tags: flutter, fwitter, twitterclone
Published: 2020-04-04 15:08:48

A Fwitter is a working Twitter clone written in Flutter using firebase features like auth, realtime database and storage.

## New feature 

* User sort feature added on the user search page.
* Pull to refresh added on the search page.
* Newest tweet will be shown first in tweet list.
* Newest comment tweet will be shown first in the comment tweet list.

App link:- https://play.google.com/store/apps/details?id=com.thealphamerc.flutter_twitter_clone

Source code:- https://github.com/TheAlphamerc/flutter_twitter_clone

Work progress status:- https://github.com/TheAlphamerc/flutter_twitter_clone/projects

## Contributing

If you wish to contribute a change to any of the existing feature or add new in this repo,
please review our [contribution guide](https://github.com/TheAlphamerc/flutter_twitter_clone/blob/master/CONTRIBUTING.md),
and send a [pull request](https://github.com/TheAlphamerc/flutter_twitter_clone/pulls). I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.

## Project Created & Maintained By

[Sonu Sharma](https://github.com/TheAlphamerc) ([Twitter](https://www.twitter.com/TheAlphamerc)) ([Youtube](https://www.youtube.com/user/sonusharma045sonu/)) ([Insta](https://www.instagram.com/_sonu_sharma__))
Fwitter android app v1.0.4 is released on play store.
Tags: flutter, fwitter, twitterclone
Published: 2020-04-04 14:58:35

A Fwitter is a working Twitter clone written in Flutter using Firebase auth,realtime database and storage.

#### New feature 

* User sort feature added on user search page.
* Added pull to refresh on search page.
* Newest Tweet will show first in Tweet list.
* Newest comment tweet will show first in comment Tweet list.

App link:- https://play.google.com/store/apps/details?id=com.thealphamerc.flutter_twitter_clone

source code:- https://github.com/TheAlphamerc/flutter_twitter_clone

Work progress status:- https://github.com/TheAlphamerc/flutter_twitter_clone/projects
Idea #1 Shortcomings of mobile and twilio to the rescue
Tags: twiliohackathon
Published: 2020-04-04 14:53:28

What to do when your phone is switched off, losing battery or bad signal? Who you gonna call or rather how is anyone going to call you? 
With a background phone service that is able to detect when your phone battery is running low, losing signal etc and then communicating with a back end server to let twilio take over who can then listen for when your phone is receiving text or calls. 
I think this idea would be fun to implement and learn about background services and the telephony network.

Will this solution work?
As yet I am unsure but believe that twilio would be the best bet for integrating the phone service, back end and phone communication together.

Will it even work?
As yet this is the question I want answered. There must be some backup for when someone's phone is switched off surely.