• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

Tathanen

Get Inside Her!
Hello. Unfortunately the person I connected with here on GAF isn't familiar with this particular API.

You can check out the API here: http://docs.intrinio.com/#introduction

Basically I have no idea what I'm doing (REST API with JASON request). I just want simple requests (e.g., Apple stock price, latest Apple news) to show on my site. If anyone here can set me up with an example I can go nuts changing symbols for other securities.

I will gladly pay hourly whatever you think is appropriate.

Do you have an account on this site? Looks like the API requires basic authorization, which is a base64 encoding of username:password. (http://docs.intrinio.com/#authentication)

Are you familiar with using a REST API at all? It looks like this is pretty bog-standard, I'd recommend installing Postman and playing around with how you interact with an API, sending some basic requests, setting headers, etc. Then on your actual site you can do it all via straight JS, or basic libraries like jQuery to make things easier.
 

Lister

Banned
Do you have an account on this site? Looks like the API requires basic authorization, which is a base64 encoding of username:password. (http://docs.intrinio.com/#authentication)

Are you familiar with using a REST API at all? It looks like this is pretty bog-standard, I'd recommend installing Postman and playing around with how you interact with an API, sending some basic requests, setting headers, etc. Then on your actual site you can do it all via straight JS, or basic libraries like jQuery to make things easier.

I don't think he's going to want to do this directly from the front end though.

You really want to send requests to a backend that authenticates and then communicates direclty with the api, then passes the results back to the front end. Unless this is an intranet application, that's the way I'd go.
 

RSTEIN

Comics, serious business!
Do you have an account on this site? Looks like the API requires basic authorization, which is a base64 encoding of username:password. (http://docs.intrinio.com/#authentication)

Are you familiar with using a REST API at all? It looks like this is pretty bog-standard, I'd recommend installing Postman and playing around with how you interact with an API, sending some basic requests, setting headers, etc. Then on your actual site you can do it all via straight JS, or basic libraries like jQuery to make things easier.

I do have a subscription to the API which gives me 100,000 calls a day.

I am not familiar with REST APIs or any APIs at all or JQuery or anything like that. I'll look into Postman. Thanks.
 

Tathanen

Get Inside Her!
I don't think he's going to want to do this directly from the front end though.

You really want to send requests to a backend that authenticates and then communicates direclty with the api, then passes the results back to the front end. Unless this is an intranet application, that's the way I'd go.

It doesn't look like this is an API that holds sensitive information, though, it's all public data. The worst thing that could happen by exposing his basic auth key is that someone might snatch it and use up his request limit. Considering that this is a free service and it's trivial to get your own account, that's probably not a real concern.
 

RSTEIN

Comics, serious business!
Well I went to upwork and hired a freelance developer. He's working on it now. I get sent screenshots of his desktop every 10 minutes... really creepy.
 

Lister

Banned
It doesn't look like this is an API that holds sensitive information, though, it's all public data. The worst thing that could happen by exposing his basic auth key is that someone might snatch it and use up his request limit. Considering that this is a free service and it's trivial to get your own account, that's probably not a real concern.

Yep, I thought he was paying for this service for some reason.
 

RSTEIN

Comics, serious business!
Yep, I thought he was paying for this service for some reason.

Yes, I am paying for the service. It's free for personal use & limited to 1,000 daily calls. I pay $350 per month for 100,000 daily calls + the right to republish.
 

Lister

Banned
Yes, I am paying for the service. It's free for personal use & limited to 1,000 daily calls. I pay $350 per month for 100,000 daily calls + the right to republish.

Yeah in that case you don't want your authentication details on the front end.
 

RSTEIN

Comics, serious business!
This is really creepy. I get a screenshot of his desktop and his keystrokes/mousestrokes every 10 minutes.
 
Amazon web docs are SHIT, utter fucking SHIT. I'm making a lambda hosted web proxy and I was having an issue because AWS microservices are complicated as all hell (ESPECIALLY their API Gateway) and have been trawling through docs for days trying to figure out why I'm violating same origin policy when the IIS iteration of this web app before never had this problem. Then I figure out there's a little checkbox for cross origin resource sharing. I would have known this if there was one single resource I could read in a night and then be able to say "alright, now I know everything about AWS API Gateway" but NOPE I've gotta muck in a clickthrough hell of two paragraph doc pages organized in a tree format spread out disparately across who knows where.
 

Somnid

Member
Amazon web docs are SHIT, utter fucking SHIT. I'm making a lambda hosted web proxy and I was having an issue because AWS microservices are complicated as all hell (ESPECIALLY their API Gateway) and have been trawling through docs for days trying to figure out why I'm violating same origin policy when the IIS iteration of this web app before never had this problem. Then I figure out there's a little checkbox for cross origin resource sharing. I would have known this if there was one single resource I could read in a night and then be able to say "alright, now I know everything about AWS API Gateway" but NOPE I've gotta muck in a clickthrough hell of two paragraph doc pages organized in a tree format spread out disparately across who knows where.

Stuff changes so often that docs are often not helpful. I've been having the same issues with Azure. It's like the last time my question was asked on SO was in 2015 and no longer relevant.
 
Stuff changes so often that docs are often not helpful. I've been having the same issues with Azure. It's like the last time my question was asked on SO was in 2015 and no longer relevant.

You'd think the legions of plucky interns they employ at these gigantic companies would be able to keep up but I often find way better documentation on open source projects than I do enterprise applications.
 

RSTEIN

Comics, serious business!
Well, the project is done. I can get the latest news for any stock ticker. He set it up for me so the code is literally ticker: AAPL, # of articles: 6 so I can just change either to get the desired results. I paid $110.
 
Getting my feet wet with Java Spring. I really am intrigued by it. I have always wanted to do something like this, so I am glad I found it.
 

Joe

Member
Are complete newbie questions OK here?

I'd like to recreate the general design and responsiveness of this table but I have no idea how...

Desktop appearance:
JX711Ggl.png


Mobile appearance:
x0shJgol.png


I tried recreating it as a basic 4-column table (image/text/image/text) but on mobile it's just not responsive and a lot of the table gets cut off from the display.

Any help here? Even just knowing what I should Google for would be great.
 
Are complete newbie questions OK here?

I'd like to recreate the general design and responsiveness of this table but I have no idea how...

Desktop appearance:
JX711Ggl.png


Mobile appearance:
x0shJgol.png


I tried recreating it as a basic 4-column table (image/text/image/text) but on mobile it's just not responsive and a lot of the table gets cut off from the display.

Any help here? Even just knowing what I should Google for would be great.

Scrap the tables, Make each item inline-block and change the width from 50% to 100% at the break point.

Watch out for whitespace b/w the elements.
 

xxracerxx

Don't worry, I'll vouch for them.
I would also suggest right-click > Inspect to get a look at what is going on with their design. Also start googling responsive grids or columns or anything along those lines.
 

GHG

Member
Are complete newbie questions OK here?

I'd like to recreate the general design and responsiveness of this table but I have no idea how...

Desktop appearance:
JX711Ggl.png


Mobile appearance:
x0shJgol.png


I tried recreating it as a basic 4-column table (image/text/image/text) but on mobile it's just not responsive and a lot of the table gets cut off from the display.

Any help here? Even just knowing what I should Google for would be great.

Others have already chimed in but if you're still struggling look at bootstrap​'s responsive grid system as an example:

http://getbootstrap.com/css/

In bootstrap terms the example above would be using "col-sm-6" (or "col-md-6") for desktop devices and then each column then becomes "col-xs-12" (or "col-sm-12") at the mobile breakpoint.

As a complete newbie I would suggest getting to grips with a framework such as bootstrap and learning the grid system inside out. It's more customisable than many people think, especially once you start using the "hidden" and "visible" classes. Once you have a good understanding of it you can then try creating your own grid system to see how far you've come.
 
I second using a responsive framework like Bootstrap or Foundation. What will take half a day to learn and figure out will save you thousands of hours in every development project.

The only frustration I have is when designers don't design to any sort of grid... just place everything willy nilly however they want on every page, so you can't even really modify the grid to fit their design. Ends up making no sense.

That design could be done with pretty quickly in Bootstrap using..

Code:
<div class="row">
  <div class="col-xs-12 col-sm-6">
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="icon-path-goes-here.png" alt="Stuff">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Break the Rules</h4>
        <p>Lorem ipsum...</p>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6">
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="icon-path-goes-here.png" alt="Stuff">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Compromise Never</h4>
        <p>Lorem ipsum...</p>
      </div>
    </div>
  </div>
  <!-- etc., just repeat this pattern down the page w/ all of your blocks of content -->
</div>

This is using a two column grid that reduces down to one column on phone-sized screens, and uses Bootstrap's built in "Media" component which has an image to the left with copy to the right. This is a sample of the first two items in your page, and you can add more <div class="col-xs-12 col-sm-6">...</div> as you need them.

In this case, the XS means that the item fills up 12 columns (100% of the width) on extra small screens while it fills up 6/12 columns (50%) on small screens and up (tablet and up basically). If you want to switch it so that it uses 12/12 on extra small, 6/12 on tablet, and 4/12 (33%) on computer and up you could do "col-xs-12 col-sm-6 col-md-4".
 
I am currently doing an exercise for an interview, and it is wanting me to create a betting page which pulls data from an API. I am still pretty inexperienced with backend development, and have little idea how to do this. Firstly it may just be my lack of experience but the link to the api does not seem to yield any data.

https://bedefetechtest.herokuapp.com/v1/

Basically this is what they have given me:

API Docs

The API is reachable at https://bedefetechtest.herokuapp.com/v1/. Note that the API does not store any data after it has returned the response.

GET /markets

Returns JSON array of bet objects.

[ {
"bet_id" : 1 , "event" : "NextWorldCup" ,
"name" : "England" , "odds" : {
"numerator" : 10 ,
"denominator" : 1 }
}, { /*repeated*/ },
{ /*repeated*/ }
]

POST /bets

Accepts JSON bet object with stake.

{
"bet_id" : 1 ,
"odds" : {
"numerator" : 10 ,
"denominator" : 1
},
"stake" : 10
}

On failure will return 400: Bad Request and a JSON error object

{
"statusCode" : 400,
"error" : "BadRequest",
"message" : "Invalidbet_id",
"validation" : {
"source" : "payload",
"keys" : [
"bet_id"
]
}
}

On success will return 201: Created and a JSON receipt object

{
"bet_id" : 1,
"event" : "NextWorldCup",
"name" : "England",
"odds" : {
"numerator" : 10,
"denominator" : 1
},
"stake" : 10,
"transaction_id" : 1234
}

I have built the front end since I am pretty comfortable in that area, but I am pretty lost with the rest :/
 

Tathanen

Get Inside Her!
I am currently doing an exercise for an interview, and it is wanting me to create a betting page which pulls data from an API. I am still pretty inexperienced with backend development, and have little idea how to do this. Firstly it may just be my lack of experience but the link to the api does not seem to yield any data.

https://bedefetechtest.herokuapp.com/v1/

Basically this is what they have given me:



I have built the front end since I am pretty comfortable in that area, but I am pretty lost with the rest :/

Well, what they're asking of you here is still indeed frontend development.

The API url they're providing there is just the root, you need to refer to the specific routes for actual data. Such as:

https://bedefetechtest.herokuapp.com/v1/markets

Note that they say you can do a "GET" request on /markets, just hitting the URL in a browser counts as a GET, and you can see the JSON data returned. In your implementation, though, you'll need to use something like $.get() or $.ajax(), to use jQuery's methods as an example. Any number of libraries will have HTTP methods like this to help you make requests, though you can certainly just go the vanilla-JS route and use XMLHttpRequest.

For /bets, you'll need to do a "POST" request, which will involve using similar logic to send a JSON body to the route.

For both /markets and /bets, you'll need to handle the response via a callback method, in jQuery you can chain promise handlers like ".done()" to your request to handle what you get back.

If this all sounds greek, this position may be a bit beyond you at the moment. I expect they'll want you to regularly work with data in this way, and you should probably be a bit more familiar with it rather than being thrown in not really knowing what you're doing. Unless you think you can bone up in a few days, in which case godspeed!
 
Well, what they're asking of you here is still indeed frontend development.

The API url they're providing there is just the root, you need to refer to the specific routes for actual data. Such as:

https://bedefetechtest.herokuapp.com/v1/markets

Note that they say you can do a "GET" request on /markets, just hitting the URL in a browser counts as a GET, and you can see the JSON data returned. In your implementation, though, you'll need to use something like $.get() or $.ajax(), to use jQuery's methods as an example. Any number of libraries will have HTTP methods like this to help you make requests, though you can certainly just go the vanilla-JS route and use XMLHttpRequest.

For /bets, you'll need to do a "POST" request, which will involve using similar logic to send a JSON body to the route.

For both /markets and /bets, you'll need to handle the response via a callback method, in jQuery you can chain promise handlers like ".done()" to your request to handle what you get back.

If this all sounds greek, this position may be a bit beyond you at the moment. I expect they'll want you to regularly work with data in this way, and you should probably be a bit more familiar with it rather than being thrown in not really knowing what you're doing. Unless you think you can bone up in a few days, in which case godspeed!

Thanks for your help. I had mistakenly tried:

https://bedefetechtest.herokuapp.com/v1/markets.json

which was throwing me off. I have worked with APIs a few times, but it has been a while (my current work position has taken me away from front end development unfortunately), so hopefully it should come back to me. Thanks for the tips though, they should help to get me off the ground.
 
To follow on from my last posts, I have managed to pull the JSON data into my website, but I am having trouble looping through the array to pull the information that I want.

Basically I have this table:

<div id="market">
<div class="container">
<table class="table table-striped" id="marketTable">
<tr>
<th>Event</th>
<th>Name</th>
<th>Odds</th>
</tr>
</table>
</div>
</div>

And I am trying to append new rows into it for each of my JSON objects. So far I have written:

$(document).ready(function() {

$.ajax({
url: 'https://bedefetechtest.herokuapp.com/v1/markets',
dataType: 'json',
success: function(data) {
$.each(data, function(results) {
var row = '<tr><td>' + results["event"] + '</td><td>' + results["name"] + '</td><td></td></tr>';
$('#marketTable').append(row);
});
},
error: function() {
alert('The market data could not be loaded, please try again later.');
}
});

});

I know I will have to loop into the odds object, but for now I am having trouble just getting the first level stuff in.
 

Lister

Banned
What is the error yoiu are getting, exactly? My first instinct would be to make sure the json coming is an array and not an object with an array payload.
 

Ikuu

Had his dog run over by Blizzard's CEO
The issue is with the $.each, for the function the first variable is the index, so you need to change it to this:

Code:
$(document).ready(function() {
  $.ajax({
  url: 'https://bedefetechtest.herokuapp.com/v1/markets',
  dataType: 'json',
  success: function(data) {
    $.each(data, function(i, results) {
      var row = '<tr><td>' + results["event"] + '</td><td>' + results["name"] + '</td><td></td></tr>';
      $('#marketTable').append(row);
    });
  },
  error: function() {
    alert('The market data could not be loaded, please try again later.');
  }
  });
});
 
The issue is with the $.each, for the function the first variable is the index, so you need to change it to this:

Code:
$(document).ready(function() {
  $.ajax({
  url: 'https://bedefetechtest.herokuapp.com/v1/markets',
  dataType: 'json',
  success: function(data) {
    $.each(data, function(i, results) {
      var row = '<tr><td>' + results["event"] + '</td><td>' + results["name"] + '</td><td></td></tr>';
      $('#marketTable').append(row);
    });
  },
  error: function() {
    alert('The market data could not be loaded, please try again later.');
  }
  });
});

Thank you so much, that works perfectly. I think I am beginning to understand it too, so I should be able to do the other pages.

What is the error yoiu are getting, exactly? My first instinct would be to make sure the json coming is an array and not an object with an array payload.

Basically I was getting the full JSON results into the table, but I couldn't quite figure out how to get specific key values into the columns and rows where I was wanting them.
 

sturmdogg

Member
So I'm adding number of weeks and need to convert them to months and weeks, so for example, 22 weeks will become 5 months and 2 weeks. How do I do that in javascript?

Code:
var weeks1 = parseInt(weeksTargetHb);
var weeks2 = parseInt(weeksIronStores);
var months = (weeks1 + weeks2) / 4;

With this code I get 5.5 months.
 

Tathanen

Get Inside Her!
So I'm adding number of weeks and need to convert them to months and weeks, so for example, 22 weeks will become 5 months and 2 weeks. How do I do that in javascript?

Code:
var weeks1 = parseInt(weeksTargetHb);
var weeks2 = parseInt(weeksIronStores);
var months = (weeks1 + weeks2) / 4;

With this code I get 5.5 months.

Use Math.floor() on your result to turn it into 5, for the month count. Do the operation again with % instead of / (modulo operator, gets the remainder in a division) for the number of leftover weeks.
 

RSTEIN

Comics, serious business!
I am currently doing an exercise for an interview, and it is wanting me to create a betting page which pulls data from an API. I am still pretty inexperienced with backend development, and have little idea how to do this. Firstly it may just be my lack of experience but the link to the api does not seem to yield any data.

https://bedefetechtest.herokuapp.com/v1/

Basically this is what they have given me:



I have built the front end since I am pretty comfortable in that area, but I am pretty lost with the rest :/

You could do what I did and pay someone $110 to develop it for you. :p
 

kevm3

Member
If I know JQuery is it safe to say I know javascript?

It means you know SOME javascript, as in how to call Jquery methods, but I wouldn't really say it means you know javascript unless you know what you are doing outside of calling jquery methods.
 

kevm3

Member
React seems to be the new 'in' thing, but I'm enjoying Angular 2 (well technically Angular 4) way too much to have any desire to use React right now. Typescript is much more pleasant than standard JS, and I'm glad they cut ties with Angular 1 and made a new framework from scratch. Angular 1 kind of felt like a bunch of useful webhacks smushed together into a framework, while Angular 2 feels like something much more carefully engineered. Once you can get past the new syntax, it is way better than Angular 1 imo.
 
React seems to be the new 'in' thing, but I'm enjoying Angular 2 (well technically Angular 4) way too much to have any desire to use React right now. Typescript is much more pleasant than standard JS, and I'm glad they cut ties with Angular 1 and made a new framework from scratch. Angular 1 kind of felt like a bunch of useful webhacks smushed together into a framework, while Angular 2 feels like something much more carefully engineered. Once you can get past the new syntax, it is way better than Angular 1 imo.

You can use TypeScript with React of course. Tbh any of the current frameworks will do just fine, pick one and be awesome
 

grmlin

Member
The only thing that matters is, that you are comfortable with the tools you use. If you like Angular and it does what it has to for your project, go for it. Why should you use something else?
 

ethanny2

Member
I want to get download links from a site, but they are hidden behind a Captcha is there a way to display the captcha on my site (through AJAX and php) and then record the users answer then use it get a response on the other site and get the download link?
 

Tathanen

Get Inside Her!
I want to get download links from a site, but they are hidden behind a Captcha is there a way to display the captcha on my site (through AJAX and php) and then record the users answer then use it get a response on the other site and get the download link?

Ha wow no.
 
I want to get download links from a site, but they are hidden behind a Captcha is there a way to display the captcha on my site (through AJAX and php) and then record the users answer then use it get a response on the other site and get the download link?

No as in not possible or not as in not good web scraping etiquette? Edit: I saw some posts on SO that made me think it was possible for a sec, but now I realize thats exactly why Captchas exist, to prevent these types of things.

No, as in:

1) That's sketchy as fuck. You shouldn't setup imposter websites trying to phish data from someone to steal something from another site.

2) Technically, probably not. AJAX requests will typically be blocked across different domains using a standard called CORS, a security protocol that prevents scripts from being executed from one domain on another domain (unless both servers/apps are setup to explicitly allow that), and typically Captchas are setup in a restrictive way to only be for the domain it's supposed to function on. Beyond that, many websites have started moving to HTTPS which encrypts the data between the user's computer (the form submissions) and the recipient of the data (the web server/captcha service), so you wouldn't be able to sniff it even if all of those other things were true.

3) See #1.

4) If you just want to download something, why not type what's in the captcha...?
 

ethanny2

Member
Well he's looking to automate the process, obviously. Do the providers of this service not offer an API you can perhaps use?

Yes I am trying to create a web application that automates a process and gets the user a link from said site quicker, but I realize that
a) Trying to scrape data from a site with a Captcha is impossible
b) Its not good to offer links to another site that is hosted by the site because they may lose revenue, in this case I will get the user all the way to the Captcha page and direct them there so the site can still get revenue and the link is easier to access.
 

Daffy Duck

Member
I'm a relative newbie at SQL aside from simple select commands etc, I have to make a query that sends an alert to people when a new job is posted, now currently my code for this is as below

Code:
SELECT *
FROM alert
WHERE keyword LIKE "%' . mysqli_real_escape_string($link, str_replace(' ', '%', $searchphrase)) . '%"
AND is_active = 1

This works effectively enough for a simple search like music teacher, but it doesn't match if the keyword is just music, is this something that I can solve?

The $searchphrase is basically the title of the job, now currently the titles can range from say caretaker all the way to something like key stage 2 class teacher, and I would like the query to get people who have those words in it, but it finds no results because nobody has that as an alert.

Or do I need to educate the people putting the jobs on to use simple job titles?
 
I'm a relative newbie at SQL aside from simple select commands etc, I have to make a query that sends an alert to people when a new job is posted, now currently my code for this is as below

Code:
SELECT *
FROM alert
WHERE keyword LIKE "%' . mysqli_real_escape_string($link, str_replace(' ', '%', $searchphrase)) . '%"it
AND is_active = 1

This works effectively enough for a simple search like music teacher, but it doesn't mat with that ch if the keyword is just music, is this something that I can solve?

The $searchphrase is basically the title of the job, now currently the titles can range from say caretaker all the way to something like key stage 2 class teacher, and I would like the query to get people who have those words in it, but it finds no results because nobody has that as an alert.

Or do I need to educate the people putting the jobs on to use simple job titles?

A bit confused on what you are trying to achieve to achieve when that query. Can you give an example use case, what the user has setup for alert, what should trigger an alert and does and what doesn't.
 

Daffy Duck

Member
A bit confused on what you are trying to achieve to achieve when that query. Can you give an example use case, what the user has setup for alert, what should trigger an alert and does and what doesn't.

Basically the alert table contains a keyword and email address, that query is supposed to take the title of the job that has been posted, select the relevant rows from the alert table that match the keyword with the job title ready to take those rows and send them an email to say a new job has been posted.

If the keyword matches any rows it returns that result and then it takes email field and proceeds to send an email to that address telling them of the new job.
 
Top Bottom