The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

EmmyOk posted:

Checking if they have unlocked a lesson is simple I am just not sure if hiding list elements can be done in PHP.

As I wasn't sure if this type of thing will involve JavaScript, HTML, or PHP I posted it here instead of the PHP questions thread.

Are you rendering the page on the server and feeding back HTML? If that's the case, then when you get to the for loop that creates the various list items add a if(lesson.id <= student.current_lesson_id) or if(in_array(lesson.id, student.completed_lessons)) (pseudocode) check. This'd prevent anything past the student's current lesson from being rendered to the page.

Edit: You mentioned you can already check for which lessons have been unlocked.

IAmKale fucked around with this message at 22:32 on Jul 20, 2015

# ? Jul 20, 2015 22:27

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 00:56

EmmyOk: Aug 11, 2013

Karthe posted:

Are you rendering the page on the server and feeding back HTML? If that's the case, then when you get to the for loop that creates the various list items add a if(lesson.id <= student.current_lesson_id) (pseudocode) check. This'd prevent anything past the student's current lesson from being rendered to the page.

This is assuming tjat your "student" record keeps track of which lesson the student is currently on. If not, then you'd need to add SOMETHING to determine when to stop rendering lessons.

The way they have it laid out is just a list of links on the homepage.

code:

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <div class="list-group">
          <a href="mathsOp.php" class="list-group-item">Maths Operations</a>
              .
              .
              .
          </div>
</div>

I do have a table in my database looking after what lessons each user has unlocked. When they click on a lesson in that list the page checks if they have unlocked that page, if they haven't it redirects them.

# ? Jul 20, 2015 22:36

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

EmmyOk posted:

The way they have it laid out is just a list of links on the homepage.
code:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <div class="list-group">
          <a href="mathsOp.php" class="list-group-item">Maths Operations</a>
              .
              .
              .
          </div>
</div>
I do have a table in my database looking after what lessons each user has unlocked. When they click on a lesson in that list the page checks if they have unlocked that page, if they haven't it redirects them.

So that homepage is just a static HTML file? Are you using a framework for the front end? Without knowing more about your setup I can only speak to a general workflow of how you'd handle this from the frontend:

1. Use JQuery to GET from the server the user's list of unlocked lessons
2. Edit the above HTML file and assign an ID to each lesson <a> element that corresponds with the lesson ID you track unlocked lessons by
3. Use JQuery to grab each <a> element and hide it if its ID is not in the list of ID's returned in Step 1

Since there's no server-side rendering going on then you'll need to grab the info from the server and do all the hiding on the front-end. It's not nearly as clean and you're getting into REST authentication but maybe you already have that stuff in place.

# ? Jul 20, 2015 22:47

Data Graham: Dec 28, 2009; 📈📊🍪😋

Ah yes, my old friend "Just a simple change, could you add permissions?"

# ? Jul 20, 2015 22:53

EmmyOk: Aug 11, 2013

Karthe posted:

So that homepage is just a static HTML file? Are you using a framework for the front end? Without knowing more about your setup I can only speak to a general workflow of how you'd handle this from the frontend:

1. Use JQuery to GET from the server the user's list of unlocked lessons
2. Edit the above HTML file and assign an ID to each lesson <a> element that corresponds with the lesson ID you track unlocked lessons by
3. Use JQuery to grab each <a> element and hide it if its ID is not in the list of ID's returned in Step 1

Since there's no server-side rendering going on then you'll need to grab the info from the server and do all the hiding on the front-end. It's not nearly as clean and you're getting into REST authentication but maybe you already have that stuff in place.

They've used bootstrap! By the server in part 1 do you just mean the database?

Data Graham posted:

Ah yes, my old friend "Just a simple change, could you add permissions?"

It does feel a bit like that haha

# ? Jul 20, 2015 23:12

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

EmmyOk posted:

They've used bootstrap! By the server in part 1 do you just mean the database?

Bootstrap is a UI framework, it greatly simplifies the task of styling things so they don't look like garbage. Since that's all it does, you need to use something like Jquery to perform actual logic-based operations in the browser.

For simplicty's sake, look into getting access to the FTP server and turning that one file you're working on into a PHP file. Then, perform your logic in PHP and then return an HTML page that only displays the user's accessible lesson <a> elements (querying the database for completed lessons is MUCH easier from the server side of things). This'll be a great introduction to serverside-rendering if you're not already comfortable with it.

# ? Jul 20, 2015 23:44

kloa: Feb 14, 2007

Might not be a big deal, but if you're just grabbing everything and then hiding it on the front end, a savvy student could just tool around in the dev tools and unhide them (or turn off javascript, and then jQuery no longer hides anything).

Server side creation of the links would be better like already mentioned :thumbsup:

# ? Jul 21, 2015 00:37

EmmyOk: Aug 11, 2013

kloa posted:

Might not be a big deal, but if you're just grabbing everything and then hiding it on the front end, a savvy student could just tool around in the dev tools and unhide them (or turn off javascript, and then jQuery no longer hides anything).

Server side creation of the links would be better like already mentioned

I came up with a with a cute little workaround that is a cheeky but will keep my supervisor off my back tomorrow. This will give me a few days to implement things suggested so far. I am not too concerned about a student unhiding stuff as they will still be redirected if they click on the link and their stored data does not permit them access to that lesson.

I'm running everything on my localhost before pushing things onto the university server I can use a PHP file for server side rendering like Karthe mentioned. Though I don't know what that is! Then again the day before the login, register, and activation system was due I didn't know any PHP was and I got that done, so go perseverance!

# ? Jul 21, 2015 00:49

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

EmmyOk posted:

Then again the day before the login, register, and activation system was due I didn't know any PHP was and I got that done, so go perseverance!

You didn't roll your own auth now did you?

# ? Jul 21, 2015 00:56

EmmyOk: Aug 11, 2013

fletcher posted:

You didn't roll your own auth now did you?

I meshed a couple of autherisation systems from the internet and modified them a lot to make them work. Some of the trickier parts was converting the MySql to PostgreSQL

# ? Jul 21, 2015 01:01

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

EmmyOk posted:

I meshed a couple of autherisation systems from the internet and modified them a lot to make them work. Some of the trickier parts was converting the MySql to PostgreSQL

Sounds pretty bulletproof

# ? Jul 21, 2015 02:06

ephphatha: Dec 18, 2009

I've got a page where I want a banner header with a left aligned page heading, a right aligned logo, and a stripe along the bottom of the banner in a different colour to act as a divider between the banner and the content. Trying to kill two birds with one stone I figured I could use a pseudo-after element and text-align: justify to both cause the heading/logo to align as I want and give me something to style for the divider. When I try it though there's some invisible padding that seems to be getting added to the header element that's loving up the intended display.

Probably not the best description, see this jsfiddle for an example: https://jsfiddle.net/8wyou44d/

What I want is for the bottom edge of the red bar to be immediately followed by the white of the page background instead of having part of the banner showing. I'm currently fudging it by setting an explicit height on the banner in the live page and just hoping no one causes the page heading to wrap (its for an internal tool that isn't live yet) but it would be great to know how to get it to size properly. Or should I give up on that method of positioning the header elements and just use a border-bottom?

# ? Jul 21, 2015 08:23

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

It's because your ::after is getting display:inline-block and trying to align itself incorrectly to the surrounding elements, which is a common issue with inline-block elements of differing heights.

If you're married to the text-align:justify fudge you're using for the logo position then you'll need to give the ::after a vertical-align:bottom property.

# ? Jul 21, 2015 13:05

ephphatha: Dec 18, 2009

Definitely not married to it if there's a more appropriate way to do it, this was just the simplest solution I could find. That fix gets me out of strife as well so thanks for that.

# ? Jul 21, 2015 14:14

kedo: Nov 27, 2007

Built a simple maintenance request form and page to view the entries in WP for a restaurant client of mine. I was just put the finishing touches when I found this gem:

quote:

Repair request:
Huge's hands caught in the ice machine, it is frozen stuck. We cannot get it to release. Should we call the Fire Department? Please help ASAP

# ? Jul 22, 2015 18:48

The March Hare: Oct 15, 2006; _{Je r�ve d'un}
Wayne's World 3; Buglord

kedo posted:

Built a simple maintenance request form and page to view the entries in WP for a restaurant client of mine. I was just put the finishing touches when I found this gem:

"Naaaaaaaah."

# ? Jul 22, 2015 21:13

revmoo: May 25, 2006; #basta

Closed WONTFIX

# ? Jul 22, 2015 21:28

Dirty Frank: Jul 8, 2004

Hire smaller handed people.

# ? Jul 22, 2015 21:37

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

Dirty Frank posted:

Hire smaller handed people.

I guess Huge wont be around for the next... all-hands meeting.

# ? Jul 22, 2015 23:19

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

bartkusa posted:

I guess Huge wont be around for the next... all-hands meeting.

Nah, he'll be there. He'll be the guy dragging the ice machine behind him.

# ? Jul 23, 2015 01:14

EmmyOk: Aug 11, 2013

Huge are you just holding onto the ice?

...yes

# ? Jul 23, 2015 01:30

Fluue: Jan 2, 2008

I'm working on an AngularJS + PhoneGap application to mess around with Hybrid Apps, and I have a puzzling design decision about authentication:

I'm sharing the AngularJS code (with a Laravel backend) between the desktop browser and the PhoneGap instance. If a user access the desktop version, they'll see the Angular frontend, while the PhoneGap application will mirror the Angular frontend with added native API methods (i.e. camera). I know that tokens are recommended for sending requests on mobile, but I want to still allow users to sign-in normally with the desktop version and navigate around the site with session-based authentication (such that I'm not passing a token around with every request on desktop). I've gotten PhoneGap making a sign-in request to the Laravel backend and inspecting the response headers I see that I am being issued a session token. With that said, should I be saving this session token inside PhoneGap's localStorage for better persistence?

The reason I ask is because I don't want to setup conditional authentication for mobile/desktop platforms. I'm having trouble wrapping my head around any way to use tokens without duplicating a lot of code/routes.

# ? Jul 23, 2015 18:59

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Fluue posted:

The reason I ask is because I don't want to setup conditional authentication for mobile/desktop platforms. I'm having trouble wrapping my head around any way to use tokens without duplicating a lot of code/routes.

You can still use token auth on the desktop! The trick is to save the token to a cookie that has an expiration date set in the past so that the cookie only exists while the browser session is active. I was inadvertently doing that for the longest time using ngCookies in Angular 1.3 - I found out the hard way that there's no way to set an expiration date on cookies created with this library so nothing persisted once I closed the browser. Regardless of which library you use for handling cookies (I'm now using angular-cookie), the most you'd have to do is add some code in to check whether the user is on desktop or on mobile and set the cookie's expiration date accordingly.

Setting something like this up in your Angular's app.js helps immensely with simplifying calls to APIs that use token auth:

code:

// Include the required auth token on each $http request
$injector.get('$http').defaults.transformRequest = function(data, headersGetter) {
    var token = ipCookie('token');
    if(token) {
        headersGetter()['Authorization'] = 'Token ' + token;
    }
    if(data) {
        return angular.toJson(data);
    }
};

IAmKale fucked around with this message at 19:26 on Jul 23, 2015

# ? Jul 23, 2015 19:24

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Karthe posted:

You can still use token auth on the desktop! The trick is to save the token to a cookie that has an expiration date set in the past so that the cookie only exists while the browser session is active. I was inadvertently doing that for the longest time using ngCookies in Angular 1.3 - I found out the hard way that there's no way to set an expiration date on cookies created with this library so nothing persisted once I closed the browser. Regardless of which library you use for handling cookies (I'm now using angular-cookie), the most you'd have to do is add some code in to check whether the user is on desktop or on mobile and set the cookie's expiration date accordingly.

Setting something like this up in your Angular's app.js helps immensely with simplifying calls to APIs that use token auth:
code:
// Include the required auth token on each $http request
$injector.get('$http').defaults.transformRequest = function(data, headersGetter) {
    var token = ipCookie('token');
    if(token) {
        headersGetter()['Authorization'] = 'Token ' + token;
    }
    if(data) {
        return angular.toJson(data);
    }
};

You could also just use sessionStorage instead of futzing about with cookies and expritation dates.

# ? Jul 23, 2015 19:54

Fluue: Jan 2, 2008

I'm probably misunderstanding something trivial here, but as I understand it sessionStorage will clear when the app is closed, right? I would ideally like to keep the user logged in even after the app is closed. There is a "remember me" option for the backend which adds a cookie, would I be able to use that value (stored in the app with localStorage) and transmit it with the requests?

Then again, at that point I'm back at "why not just use a token"

# ? Jul 23, 2015 21:01

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Fluue posted:

I'm probably misunderstanding something trivial here, but as I understand it sessionStorage will clear when the app is closed, right? I would ideally like to keep the user logged in even after the app is closed. There is a "remember me" option for the backend which adds a cookie, would I be able to use that value (stored in the app with localStorage) and transmit it with the requests?

Then again, at that point I'm back at "why not just use a token"

Use localStorage then instead. Karthe was talking about ensuring cookies expired when you closed the browser, so that was the use case for sessionStorage. If you use localStorage, it will persist until you delete it. You can store the user's token in local storage as the "remember me" then and all is well.

# ? Jul 23, 2015 22:24

Tres Burritos: Sep 3, 2009

Whats a good cross platform web design tool that isn't photoshop? I've worked on a bunch of webapps for my current company without having a "real designer" or any sort of design process and it's really starting to piss me off. I'll lay out an idea and spend a bunch of time coding it only to have the bosses bosses boss (lol) say "nah gently caress that poo poo we're going to do this instead".

I see that sketch 3 seems to be super popular(?) but we've got lots of people who aren't on windows who'd probably like to draw some pretty pictures too.

# ? Jul 24, 2015 04:23

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Tres Burritos posted:

Whats a good cross platform web design tool that isn't photoshop? I've worked on a bunch of webapps for my current company without having a "real designer" or any sort of design process and it's really starting to piss me off. I'll lay out an idea and spend a bunch of time coding it only to have the bosses bosses boss (lol) say "nah gently caress that poo poo we're going to do this instead".

I see that sketch 3 seems to be super popular(?) but we've got lots of people who aren't on windows who'd probably like to draw some pretty pictures too.

For windows I think illustrator or markers, paper and a scanner are pretty much it. Then again, the last time I designed something using Windows, it was on NT4 and Clinton was president.

# ? Jul 24, 2015 04:37

Tres Burritos: Sep 3, 2009

Lumpy posted:

For windows I think illustrator or markers, paper and a scanner are pretty much it. Then again, the last time I designed something using Windows, it was on NT4 and Clinton was president.

Yeah, that's what I figured. Thanks though.

# ? Jul 24, 2015 04:41

down with slavery: Dec 23, 2013; STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

Tres Burritos posted:

Whats a good cross platform web design tool that isn't photoshop? I've worked on a bunch of webapps for my current company without having a "real designer" or any sort of design process and it's really starting to piss me off. I'll lay out an idea and spend a bunch of time coding it only to have the bosses bosses boss (lol) say "nah gently caress that poo poo we're going to do this instead".

I see that sketch 3 seems to be super popular(?) but we've got lots of people who aren't on windows who'd probably like to draw some pretty pictures too.

https://www.google.com/webdesigner/ ?

never used it

# ? Jul 24, 2015 04:43

kedo: Nov 27, 2007

Tres Burritos posted:

Whats a good cross platform web design tool that isn't photoshop? I've worked on a bunch of webapps for my current company without having a "real designer" or any sort of design process and it's really starting to piss me off. I'll lay out an idea and spend a bunch of time coding it only to have the bosses bosses boss (lol) say "nah gently caress that poo poo we're going to do this instead".

I see that sketch 3 seems to be super popular(?) but we've got lots of people who aren't on windows who'd probably like to draw some pretty pictures too.

Unironically Illustrator. I've tried Sketch and it seems to have a lot of fantastic features, but my brain is so deeply wired with Adobe keyboard shortcuts that I can't use it on real projects yet.

Also the whole "lets design a thing in a program and then produce all the designs in the browser, throwing away the original thing," truly is going by the wayside. On any project I wireframe these days, design feels almost like an unnecessary step. If there's an established brand, applying it boils down to creating a whole bunch of generic, branded elements (buttons, inputs, text, etc) and putting them where they fit on the wireframe. I'm leaning heavily towards style tiles + something like Pattern Lab these days because it just feels way more intuitive than mocking up screens that have already been laid out in the wireframe stage.

# ? Jul 24, 2015 04:47

Tres Burritos: Sep 3, 2009

kedo posted:

Also the whole "lets design a thing in a program and then produce all the designs in the browser, throwing away the original thing," truly is going by the wayside. On any project I wireframe these days, design feels almost like an unnecessary step. If there's an established brand, applying it boils down to creating a whole bunch of generic, branded elements (buttons, inputs, text, etc) and putting them where they fit on the wireframe. I'm leaning heavily towards style tiles + something like Pattern Lab these days because it just feels way more intuitive than mocking up screens that have already been laid out in the wireframe stage.

Not even close to an established brand, but I'm digging this.

So I could do some really rough HTML / CSS, layout where things should probably go, make links go to new pages / whatever, then maybe provide a couple different stylesheets that you could maybe pick from a widget or something? Something like "Well, here's where I think the nav stuff should go, here's where I'm picturing the graph , here's how you get to different pages and this is how it looks in 1990s theme and this is how it looks in a sort of material design theme, etc. etc."?

That seems like it could maybe be productive and less painful.

# ? Jul 24, 2015 05:03

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

Ideally you would get the identity and design system down first, build components from that and then design/layout in the browser, paying close attention to how your content and components would behave and order in different screen sizes.

If you need to deliver prototypes/mockups first though I would second Illustrator. I've looked at Webflow too since I'm in a .net shop and stuck on Windows but I haven't had a chance to really give it a try.

# ? Jul 24, 2015 05:13

Tres Burritos: Sep 3, 2009

chami posted:

Ideally you would get the identity and design system down first, build components from that and then design/layout in the browser, paying close attention to how your content and components would behave and order in different screen sizes.

If you need to deliver prototypes/mockups first though I would second Illustrator. I've looked at Webflow too since I'm in a .net shop and stuck on Windows but I haven't had a chance to really give it a try.

Is there like a good "web design for dummies" out there that's recommended? I see some of these words / phrases used and I get what they mean (probably, mostly), but I couldn't for the life of me carry on an intelligent conversation / think critically about the design of a page if put on the spot.

And if I verse myself in that sort of language / thinking how do I communicate it to team members, bosses and customers effectively if they're not hip to the lingo?

# ? Jul 24, 2015 05:26

kedo: Nov 27, 2007

chami posted:

Ideally you would get the identity and design system down first, build components from that and then design/layout in the browser, paying close attention to how your content and components would behave and order in different screen sizes.

Yeah this is right on point. If you're interested in designing in the browser, I'd check Brad Frost's post about atomic design and just google "designing in the browser" and read up on it. The goal is not to present a whole bunch of different concepts that you can switch out with CSS, but rather that the design should develop naturally over the course of time.

Here's an example: say you're designing a simple homepage. First you'd wireframe the thing in the browser so you know where you want all the elements to fall on the page. Next, if you're taking an atomic design approach, you'd start applying a consistent design treatment (color palette, typography, overall style, etc) to all the elements on the page, and then you'd eventually plop them on the page in a semi-rough form and check in with your client (in your case, your boss). Get feedback, modify the elements, and give them another proof. Repeat until everyone is happy.

A different approach would be to slowly layer styles on the wireframe one at a time. For example, first maybe you tackle typography. Then when that's looking good and everyone is happy, you apply a color palette. Then interactive element styles. Then imagery. Then, surprise, the site is done.

Amusingly, the downside of either approach is that they give your client a lot of touch points to provide feedback. Unless you have (or you work with someone who has) strong creative directorial control over the project, it can result in design by committee in its absolute worst form. It is a million times easier if the brand is established beforehand because then you can shoot down stupid ideas by saying, "well that isn't consistent with the established brand."

But still, both are great processes that can result in a fantastic product.

kedo fucked around with this message at 05:33 on Jul 24, 2015

# ? Jul 24, 2015 05:29

Tres Burritos: Sep 3, 2009

Hey thanks guys/gals, this is a lot to work with. I'll definitely check back in with a postmortem when this thing is done.

# ? Jul 24, 2015 05:35

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Hey, are any of you guys dabbling/working in Polymer? I'm just starting out and I'm having a hell of a time getting app-router and more-routing working with 1.0. I want to use something more declarative to define routes but no mater what I tried I just couldn't get either of those to A) display the default path on initial load, or B) actually load a route when I clicked on a link.

I'm very aware of the fact that I'm probably doing something wrong and I plan on starting over with a blank HTML document (I tried modifying the default index.html provided in the Polymer Starter Kit). I'm asking around to make sure there aren't some known issues that I'm fighting against and should just go with Page.js until the other two get sorted out.

# ? Jul 24, 2015 16:42

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Which one of you, probably freelancers, made this site?

# ? Jul 27, 2015 18:48

down with slavery: Dec 23, 2013; STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

The Merkinman posted:

Which one of you, probably freelancers, made this site?

If they removed the doge meme it would actually be pretty hard to tell if it was real or not

# ? Jul 27, 2015 19:03

Adbot: ADBOT LOVES YOU

# ? May 10, 2024 00:56

kedo: Nov 27, 2007

Good thing CloudFlare is running on that site. Dunno how I could live without Chattanooga html5 website design.

# ? Jul 27, 2015 19:31

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »