• 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

Somnid

Member
What a good resource (video or not) to learn about using the REST API? I need to learn more in this side of things but I'm not sure where to start. I don't even know what to do with the secret key that websites give you when requesting an api key :|

Your best bet is always the documentation. REST isn't exactly a standard as much as it is a set of guidelines. Basically your entities are each given their own endpoints e.g:

- https://ww.api.com/customer
- https://ww.api.com/product
- https://ww.api.com/cart

You can use HTTP verbs to do things on these endpoints.

- GET will return the entity
- POST will insert a new entity
- PUT will update the entire entity (many API will get this wrong, you should supply all properties)
- PATCH will do a partial update on the entity (just the properties you send)
- DELETE will delete the entity

Note that usually your models won't exactly fit this or would require multiple round-trips so you'll make one-off endpoints that only accept some of these verbs for ease of use. Sometimes you need to change things, for example GETs use querystring params which may be undesirable so you use a POST to retrieve info instead etc. The most ideal is one endpoint per entity and your API should be "discoverable" meaning that all entities can be known by just starting traversal at one endpoint, again not always on the table but try your best. One last thing you can look into is webhooks. Webhooks let the client submit a callback url, so for example when an object changes it might POST to that url on your server letting you know it has updated.

The secret key has more to do with Oauth. Oauth like REST is a set of guidelines but everyone does it differently so you need to read the specific documentation. The flow might be different for web apps than servers.

For example a web app might:

- Request auth with API key and scope (set of permission). This is usually a redirect to a login form.
- User inputs credentials
- Redirects back to app with Oauth key which you can then use to access the rest of the API.

A server app might

- Request one-time auth key
- Use auth key to exchange for long term oauth key
- Use oauth key to access rest of API

In each case you typically have to construct the response in highly particular way. There is a general process for creating a signature that's a tad complicated. There's usually a requirement for nonces which are generated values that can be used exactly one do deter replay attacks. The types of hashes allowed might vary, or sometime you send the variables as a query string or sometimes as headers. Again, read the documentation. There's probably a library that can help you to do these things unless it's via javascript then you have to write your own.
 
I don't think there is a free service to do this, but there is also https://www.emailonacid.com/ as an alternative.

If you want free, sign up for all the webmail services and ask people around you to borrow their devices. Then test on all popular browsers and email clients. Tbh the testing services are worth the price if this isn't a one time only thing for you
 

Somnid

Member
Can I just say "Fuck webfonts". Not the fonts themselves necessarily but the absolutely stupid draconian usage-based DRM garbage that goes on with it. Can't host on my site without a special license, have to make extra requests out to your crappy CDN slowing my page loads down, increasing bandwidth just so you can perpetually collect money on what is a essentially a grid-based image. Oh typekit doesn't recommend CSP? How about fuck you, it wouldn't be so complicated if your licensing and font-loading scheme wasn't so complicated and I don't want to expose myself to XSS over it.
 
What a good resource (video or not) to learn about using the REST API? I need to learn more in this side of things but I'm not sure where to start. I don't even know what to do with the secret key that websites give you when requesting an api key :|

If you want to get a solid understanding of how authentication (specifically OAuth 2.0) works, I recommend reading the actual specifications, particularly section 4.1.
https://tools.ietf.org/html/rfc6749

When you're designing or consuming APIs, the typical HTTP methods are GET, POST, DELETE, PATCH and PUT. It's important to know how exactly these verbs should be used. Somnid did a damn fine job of outlining them. The most frequent methods you'll encounter are the first three, because unfortunately they are often implemented incorrectly. POST is also often incorrectly used to update resources and even delete them. Sure, PATCH and PUT haven't been standardized until somewhat recently, but there's no excuse not to use them especially when you're designing a new API.

It's a similar scenario to HTML5. It introduced a lot more tags for a reason, even if you can keep div bombing.
 

Somnid

Member
Basically we have a school website I am doing and we need a responsive calendar for one of the pages, we've done them before for town councils but they are not responsive and are proper old code so I was trying to get something more modern.

You mean display a calendar? Typically you'd have a table-like view for desktop. For mobile you might want to make it a list.
 

Daffy Duck

Member
You mean display a calendar? Typically you'd have a table-like view for desktop. For mobile you might want to make it a list.

I google one I can drop in. Ain't nobody got the time to re-engineer a calendar every time they need one.

Yeah, those are what I meant.

I wouldn't re-engineer it every time, and was looking for some suggestions as to the best ones that would suit my needs, as I certainly don't want to build one, but as I said the current one we use on our sites is archaic and not responsive at all, I have got so far with it on another site but on phones the column heads are still too big to display properly and they required some scrolling which is not what I want.

Wondered if the great minds on GAF had preferred ones as what I seem to find aren't the best.
 

grmlin

Member
It depends :D

If it's a weird API/Backend that will give you a hell of a time to adapt it for a Library you find in the internet, you may be better off building your own solution
If you find something well tested that fits your need and there is a way to use the data you get from the backend with it, go for it, no need to reinvent the wheel all the time.

......


As an example: if someone approaches me and tells me to build some fancy charts, I would always use a chart library as it is a fucking complex task to build charts by yourself.

A calendar on the other hand can be very easy. Searching for a good library would probably last longer than building the base html/css of a calendar doing nothing more than showing events by myself. If the client needs fancy features like »can you do it like google calendar« I would instantly go and search for something useful :D
 
Does anyone know anything about a good decent (free) Wordpress framework?

< I'm not a coder
< I'm looking for something that allows for video backgrounds and custom animations (gif)
< Something where I can put the buttons and links and header anywhere on the page, and also have them animated


I'm really lost!
 
Does anyone know anything about a good decent (free) Wordpress framework?

< I'm not a coder
< I'm looking for something that allows for video backgrounds and custom animations (gif)
< Something where I can put the buttons and links and header anywhere on the page, and also have them animated


I'm really lost!

Check out the premium theme Divi by Elegant Themes. It's a good theme for getting what you want with this builder system they have and not needing to know any code to do it.

It can do both of those things that you outline.

The Elegant Themes license is $90, but it'll do those things you want in an easy way. Their documetation is good too.

FYI, if you choose to purchase it... I have an affiliate link which would give me a few bucks and you'd get 10% off :D
 
My primary personal computer is a MacBook Air and I've never had any unusual performance hits with any Divi-powered site. It's my go-to recommendation to people who want to use WordPress, don't have a budget, and don't know how to create websites... so I've looked at dozens of them.

Feel free to recommend your own for someone that wants animation, WordPress, parallax, has no budget, and doesn't know how to create websites, though.. interested to see others that fill that niche as I have a lot of non-clients who ask for those things but don't have a budget.
 
I am currently trying to iron out a resizing bug. Basically I have a div which is set to the height and width of the screen, and inside this, I also have a div taking up the left hand side of the screen with some text it. It looks great on most browsers, however, I have noticed if the text size is increased, the content can spill out underneath into the next section. I know roughly how to tackle this, but I am struggling to get it to work.

I have tried to write some jQuery to check if the height of the div content is greater than the height of the window, and to then set the height of the parent div to auto.

var textHeight = $('.whatWeDoText').height();
var headerHeight = $('.headerOuter').height();
var divHeight = textHeight + headerHeight;

$(document).ready(function(){
if($(divHeight) >= $(window).height){
$('.whatWeDoSection').css("height", "auto");
}
});

But for some reason it isn't working :/
 

Somnid

Member
I am currently trying to iron out a resizing bug. Basically I have a div which is set to the height and width of the screen, and inside this, I also have a div taking up the left hand side of the screen with some text it. It looks great on most browsers, however, I have noticed if the text size is increased, the content can spill out underneath into the next section. I know roughly how to tackle this, but I am struggling to get it to work.

I have tried to write some jQuery to check if the height of the div content is greater than the height of the window, and to then set the height of the parent div to auto.

var textHeight = $('.whatWeDoText').height();
var headerHeight = $('.headerOuter').height();
var divHeight = textHeight + headerHeight;

$(document).ready(function(){
if($(divHeight) >= $(window).height){
$('.whatWeDoSection').css("height", "auto");
}
});

But for some reason it isn't working :/

Need to see a demo to understand what you want but this already will not work when the browser is resized.
 

Haly

One day I realized that sadness is just another word for not enough coffee.
There's no content bleed for me on Chrome 51.0.2704.103/Win7.
 

GHG

Member
If I want to build a configurator of some sort (for users to be able to create customised cards/posters etc to be printed for example) then am I correct in saying that MeteorJS would be the best Framework for me to use?
 

grmlin

Member
If I want to build a configurator of some sort (for users to be able to create customised cards/posters etc to be printed for example) then am I correct in saying that MeteorJS would be the best Framework for me to use?

There are many options out there, hard to say what fits your needs best. The last time I used Meteor it was nothing close to production ready, but that was 2 years ago, I think. ;)
 

GHG

Member
There are many options out there, hard to say what fits your needs best. The last time I used Meteor it was nothing close to production ready, but that was 2 years ago, I think. ;)

Basically it needs to allow users to customise the product either from a pre-designed template or from scratch and it needs to allow them to add their own text/pictures/logos/etc. So individual elements on the canvas need to be able to be added/deleted/rotated/resized/moved. The canvas size itself also needs to be customisable although I will also pre-define the most common canvas sizes for various things for people to use. Once complete it needs to then spit out a high quality PDF to the client so it can then be printed.

From doing some reading I know the Meteor has come a long way in the last couple of years but do you have any suggestions for other frameworks that would be suited to building an application like that?
 

grmlin

Member
Basically it needs to allow users to customise the product either from a pre-designed template or from scratch and it needs to allow them to add their own text/pictures/logos/etc. So individual elements on the canvas need to be able to be added/deleted/rotated/resized/moved. The canvas size itself also needs to be customisable although I will also pre-define the most common canvas sizes for various things for people to use. Once complete it needs to then spit out a high quality PDF to the client so it can then be printed.

From doing some reading I know the Meteor has come a long way in the last couple of years but do you have any suggestions for other frameworks that would be suited to building an application like that?

Well, you have any experience building javascript apps? Because it sound like the thing you want to do?

Personally, I'm team React. The backend doesn't matter that much. PHP, Java, whatever works best.
 

GHG

Member
Well, you have any experience building javascript apps? Because it sound like the thing you want to do?

Personally, I'm team React. The backend doesn't matter that much. PHP, Java, whatever works best.

Yep I'm comfortable with JavaScript. I'm not a wizard by any means but this will be a personal project so I can take time to fill in any gaps in my knowledge as I go.
 
Meteor has come along way and is production ready, especially for this application.

There's a couple of courses on Coursera that are focused on Meteor development now.
 

Nelo Ice

Banned
So I've made 5 open source contributions so far. This is getting really addictive. Currently working on a 6th and I'm slowly contributing more and more useful things. Like my last contribution I figured out how to fix a function that checked for a certain url ending. I had to change it so anytime a user went to something like www.example.com/foo then instead of outputting a error to a now nonexistent view, the user is redirected to a forum link. Was a bit annoying at first since whoever worked on it before decided to delete the view file so at first I had no idea what in the world the function was doing lol. Also here's to hoping my resume will look more appealing now that I'm an open source contributor. Definitely feel like I'm job ready, I just need to find someone willing to hire me.
 
So I've made 5 open source contributions so far. This is getting really addictive. Currently working on a 6th and I'm slowly contributing more and more useful things. Like my last contribution I figured out how to fix a function that checked for a certain url ending. I had to change it so anytime a user went to something like www.example.com/foo then instead of outputting a error to a now nonexistent view, the user is redirected to a forum link. Was a bit annoying at first since whoever worked on it before decided to delete the view file so at first I had no idea what in the world the function was doing lol. Also here's to hoping my resume will look more appealing now that I'm an open source contributor. Definitely feel like I'm job ready, I just need to find someone willing to hire me.

Big thumbs up for open source contributing!
 

Nelo Ice

Banned
Big thumbs up for open source contributing!

Thanks, contribution to open source is awesome. Love giving back to the community and it was a great feeling when my first PR got merged. I only fixed a typo but it awesome knowing I was able to contribute to the project in some way.
 

Somnid

Member
I got an iPad Pro with an Apple Pencil last week and decided to put together a little sketch app, the results were disastrous.

- I remember reading a tweet that webkit now has 100% of ES6. Well I implemented it entirely using ES6 functionally and then realized Safari Technical Preview has 100% ES6. Stable Safari can't even handle a "let" binding.

- Didn't realize the above at first and being on Windows I had no way to tell. I suppose I could have just looked up support but I kinda just figured that code that works in every other major browser would work in Safari too. Lesson learned. Older IE support at work has helped mask how behind Safari is. Also, really not happy I had to track down a Mac to debug all this. Definitely an area where web needs to build and improve standards.

- TouchEvent Touches don't officially implement the "pressure" property, it's undocumented but Chrome and Safari seem to support it. Not sure if the value semantics are the same.

- So how do we tell if it's a finger or a stylus? Well fingers will register with pressure 0, an Apple pencil will be non-zero float. That works until you realize that the 6S supports pressure sensitive touches. So how can you tell it's truly a pencil? You can't.

- Apple pencil supports tilt. TouchEvents do not support tilt. Can't do it.

- Now all of the TouchEvent bullshit could have been avoided if Apple implemented the W3C Recommended Standard (since 2/2015) Pointer Events but no, apparently TouchEvents are their baby and they aren't going to give it up even though it is 100% broken for their own damn hardware.
 
Talking about open source stuff, I am now a collaborator on Adobe's Brackets code editor project. Hopefully the project will get some great second wind now with more collaborators and the Adobe team returning to the project after Dreamweaver's Brackets integration is done. In the past week the project has seen more actions than in last few months combined even!

If you have any questions, feature requests or bugs do tell or report them directly to the GitHub repo: https://github.com/adobe/brackets
 

hateradio

The Most Dangerous Yes Man
I tried using Brackets before but it felt pretty mediocre. Now I'm usually going between VS Code and Atom, so I'm not sure if I want to squeeze it in. What are some new features that compare to the other two?
 

grmlin

Member
I think Brackets is faster and feels better somehow. When I tried Atom and installed all the plugins/extensions I wanted, it was a sluggish mess.

I use brackets as a simple file viewer, for heavy lifting Webstorm/PHPStorm is still the king.



Anyway, I lately had to decide what svg library I want to use in an app I'll build in the next months. Looked into snap, which was bought/whatever by Adobe. It's pretty much dead :(
 

Nelo Ice

Banned
Talking about open source stuff, I am now a collaborator on Adobe's Brackets code editor project. Hopefully the project will get some great second wind now with more collaborators and the Adobe team returning to the project after Dreamweaver's Brackets integration is done. In the past week the project has seen more actions than in last few months combined even!

If you have any questions, feature requests or bugs do tell or report them directly to the GitHub repo: https://github.com/adobe/brackets
Congrats! Would love to help contribute since I usually use brackets. Have yet to see an issue I could possibly handle though.
 

Blunoise

Member
As a student in Front end development and also want to freelance as a word press dev. Should I learn PHP or Node.js ? Or maybe both? I know Iam definitely putting angular in my skillset
 

ULTROS!

People seem to like me because I am polite and I am rarely late. I like to eat ice cream and I really enjoy a nice pair of slacks.
I'm not sure if this is the right section to ask since it's more of costing and pricing help.

I've developed a web-based timekeeping system that includes attendance tracking through biometrics, overtime and vacation leave form filing and approving, and the daily time record online sheets. The system is simple but it can be customized to the customers needs and is mobile responsive.

How much is the usual asking price? Also how much would it cost if I say outsource it overseas like in India?
 

JeTmAn81

Member
I got an iPad Pro with an Apple Pencil last week and decided to put together a little sketch app, the results were disastrous.

- I remember reading a tweet that webkit now has 100% of ES6. Well I implemented it entirely using ES6 functionally and then realized Safari Technical Preview has 100% ES6. Stable Safari can't even handle a "let" binding.

- Didn't realize the above at first and being on Windows I had no way to tell. I suppose I could have just looked up support but I kinda just figured that code that works in every other major browser would work in Safari too. Lesson learned. Older IE support at work has helped mask how behind Safari is. Also, really not happy I had to track down a Mac to debug all this. Definitely an area where web needs to build and improve standards.

- TouchEvent Touches don't officially implement the "pressure" property, it's undocumented but Chrome and Safari seem to support it. Not sure if the value semantics are the same.

- So how do we tell if it's a finger or a stylus? Well fingers will register with pressure 0, an Apple pencil will be non-zero float. That works until you realize that the 6S supports pressure sensitive touches. So how can you tell it's truly a pencil? You can't.

- Apple pencil supports tilt. TouchEvents do not support tilt. Can't do it.

- Now all of the TouchEvent bullshit could have been avoided if Apple implemented the W3C Recommended Standard (since 2/2015) Pointer Events but no, apparently TouchEvents are their baby and they aren't going to give it up even though it is 100% broken for their own damn hardware.

In case you don't know already there's a tool called Babel which will transpile your ES6 code to something any ES5 browser can run. Nobody should have to worry about ES6 compatibility any more.
 
Congrats! Would love to help contribute since I usually use brackets. Have yet to see an issue I could possibly handle though.

If you see anything that gets your interest, just comment on the issue ping me @petetnt and I can answer any questions you might have about any infrastructure Brackets has :)
 

Zakalwe

Banned
To experienced back-end developers:

How much would a site like this cost for you to create the back-end for? How complex would it be?

The site is a directory of events that users can log-in to to add events and choose events to attend. The database doesn't seem to be that complex: a log-in system and the ability to add/browse/accept events.

I ask as I've been offered a job to build a site very similar to this, and I'm wondering if I can learn enough to handle it myself, or if I'd need to hire another developer alongside myself.
 

Nelo Ice

Banned
If you see anything that gets your interest, just comment on the issue ping me @petetnt and I can answer any questions you might have about any infrastructure Brackets has :)

Will do, and I'll let you PM you when I do since my github name is my real name haha. Some days I just spend time looking at open source projects I've heard of or actually used and every time I see an issue it just looks or sounds too insane for me to take on by myself. And it doesn't help that I haven't seen any recent first timer labels so I've no idea if the issue is potentially at my level.

edit: On an unrelated note I wish the windows anniversary update would just work. Guess I have to wait till they iron out issues but I just want to use bash dammit ;_;.
 

Ikuu

Had his dog run over by Blizzard's CEO
Will do, and I'll let you PM you when I do since my github name is my real name haha. Some days I just spend time looking at open source projects I've heard of or actually used and every time I see an issue it just looks or sounds too insane for me to take on by myself. And it doesn't help that I haven't seen any recent first timer labels so I've no idea if the issue is potentially at my level.

edit: On an unrelated note I wish the windows anniversary update would just work. Guess I have to wait till they iron out issues but I just want to use bash dammit ;_;.

http://babun.github.io/
 

Somnid

Member
To experienced back-end developers:

How much would a site like this cost for you to create the back-end for? How complex would it be?

The site is a directory of events that users can log-in to to add events and choose events to attend. The database doesn't seem to be that complex: a log-in system and the ability to add/browse/accept events.

I ask as I've been offered a job to build a site very similar to this, and I'm wondering if I can learn enough to handle it myself, or if I'd need to hire another developer alongside myself.

If you were just working the back-end it's not hard, but it's really difficult to separate the concerns of front and back. How is data consumed? How is it entered? What do you need to validate? What are the security needs? What framework are you using? Do you need 3rd party integrations? My intuition says that would take a few months to do, and the backend will run out of work before the frontend is finished but will need to be available to make changes and fix bugs.
 
Top Bottom