The Web Design & Development Megathread

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

«‹›361 »

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

Shinku ABOOKEN posted:

Is it possible to style a table to have 1px inner border despite the zoom level?

Firefox's 100% zoom is apparently larger than 100% and my table end up looking like this:

Notice the inconsistent border widths.

e: haha my table broke the tables.

Do you mean when you apply a border to a width: 100% element, that element is now bigger than 100% wide? If so, you need to use box-sizing: border-box. If you mean "when I zoom in with Ctrl-+, my border gets wider", then I got nothing.

# ? Feb 20, 2015 21:19

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 10:56

Workaday Wizard: Oct 23, 2009; by Pragmatica

Lumpy posted:

If you mean "when I zoom in with Ctrl-+, my border gets wider", then I got nothing.

This is the problem. Only because Firefox lies and 100% zoom is larger than 100%.
I guess I'll remove the vertical borders all together.

# ? Feb 20, 2015 21:28

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Shinku ABOOKEN posted:

This is the problem. Only because Firefox lies and 100% zoom is larger than 100%.
I guess I'll remove the vertical borders all together.

I don't think that's the problem. The issue here is that your table sizes aren't an exact number of pixels - there's no good way to render a 1px border that's in the middle of two pixels, you just get a choice of a number of bad ways. Firefox chooses to have the border occupy both pixels in that case.

# ? Feb 21, 2015 01:46

Video Nasty: Jun 17, 2003

Might be a CSS border-collapse issue. I believe Mozilla handles it differently when it isn't explicit.

# ? Feb 21, 2015 01:57

Zero The Hero: Jan 7, 2009

Shinku ABOOKEN posted:

This is the problem. Only because Firefox lies and 100% zoom is larger than 100%.
I guess I'll remove the vertical borders all together.

I've noticed similar issues with size on Firefox. Can anyone expand on this?

# ? Feb 21, 2015 07:01

Mola Yam: Jun 18, 2004; Kali Ma Shakti de!

I made a website, it doesn't work very well. Help.

http://1945.melbourne/

I haven't done any web development since I used HotDog to make a GeoCities website back in like 1997. Things have changed a bit since then it seems.

I found a template and butchered it, and now it works well enough that you can see what I'm trying to do, but man, I mean, just look at it.

So here are some problems I've identified, roughly in order of importance. If anyone can help with any of them, that would be just lovely.

Compatibility issues first I guess. The slider thing doesn't work in IE. I don't think this is fixable since it looks like IE doesn't support the clip property?
This page says something about removing commas but I sort of tried that (I probably did it wrong) and it just broke things even worse.
The slider thing only sort of works in Safari (on Windows, anyway). It sort of jankily works a bit and then it "catches" and won't work again until you zoom in or out. This seems weird since the Mapbox swipe example works fine: https://www.mapbox.com/mapbox.js/example/v1.0.0/swipe-layers/
You can see the map loading up for a second before the splash screen becomes visible on top of it.
Zoom controls are visible on top of splash screen.
Ideally I'd like the swipe control to sit somewhere halfway down the page, and not have a big bar behind it. Sort of like this:

I was able to position it halfway down the page easily enough, but if I tried to make the bar transparent, it made the slider knob transparent too.

6. Cosmetic and basic layout poo poo that I can probably fix myself once I'm feeling less annoyed.

If you can help at all, thanks. If not, you're still a good person.

# ? Feb 22, 2015 01:40

revmoo: May 25, 2006; #basta

I don't have anything to add but good to see someone else using Mapbox. It seems like the only realistic alternative to GMaps which is $$$$$

# ? Feb 22, 2015 01:43

yoyomama: Dec 28, 2008

I took a quick first look at it. I think that all the changes you'd want to make to the slider can be done by messing with the css styles. If you start messing around with anything under #range, you should be able to get the look you want. I was able to get the toggle bar to the middle of the screen by adding

code:

#range {
top:50%
}

I'd also suggest finding a way to make that slider more visible (maybe make the borders darker). I had a hard time finding it when I first looked at the page.

Also, regarding #3, that may be because you have the script for mapbox in listed with the css files, instead of near the end before the </body> tag. Not sure if it needs to be there, so feel free to disregard if I'm off-base.

Edit: As for suggestions for the look, I actually think that the splash page makes things a little confusing. I'm not able to see the map or slider until I scroll, but instructions for using the slider are there. It'd be better to either have the map there, or have a separate splash page with a link to the map. That would solve the issue with seeing the zoom buttons on the splash page, at least, and also the map loading before the splash page does.

yoyomama fucked around with this message at 04:41 on Feb 22, 2015

# ? Feb 22, 2015 04:35

hedgecore: May 2, 2004

and are definitely not deprecated, and it's a dangerous behavior to repurpose an existing tag. I think the original Bootstrap started this trend.

I originally opted to use <abbr> after reading this article, but I think has been the way to go since. Bootstrap stopped abusing and switched to tags, and css-tricks has a good article on how to avoid triggering screen readers which uses in their example.

It doesn't end up being a huge deal in implementation, but might as well use the mostly correct tags instead of a definitely incorrect tag.

# ? Feb 23, 2015 01:51

pipes!: Jul 10, 2001; Nap Ghost

Hey,

Don't use for icons.

Thanks,

-Screen readers everywhere

# ? Feb 23, 2015 23:30

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

How can I copy to the clipboard the JSON object representing my Firebase auth object? I've been console.log()'ing it so I can see it in Chrome's Developer Tools but I need to see the whole thing in straight JSON format so I can figure out why my Firebase security rule isn't working.

Edit: is there an IRC channel for web dev?

IAmKale fucked around with this message at 02:43 on Feb 24, 2015

# ? Feb 24, 2015 02:35

Sedro: Dec 31, 2008

JSON.stringify(obj)

# ? Feb 24, 2015 02:52

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

pipes! posted:

Hey,

Don't use for icons.

Thanks,

-Screen readers everywhere

Can you explain why? Or provide a link? Not that I don't believe you, just haven't seen a really good explanation of why this is.

# ? Feb 24, 2015 03:12

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

Sedro posted:

JSON.stringify(obj)

I tried that, it choked on "circular object". I found what I needed under the Resource tab > Local Storage, though.

# ? Feb 24, 2015 03:59

pipes!: Jul 10, 2001; Nap Ghost

down with slavery posted:

Can you explain why? Or provide a link? Not that I don't believe you, just haven't seen a really good explanation of why this is.

You're fighting against the nature of semantic tags for what amounts to an infinitesimal amount of characters saved in typing markup.  is a really old tag, which means that a lot of screen readers have the potential to have only one way of interpreting it, which is as whatever it considered italicized text to be. You could conceivably circumvent this with ARIA markup, but the issue is that fringe screen readers aren't necessarily aware of what ARIA is (or, to that point, more advanced CSS styling instructions like `speak: none;`). There's also the fact that a lot of assistive tech users are very loyal to the make, model, and version number of the tech they're using, and are very reluctant to upgrade (imagine updating the software for your eyes caused them to suddenly stop working/operate in a completely different manner). So, from an accessibility standpoint you can't really easily approach it from a "most people interpret and use it this way now" angle and have it reliably work.

If an appeal to empathy doesn't work, an appeal to effort is that using an approach such as , ::before, etc. means that in the long run you'll probably wind up writing less code and less bug fixes and it'll have far better "true" cross-browser support. There's also the appeal to SEO, where intentionally subverting tags can have a negative impact on your ranking.

Now I'm going to vanish from the thread before we start arguing about semantics or the really lovely habits Bootstrap teaches.

# ? Feb 24, 2015 04:53

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

I've come across what I think is an async-promises related issue in an Angular app I'm playing with. I'm currently using AngularFire to handle logins with Firebase. I have a NavController that controls stuff in the site's navigation bar. Since the site is pretty barebones at this point I just have a basic template that shows the site's name as well as a logout link when the user is logged in:

code:

<div class="header" ng-controller="NavController">
	<div class="pull-right">
		<span ng-show="username">{{ username }}</span>
		<a href="" ng-click="logout()" ng-show="isSignedIn()">Log Out</a>
	</div>
	<h2><a ng-href="/#/">{{ "app_name" | i18next }}</a></h2>
</div>

And here's NavController:

code:

'use strict';

app.controller('NavController', ["$scope", "$window", "Auth", 
	function($scope, $window, Auth) {

	$scope.isSignedIn = Auth.isSignedIn;
	if($scope.isSignedIn()) {
		console.log("Assigning username", Auth.user.profile.username);
		$scope.username = Auth.user.profile.username;
	}

	$scope.logout = function() {
		Auth.logout();
		//console.log("setting path to /login");
		$window.location.reload();
	};
}]);

Everything works fine except the assigning of the username. The console output shows "Assisning username: undefined". However, if I change the console to log Auth.user, I see the entire JSON string along with the profile child and the exepcted username value. Strangely enough, the logout link shows up fine.

The reason I think this is an async issue is because I make a second async call to grab the user's profile from Firebase after I get back the authData object. I then add the results of that second call to authData so I have user profile information available wherever I need it. What I'm thinking is happening is that I'm getting back the initial auth payload which has enough info to determine if the user is logged in, but the username assignment happens before that second async call finishes so nothing can be assigned. What can I do to get this to work? I know about resolving things in the router, but I'm not sure if there's anything similar for controllers.

# ? Feb 24, 2015 06:30

an skeleton: Apr 23, 2012; scowls @ u

Anyone ever combined Wordpress with Angular, or more specifically used this: https://wordpress.org/plugins/angularjs-for-wp/ ?

# ? Feb 24, 2015 07:01

revmoo: May 25, 2006; #basta

Anybody got a link to a good getting started guide for NGINX? I need to convert a few servers from Apache. We don't use too many plugins, mostly just SSL and aliases.

# ? Feb 24, 2015 16:39

MrMoo: Sep 14, 2000

The beginners guide worked for me porting from Lighttpd.

# ? Feb 24, 2015 18:25

revmoo: May 25, 2006; #basta

That's moderately helpful but it kind of just dumps you into the deep end without really introducing you to nginx concepts. Like it tells you to open the config files but not where it keeps them.

Anyway, I've got PHP-fpm over tcp-ip and SSL running just fine. It seems pretty easy to work with. Just need to figure out aliases and I'll be done.

What's better for performance tcp/ip or sockets for php-fpm? We don't have a TON of simultaneous users, usually less than 500 and that will scale pretty linearly over time. However, the few users we do have tend to use a LOT of resources.

# ? Feb 24, 2015 19:00

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

revmoo posted:

That's moderately helpful but it kind of just dumps you into the deep end without really introducing you to nginx concepts. Like it tells you to open the config files but not where it keeps them.

Anyway, I've got PHP-fpm over tcp-ip and SSL running just fine. It seems pretty easy to work with. Just need to figure out aliases and I'll be done.

What's better for performance tcp/ip or sockets for php-fpm? We don't have a TON of simultaneous users, usually less than 500 and that will scale pretty linearly over time. However, the few users we do have tend to use a LOT of resources.

Put your config files in /etc/nginx/sites-available and then symlink them to /etc/nginx/sites-enabled

Not sure about the performance, I'd just go with php-fpm sockets for now and revisit if performance ever becomes a problem

The nginx channel on freenode has been super helpful for me with nginx questions

fletcher fucked around with this message at 20:16 on Feb 24, 2015

# ? Feb 24, 2015 19:59

MrMoo: Sep 14, 2000

fletcher posted:

Put your config files in /etc/nginx/sites-available and then symlink them to /etc/nginx/sites-enabled

I think that's a Debian thing as I had that on Ubuntu/Lighttpd but not on CentOS/Nginx.

# ? Feb 24, 2015 20:04

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

MrMoo posted:

I think that's a Debian thing as I had that on Ubuntu/Lighttpd but not on CentOS/Nginx.

I'm running CentOS & RHEL6

# ? Feb 24, 2015 20:14

revmoo: May 25, 2006; #basta

So far I'm really digging it. We have a really weird (bad) Apache config with a ton of dependencies and so far I've been able to stick everything into one single config file without installing or enabling anything additional. Pretty sweet. It's going to make migrating our prod stuff over really simple.

vv Good tip! That was actually on my todo list. We're at a B right now IIRC.

revmoo fucked around with this message at 22:07 on Feb 24, 2015

# ? Feb 24, 2015 20:35

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

revmoo posted:

So far I'm really digging it. We have a really weird (bad) Apache config with a ton of dependencies and so far I've been able to stick everything into one single config file without installing or enabling anything additional. Pretty sweet. It's going to make migrating our prod stuff over really simple.

Be sure to check out this extremely helpful post about how to get an A+ rating from SSL labs with nginx.

# ? Feb 24, 2015 22:01

Heskie: Aug 10, 2002

fletcher posted:

Be sure to check out this extremely helpful post about how to get an A+ rating from SSL labs with nginx.

https://mozilla.github.io/server-side-tls/ssl-config-generator/

This is also a very useful tool.

# ? Feb 24, 2015 22:28

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Karthe posted:

I've come across what I think is an async-promises related issue [...] using AngularFire to handle logins with Firebase.
[...] NavController that controls stuff in the site's navigation bar [...]
Everything works fine except the assigning of the username.

I assume you're saying that NavController is always visible, and some other code has the responsibility of calling Auth.LogMeIn(), and NavController just needs to display the username once this login has occurred correctly, which you expect to be populated into Auth.user.profile.username.. however there's two async calls; one to log you in, and one to get the users profile data.

NavController's scope has no reason to re-evaluate (call) isSignedIn. Just because you've attached an executable function to a directive (ng-show) doesn't mean it's going to get re-evaluated every time.
Remember that code you specify in the controller is executed when the controller is loaded. if($scope.isSignedIn()) is only going to get called once on the controller load, and never again, so even if ng-show="isSignedIn()" is getting called, there's no code there to update your values with Auth.user.profile.
Also $scope.isSignedIn = Auth.isSignedIn is (probably?) copying the function definition from Auth.isSignedIn and adding it to $scope. It looks like you thought that would be a reference to the original function and its scope? It isn't. Do what you did for Auth.logout() and use a wrapper function instead.

When you want a $scope to care about another object from elsewhere, you can monitor that object using $watch.
When the digest cycle for $scope is run, it'll call all the items on the $watch list.

code:

$scope.$watch(function() {
	return Auth.user;
}, function() {
	$scope.username = Auth.user.profile.name;
});

The first function returns a value which will be stored and compared for changes. The second function is executed when the first value has changed.
When you $watch an object, only the first-level of its properties are monitored. I you want deep-object watching, you need to specify a third argument as true. This will walk the object and everything within, and is a bit more resource retarded.

Why do we watch Auth.user object and not Auth.isSignedIn()? Auth.isSignedIn will return true after that first call to log you in, but your profile won't be loaded yet. If we just monitor that value, we'll only see $watch fire when you become logged in, and not again until you get logged out.

Remember that a $digest cycle is required for the $watch to be triggered. If you have a change occur that's outside of Angular's $scope monitoring, then there's a chance the digest cycle won't be triggered. This usually manifests as "why doesn't my X updated until I Y on the page".
To fix this, wherever the non-scope-aware change is made, you can call $scope.$apply() to trigger the digest cycle. Read more on that here: http://tutorials.jenkov.com/angularjs/watch-digest-apply.html http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Now, $watch can seem like a really long-winded pattern depending on how many things care about your service, and how your service works and what it's responsible for. Give this SO question a read, which discusses other options besides $watch for service variables: http://stackoverflow.com/questions/12576798/how-to-watch-service-variables

# ? Feb 24, 2015 23:53

enthe0s: Oct 24, 2010; In another few hours, the sun will rise!

So I know mobile doesn't allow autoplay of videos due to bandwidth issues. Is this also true of tablets? I have the suspicion it's true, but I just want to get some confirmation.

# ? Feb 25, 2015 00:47

hayden.: Sep 11, 2007; here's a goat on a pig or something

http://jsfiddle.net/oasey9er/1/

Can anyone tell me why Firefox is not vertically aligning the thumbnail correctly, but Chrome (and IE) is doing it fine?

# ? Feb 25, 2015 07:26

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Inspect it in firefox. Notice how you can see the black bars in the image displaying at the top of your div viewport? The image is absolutely positioning to the top.

For some reason I can't explain, IE and Chrome are happy to vertically center the image when you have top:0, bottom:0, margin: auto. There's no reason for this other than them giving you a break, which is very unusual for IE.

To fix it, because you know the size of the image that will be shown within the div, you can use the same trick that's use the center the thumbnail; set the position top:50% and then a negative margin of margin-top:-150px (half the image height).

http://jsfiddle.net/oasey9er/2/

# ? Feb 25, 2015 09:53

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

hayden. posted:

http://jsfiddle.net/oasey9er/1/

Can anyone tell me why Firefox is not vertically aligning the thumbnail correctly, but Chrome (and IE) is doing it fine?

v1nce is spot-on, but depending or your browser targets, fle box can do this with arbitrary content and container sizes very easily. That way, if you change image size, no CSS updates!

# ? Feb 25, 2015 12:00

hayden.: Sep 11, 2007; here's a goat on a pig or something

Thanks a bunch, I forgot that trick existed.

# ? Feb 25, 2015 16:25

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

enthe0s posted:

So I know mobile doesn't allow autoplay of videos due to bandwidth issues. Is this also true of tablets? I have the suspicion it's true, but I just want to get some confirmation.

Depends on the OS/browser, I think. Just set autoplay and if the browser won't do it, the user will be used to that and mash the button to get it going.

# ? Feb 25, 2015 18:12

Porkchop Express: Dec 24, 2009; Ten million years of absolute power. That's what it takes to be really corrupt.

Edit: Figured it out after a while, I think.

Porkchop Express fucked around with this message at 20:46 on Feb 27, 2015

# ? Feb 26, 2015 16:09

baka kaba: Jul 19, 2003; PLEASE ASK ME, THE SELF-PROFESSED NO #1 PAUL CATTERMOLE FAN IN THE SOMETHING AWFUL S-CLUB 7 MEGATHREAD, TO NAME A SINGLE SONG BY HIS EXCELLENT NU-METAL SIDE PROJECT, SKUA, AND IF I CAN'T PLEASE TELL ME TO
EAT SHIT

Hi gang, I need to write a client-side app that runs in the browser, but the world of web dev is now scary and confusing. Right now I just need to be able to load some images, do some processing (including unpacking animated gif frames and stripping transparency) and spit out a zip file. Nice visual display of images (like a gallery) would be a plus. Eventually I'll want some draggable bitmaps in the UI, arranging them in a space, and probably some drawing capability (boxes and connecting lines, that kind of things) but those are a ways off. I want this all to run on the user's machine, no backend if I can help it.

What's a good, simple and useful language/framework for this? Something with Javascript and jQuery? Or one of the other ~scripts? I don't really care about being on the cutting edge, so long as there's a decent set of libraries and I can get this done (and it can evolve) I'll be happy, but obviously if something's new and great and it's worth using then sign me up! I have a Java background with a bit of Python, and I used to know CSS in the distant past...

Also how do you usually develop? Are there any good IDEs for JS and the like?

# ? Feb 27, 2015 21:30

hayden.: Sep 11, 2007; here's a goat on a pig or something

I'm using a JS script called masonry to give my site the same sort of layout as pinterest:

http://www.besiegedownloads.com/

The issue I have is for first time visitors without the images/JS in their cache, it takes a second to load everything and when the masonry JS loads, it resets their scrolling to the top of the page. Can anyone test this for me and let me know if it's as annoying as I am thinking it is? Any suggestions on how to prevent this?

# ? Feb 28, 2015 22:55

NovemberMike: Dec 28, 2008

hayden. posted:

I'm using a JS script called masonry to give my site the same sort of layout as pinterest:

http://www.besiegedownloads.com/

The issue I have is for first time visitors without the images/JS in their cache, it takes a second to load everything and when the masonry JS loads, it resets their scrolling to the top of the page. Can anyone test this for me and let me know if it's as annoying as I am thinking it is? Any suggestions on how to prevent this?

I didn't really notice it.

# ? Mar 1, 2015 00:28

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

NovemberMike posted:

I didn't really notice it.

Same.

You could ditch the separate category pages and just do filtering on click with this fancier version of Masonry: http://isotope.metafizzy.co

# ? Mar 1, 2015 00:30

Sedro: Dec 31, 2008

It's weird that refreshing the page takes me to the top. I looked at the other examples on the Isotope website and they have the same problem.

# ? Mar 1, 2015 00:50

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 10:56

hayden.: Sep 11, 2007; here's a goat on a pig or something

cbirdsong posted:

Same.

You could ditch the separate category pages and just do filtering on click with this fancier version of Masonry: http://isotope.metafizzy.co

It was more an issue when the site first started and there weren't many uploads in the less popular categories, but if I did filtering with JS then it might hide all but maybe one or two items on the page, and I'd need to write some code to make an AJAX call to populate more items. I am not a big fan of this because it makes browsers go slow to have a million items (which would happen with infinite-scrolling like behavior) and it's not good for SEO unless you do a lot more work and this website is sort of a bare-minimum-to-work approach.

Sedro posted:

It's weird that refreshing the page takes me to the top. I looked at the other examples on the Isotope website and they have the same problem.

This is related to my initial concern - when the javascript finishes loading, it forces the site back to the top of the page. The same effect will happen on refreshing the page.

I really nee to move the site off shared hosting though. I have like $100 in credit over at digital ocean, but it seems sort of daunting to launch a LAMP server and transition stuff over. I am not sure how I would make my domain names point to that, would I need to run a name server too I guess? Do I need to worry about keeping the server updated, or other stability issues? I would need to install monitoring software too I guess, to alert me if something blew up?

edit: looks like DO has their own name servers

hayden. fucked around with this message at 01:57 on Mar 1, 2015

# ? Mar 1, 2015 01:47

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

«‹›361 »