teleren/devto huggingface dataset:
Recipe APIs
Published: 2020-03-15 13:18:38

I recently created an app for searching Jain Food recipes. Jain food is cooked without onion, garlic, meat, or eggs. My app uses a [food api](https://blog.api.rakuten.net/top-10-best-food-and-recipe-apis-yelp-zomato-untappd-and-more/) to search and return a relevant recipes. I evaluated many recipe apis and found the following apis to be good for creating recipe based apps.

##Spoonacular API
Spoonacular API makes it possible to search more than 330,000 recipes from across the web. Spoonacular API allows developers access over 365000 recipes using this API developer can search through thousands of these recipes using natural language queries. It employs an API Key, OAuth 1, OAuth 2 and Other/Custom authentication model. It is a single purpose API with a RESTful architecture. Supports JSON, response format and JSONP, URI Query String/CRUD request format.

##Edamam
Edamam stores all the world recipes in a central database allowing users to easily search through.  Edamam API allows developers to integrate recipes and faceted recipe search into their application. It employs an API Key, App ID and Other/Custom authentication model. It is a single purpose API with a RESTful architecture. Supports JSON, response format and JSONP, URI Query String/CRUD request format.

##BigOven API
With over 3.3 million registered members, BigOven allows users to create grocery lists, import and share recipes and analyse the nutritional levels of recipes. BigOven API allows developers to access over five hundred thousand (500,000) free recipes. Providing advanced searching and sorting functionalities. It employs an API Key, HTTP authentication model and is a single purpose API, with a RESTful architecture. It supports XML response format and JSONP, URI Query String/CRUD request format.

##Webknox
Initially starting as a research project in the Royal Melbourne Institute of Technology and the University of Technology Dresden. Webknox now provides now provides access to more than 100,000 recipes. WebKnox Recipe API allows developers to integrate advanced features like classifying recipes, finding similar recipes, and price breakdown. WebKnox Recipe API is provided as a REST API using OAuth 2.0 for authentication and authorization. It supports XML, JSON response formats and URI Query String/CRUD request format. The API uses HTTP (over SSL) protocol, the HTTP GET is used to retrieve data and HTTP POST is used to create, update or delete data. Usage of HTTP PUT and DELETE is not allowed.
Google Geocoding API Overview
Published: 2020-03-15 13:07:39

Google Geocoding API is part of [Google’s developer APIs](https://console.developers.google.com) that allows developers to translate between *human-readable* location addresses to *location coordinates*. For example, your office address can be converted to its geographical location coordinates, defined in latitude and longitude. This is called **geocoding**. This API also supports **reverse geocoding** wherein a location coordinate pair can be converted to its approximate location address. In this article I will present an overview of [Google Geocoding API](https://blog.api.rakuten.net/api-tutorial-google-maps-geocoding-api/).

Google Maps Geocoding API has a freemium pricing model, so you can opt for the BASIC subscription and make 500 API calls per month.

##Endpoints
This API has two endpoints
* GET Geocoding
* GET Reverse Geocoding

The API also returns the details of address components, contained in the address_components key, starting from the street name, all the way up to the country name.

If you interface this App with the Google Maps Geocoding API’s ‘Geocoding’ endpoint, then for the address shown in the app screen, you will get this result.

You got the location coordinates of the customer which can be saved for future navigation purposes. You can also verify this coordinate on Google Maps to confirm the address.
Dark Sky API Overview
Published: 2020-03-15 13:00:27

Weather prediction is complex. There are umpteen parameters to track, whose permutations and combinations lead to thousands of possible outcomes. Thankfully, there are APIs that abstract away all that complexity behind the scenes. In this overview I will cover the basics of [Dark Sky API](https://blog.api.rakuten.net/api-tutorial-dark-sky-weather-api/).

Dark Sky Weather API is an _easy to use weather_ API to get instant weather predictions. It supports both current and historical predictions. 

##API Endpoints & Parameters
This API supports two endpoints
### __GET Forecast__
The “Forecast” endpoint fetches the latest weather prediction for a given geographical location pointed by a latitude and longitude coordinate.
### __GET Time Machine__
This “Time Machine” endpoint is similar to the “Forecast” endpoint. In addition to the latitude and longitude, it accepts a timestamp to retrieve the historical __prediction__.
###Optional Parameters
Both endpoints support optional parameters to fine tune the prediction responses from the Dark Sky Weather API.
* lang - The ‘lang’ parameters returns the data in your preferred language. You can check out the supported languages under the “API Details” tab. **This parameter is not available for the “Time Machine” endpoint**.
* extend - The ‘extend’ parameter is used to return extended results for the interval forecasts. In the case of a value ‘hourly’, the API returns the  forecast with extended prediction for the next 168 hours (7 days).
* units - The ‘units’ parameter is used to select a specific unit for the weather parameters. The “API Details” tab has more information on the supported units and their interpretation in the returned response of the API.
* exclude - Finally, the ‘exclude’ parameter is used to omit one of the data blocks from the API response, either “currently,” “minutely,” “hourly,” or “daily.” It also accepts a comma-delimited string containing more than one data block.

The requests cost $.0001 each. The API offers a free quota of 100 requests a month.
Free Weather APIs
Published: 2020-03-15 12:50:49

I am a compulsive maker who loves creating side projects. But the sad reality is that many of my ideas don't see the light of the day. So it is important for me to keep costs under check. Developing an app is not free. It takes time and resources. Deploying is costlier. I am a Rails developer, and I deploy my apps on Digital Ocean and Linode. Rails 6 apps need a $10 server to deploy. Some costs can be avoided and free APIs is one of them. I am creating a weather app and I am using a [free weather api](https://blog.api.rakuten.net/top-weather-apis/) in my development process. I researched many weather apis which are either free of have a free tier. Here is my favorite ones.

* Open Weather Map - 100 requests/day **Fast**
* Dark Sky API - 100 requests/month
* Weather by Weatherbit - 150 requests/day
* Weather 2020 - 1000 requests/day - Good for development phase. **Latency is a killer**.
* Weather by Location API - 100 requests/day
* Visual Crossing - 500 requests/month
How to build a search box in React with hooks.
Tags: react, searchbox, arrayincludes
Published: 2020-03-15 12:47:53

Below is a small gif of what we will be building. A simple search box that allows us search through a contact list. We would be using functional components rather than class based components to achieve this.

![search box in react](https://miro.medium.com/max/410/0*iVBoz1pDOlwB3qEd.gif)

Let's start!
Create a new react app using

**npx create-react-app contacts-list**

Then navigate into the contacts-list directory. Open the directory in your favorite code editor. In my case, I'm using vscode, so all I need to do from the command line is use:

**code .**

In your src directory, create a new folder called components and within that create a Numbers.js file.
Head over to your App.js file and import your Numbers.js component.
Next, we need to create a few persons that we would then pass down as props for our Numbers.js component to render.

![search box in react](https://miro.medium.com/max/1410/1*i-O_GNivvXfiLhLpDLHRMw.png)

Now, in our Numbers component, we would receive the props being passed down from App and use that to display the contacts list.

See the code below with explanations for each step added as comments.

![search box in react](https://miro.medium.com/max/1306/1*tenNQCYBYyoxryFKj3ncyQ.png
)

Finally, we return the updated information from FilterDisplay each time it’s updated.

If you’re like me and would like to break out your **Search** bar into a separate component, then read on. Let’s refactor this baby! Breaking out our search into a separate component would allow us use the same search bar in other components within our application.

First, we will create a **Filter** component, let’s call this **Filter.js** inside our components folder. it’ll take 2 props. Props for the input value and for an onChange event.
![Filter component](https://miro.medium.com/max/1428/1*eoOQkX1wDFE_ZG8qoW6klw.png)

Next, we need to refactor our **Numbers.js** component so that all it does is to render the filtered persons list. It’ll accept one prop — the list/array.

![Filter component](https://miro.medium.com/max/1408/1*31f9DLAh-C1N6O2w056WbA.png)

Recall that all our state is being managed within our App component and being passed down to our components as props.

Finally, in our App component, we will pass a stateful value to the input field in the Filter component, we would also pass a **handleChange** method that gets called when there is a change within the input field.

![Filter component](https://miro.medium.com/max/1408/1*XNGIu5xZiGe2Ba6Qr3tnXA.png)

Within our return, our **Numbers** component will always check if the input field is blank. If it’s, we render the original Persons array else we render the list based on what’s entered in the input field.

And that’s it, we’re done!
What's the best pictoral/realistic-example documentation you've seen for a code library?
Tags: discuss, codenewbie, devrel, watercooler
Published: 2020-03-15 12:46:23

---
title: What's the best pictoral/realistic-example documentation you've seen for a code library?
published: true
description: 
tags: #discuss, #codenewbie, #devrel, #watercooler
---

From my own experience, those kinds of illustrative docs really make things easier to work with and learn how to user, especially when a piece of code's rules get theorem-like.

For myself, Go's standard testing library stands out for realistic examples since a Go test can be made to reflect how the code being tested actually gets used
Top Movie APIs
Published: 2020-03-15 11:47:01

I am a movie buff and love movie trivia. APIs help third-party applications to easily integrate with large movie sharing platforms and create some cool apps. Here is my list of top Movie APIs. I evaluated movie APIs on the following:

1. API features
2. Data format
3. Price
4. Ease of Use

##IMDB
IMDb is the most authoritative information source for movie, TV, and celebrity content, trailers, casting updates, photos, trivia, industry news etc. are always constantly posted on the platform. [IMDb API](https://blog.api.rakuten.net/top-10-best-movie-apis-imdb-movie-database-unogs-and-more/) allows developers to query information about films, actors, and characters. Other important pieces of movie information like Release date, Runtime, Genre, Directors, Writers, Actors and Awards can also be accessed using this API

##uNoGS
[uNoGS](https://unogs.com/) stands for unofficial Netflix online Global Search, this platform enables users to connect to Netflix and access information

##Entertainment Data Hub API
This API is currently maintained and managed by [Internet Video Archive](https://www.internetvideoarchive.com/demo/) (IVA). This API allows developers to access metadata from video streaming platforms. The API uses HTTP methods and can return data in JSON format.
Random colour with JavaScript
Tags: javascript, beginners, todayilearned
Published: 2020-03-15 08:34:44

I've Tweet this a few days ago and it got a little attention from the community.

While you're here you might want to follow me on [Twitter](https://twitter.com/telmo)

{% twitter 1238906702763905025 %}

---

The main reason for writing this post is to explain why to use `16777215`, looks kind of a random number and can be a little misleading.

---

### Why 16777215?
If you're familiar with `RGB` (Red, Green, Blue), you know it's represented by a number from `0` to `255`, an example of a colour using RGB would look like:

```css
/* Same as #ffffff */
color: rgb(255, 255, 255);
```

Now, if we do `256 * 256 * 256` we end up with `16,777,216`, now why do we remove 1 from this value?

We want to convert into a hexadecimal format and `16777216` converts to `1000000`, while `16777215` converts to `ffffff`.

I did a little research but mainly this came from here, thanks Jacob:

{% twitter 1239022844136341504 %}

---

There are other explanations, based directly on the hexadecimal code, but I felt this one made more sense and it was simpler.

---

Happy to discuss this further and give me a shout if you think something's not right. I'm always open to learning something new. Connect on [Twitter](https://twitter.com/telmo) if you want to discuss.

Hope this makes sense to you 🔥
Tools To Help Remote Work
Tags: vscode, slack, webdev, discuss
Published: 2020-03-15 11:44:07

I wanted to share the tools we use currently while working remotely and I also am interested in hearing what others find useful so please share your secrets in the comments. ☺️

I am currently in a bootcamp at [Northcoders](https://northcoders.com/) (Manchester, UK) and so priority is on two things:
- To be able to "attend" lectures.
- To be able to continue with pair coding.

We had a trial day to test this out on Friday and we used the following.

## YouTube Live Stream
[Here](https://www.youtube.com/watch?v=YE4xwkIJtWA)'s a quick video to help you set up your own live stream.

## VS Code Live Share
Sharing your workspace with [VS Code Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) is really easy and comes super-handy for pair coding.
My partner created a shared workspace from his computer while we were both able to edit the code.
The Live Share extension marks it clearly where the other person's (or people's) cursor is and you can also have more than two people in the session - which proved to be extremely useful when we needed help from our tutors as they could also join the session.
![VS Code Live Share Example](https://dev-to-uploads.s3.amazonaws.com/i/eb5nxqtnxk9t4wwzm4uw.png)
It also allows you to share your localhost which means I could also see the code running in my own browser which made it possible to view the console/elements etc. for debugging.
A bonus (while I appreciate it's not priority): even though I was looking at my partner's code, on my screen it still appeared with the VS Code theme I used and was used to seeing, regardless of what my partner was using.

## Slack
For calling each other we just used [Slack](https://slack.com/intl/en-gb/) which is free if you only have 2 people on the call and allows up to 15 people if you pay for it.

## VS Code Live Share Audio
I have also just found an [audio extension](https://marketplace.visualstudio.com/items?itemName=ms-vsliveshare.vsliveshare-audio) to VS Code's Live Share which looks great and also free but I have personally not yet tried it.

What tools would you recommend to help remote work?

Cover Photo credit: [Fabian Mardi](https://unsplash.com/@fabianmardi)
String.Compare() or String.Contains(), best way to compare strings
Tags: csharp, discuss, beginners
Published: 2020-03-15 11:37:29

Recently, I have started working on a project and lots of time I have to deal with strings. Comparing string tokens for equality and then calling the related operation. Sometimes strings do not need to be strictly equal (L.H.S == R.H.S).

# What are the best way to compare Strings?

Choosing a correct way to compare strings based on comparing condition is a tradeoff between **String.Compare()** and **String.Contains()** function.

# public static int Compare(string string1, string string2)
Compares two string objects and returns an integer value, based on its relative position in the sort order (source https://docs.microsoft.com/en-us/dotnet/api/system.string.compare?view=netframework-4.8).

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

# public bool Contains(string string1)
Compares two strings and returns a boolean value indicating if the string contains a substring (source https://docs.microsoft.com/en-us/dotnet/api/system.string.contains?view=netframework-4.8).

Let's take an example to better understand the difference between these two functions.

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

I have a fruit list(basket of fruits) and I have decided to create fruit salad using only apples.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/258dc05qc4pcdvegntp1.JPG)

Well, this will give me apples from the basket. Now I want pineapple also from the basket.

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

This will work, But what if my list contains 1000 records and I have to look for some 10 different types of apples. Obviously, looping over 10 condition is not a solution. So here, **String.Contains()** function comes into picture.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2rsnltm04inr24ywarz6.JPG)

But be careful with what you choose! You cannot use **String.Contains()** if a string is someway not a substring of another string.

Happy coding!
Google Translate API Tutorial
Published: 2020-03-15 11:36:43

Google Translate is a powerful NLP language translation service. Formerly, it was available only as a web app to detect and translate between languages. However, Google Translate is now also available as an API. [Google Translate API](https://blog.api.rakuten.net/api-tutorial-google-translate-api/) supports over a hundred languages.

##An Overview of Google Translate API

The API is simple. It has two endpoints, “detect” and “translate”. As the name suggests, one is for language detection and the other is for translating from one language to another. It has a free quota limit of 50 API calls a day. Beyond that the cost os $0.05 per API call.

##Test Drive!

###Language Detection using Google Translate

The first endpoint is “detect”. Select the endpoint and hit the “Test Endpoint” button with the default inputs. The default input for the ‘q’ parameter is set to a text in English. The API response returns a JSON object with a key “language” whose value is set to ‘en’ which is the ISO 638 code for English. You can try the API by setting the ‘q’ parameter with any other language from the list of supported languages.

###Language Translation using Google Translate
For translation, select the “translate” endpoint and choose the ‘q’ and ‘target’ parameter, as shown. As evident, you are translating the text “Hello, world!” into Japanese. Hit “Test Endpoint”, and you should see a response within a few seconds. You can verify the translated text contained in the “translatedText” key of the JSON response by feeding it into the Google Translate web app or any other online service. You can further explore the optional parameters defined for the “translate” endpoint.

Of particular interest is the ‘model’ parameter, which accepts a value of “base” (as default, also interpreted as blank value) or “nmt” to select the underlying machine learning model to use for translation. You can try translating the same text by using both the options to see which one results in more accurate translation.

Apart from that, you can specify the format of the input via the ‘format’ parameter. By default, you pass plain text for the ‘q’ parameter, as you have seen in the example above. However, you can also pass the value as ‘html’ to indicate an HTML input text. This is a nifty feature when you want to translate a scraped HTML document from the web. In this case, you directly pass the HTML formatted data from the HTML document instead of extracting the text from HTML and passing that as plain text.

The ‘source’ parameter specifies the source language, which is set to ‘en’ by default. Since the Google Translate API is pretty accurate at detecting the language, you hardly ever have to set this.

###References
1. [Google Translate API Docs](https://cloud.google.com/translate/docs)
2. [Google Translate Rakuten Rapid API Marketplace](https://english.api.rakuten.net/collection/google-translate-api)
Let IEx greet you
Tags: elixir, functional, phoenix
Published: 2020-03-15 01:44:49

- IEx is an interactive shell for elixir
- It can be configured with .iex.exs file
- .exs extension is for interpreted code, meaning you don't have to recompile it every time you make changes to it
- IEx looks for the configuration file (.iex.exs) in your current working directory and then global (~/.iex.exs)

To let IEx greet you with `Welcome to IEx <your username>`, you have to create a `.iex.exs` file and add

``` elixir
import IO.ANSI, only: [green: 0, default_color: 0]

defmodule Helper do
  def camelize(<<first::utf8, rest::binary>>) do
    String.upcase(<<first::utf8>>) <> String.downcase(rest)
  end
end

{name, _} = System.cmd("whoami", [])

IO.puts("""

Welcome to IEx #{green()} #{Helper.camelize(name)} #{default_color()}
""")
```

To print to IEx, we can `IO.puts` but we need to get the username of the system, so we use `System.cmd` and pass in `whoami` shell command.

We want to upcase only the first letter of the word, so we will create a helper function called `Helper.camelize/1`. The function pattern matches the string using bitstring.

Now the username is camelized, I want it to have a color as well. We can use elixir's `IO.ANSI` lib for this, so we import it and only require it's two functions (`green/0` and `default_color/0`).

We call `green/0` before the username and call `default_color/0` after it because we only want the username to stay green and not the whole iex shell.
👨‍💻👨‍💻 Pair Programming in React: Rewriting Class-based Components to use Hooks
Tags: react, javascript, webdev, tutorial
Published: 2020-03-15 11:24:26

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

In the following video I work with one of my students to refactor some of his code from using class-based React components into using their functional counterparts. I hope you enjoy!

{% youtube ATdw3CXXRzk %}

Happy coding!