The Web Design & Development Megathread

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

«‹›361 »

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Thanks for the Drupal help on the last page. Since then ive found a way to get the breadcrumbs displaying.

I asked in the general thread but it doesn't hurt to have this floating out there. One of our server farms at MediaTemple went down around noon today and right now their support has no ETA. Our boss is a little pissed.... We host all our regular sites on Rackspace which is great but they do not have Mercurial setup (as far as I know). MediaTemple was essentially our development server (which is still up) but we had this other thing setup for a side-project.

Does anyone know of any other hosts that allow Mercurial for keeping track of things? We also use BitBucket for our own records too. But MT was all development.

(( Im actually using MediaTemple for my buddies site that he is getting me to help him out with with and its pretty good, admin stuff is pretty straight forward too ))

# ? May 5, 2015 21:28

Adbot: ADBOT LOVES YOU

# ? May 11, 2024 19:28

Spraynard Kruger: May 8, 2007

Karthe posted:

What's the best Angular-centric way of storing an auth token for API calls? I have an API up and running and handling logins, but now I need to write up a service to handle logging in and verifying the token is available. Should I just use plain HTML5 localstorage?

You can use a module like angular-local-storage to deal with the localstorage or cookie fallback issue for you. There's also angularLocalStorage if you prefer camelcase. ngStorage is also an option if you don't want a cookie fallback.

Spraynard Kruger fucked around with this message at 22:04 on May 5, 2015

# ? May 5, 2015 22:01

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

Vintersorg posted:

Thanks for the Drupal help on the last page. Since then ive found a way to get the breadcrumbs displaying.

I asked in the general thread but it doesn't hurt to have this floating out there. One of our server farms at MediaTemple went down around noon today and right now their support has no ETA. Our boss is a little pissed.... We host all our regular sites on Rackspace which is great but they do not have Mercurial setup (as far as I know). MediaTemple was essentially our development server (which is still up) but we had this other thing setup for a side-project.

Does anyone know of any other hosts that allow Mercurial for keeping track of things? We also use BitBucket for our own records too. But MT was all development.

(( Im actually using MediaTemple for my buddies site that he is getting me to help him out with with and its pretty good, admin stuff is pretty straight forward too ))

I host on rackspace and we use mercurial. I just apt-get installed it. Obviously if you have one of those cloud site things I don't think you can do that, but if you have a shell, just slap in on there.

# ? May 6, 2015 04:43

o.m. 94: Nov 23, 2009

Is it acceptable to have the following, from an accessibility point of view (note this is just a demonstration, I am not concerned with HTML structure or element choice)

code:

<html lang="en">
  <head>...</head>
  <body>
      <h2 lang="fr">C'est un news headline</h2>
      <h2 lang="en">It's a news headline</h2>
  </body>
</html>

The point I'm trying to make is that on each page, the lang attribute is set appropriately (there's a language switcher between English and French), but there currently isn't any indication of change of language within the document (such as some content not having a translation so it defaults to English). The easiest way for me to do this is always to set the lang attribute, even if it matches the overrall page attribute. Is it OK to have this redundancy?

# ? May 6, 2015 14:50

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

You're going to want to handle your localization server-side

# ? May 6, 2015 15:17

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

I'm writing my first serious Angular SPA using the NGBoilerplate style as the foundation and I need help figuring out how to access constants defined in one module from another module. Basically, I want to access the USER_ROLES constant defined in my main module from another module.

Here's my main module

code:

(function() {
	'use strict';

	angular.module('webapp-client', [...snip...])

	.constant('USER_ROLES', {
		admin: 'admin',
		manager: 'manager',
		employee: 'employee'
	})

And here's the homepage module:

code:

angular.module( 'webapp-home', [
	'ui.router'
])

.config(function config( $stateProvider, USER_ROLES ) {
	$stateProvider.state( 'home', {
		url: '/home',
		views: {
			"main": {
				controller: 'HomeCtrl',
				templateUrl: 'home/home.tpl.html'
			}
		},
		data:{
			pageTitle: 'Home',
			authorizedRoles: [USER_ROLES.admin, USER_ROLES.manager, USER_ROLES.employee]
		}
	});
})

When Grunt tried to build the site it spit back an error saying:

quote:

Error: [$injector:unpr] Unknown provider: USER_ROLES

Then I tried adding USER_ROLES followed by webapp-client.USER_ROLES into webapp-home's dependencies when I declared the module but those just produced similar errors:

quote:

Error: [$injector:nomod] Module 'USER_ROLES' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I thought it would be as easy as passing in dependencies into a Controller but it turns out it isn't quite so simple. What am I doing wrong?

# ? May 6, 2015 17:36

kedo: Nov 27, 2007

Ugh, another http/s question.

Client just sent out an email with a whole bunch of http rather than https images in it. Gmail is throwing a wobbly and refusing to load the images. I fixed this previously by simply changing all of the image sources to https, but the client sent out the wrong version. :doh:

As a temporary fix, how can I adjust my htaccess to allow both http and https images to function? Here's what I have currently:

code:

RewriteEngine On 
RewriteCond %{HTTP_HOST} ^sub.domain\.org [NC]
RewriteCond %{SERVER_PORT} 80 
RewriteRule ^(.*)$ [url]https://sub.domain.org/[/url]$1 [R,L]

I am retarded with htaccess.

# ? May 6, 2015 19:21

Spraynard Kruger: May 8, 2007

Karthe posted:

I thought it would be as easy as passing in dependencies into a Controller but it turns out it isn't quite so simple. What am I doing wrong?

I can see a couple things, you're declaring the constants as part of the 'webapp-client' module, but then you're not including it as a dependency as your 'webapp-home' module. It should be in that array with 'ui.router'.

Second, the config function is special and only takes providers, not constants or factories or anything else. Here's a handy comparison, see the "configurable" column: https://gist.github.com/demisx/9605099

# ? May 6, 2015 21:01

o.m. 94: Nov 23, 2009

down with slavery posted:

You're going to want to handle your localization server-side

ugh i am you intolerable poo. That's not the question I asked

# ? May 7, 2015 08:59

Leshy: Jun 21, 2004

o.m. 94 posted:

ugh i am you intolerable poo. That's not the question I asked

It's a bit unclear what you're asking then.

A duplicate lang attribute shouldn't really hurt anything, but why are you serving multiple language versions of the same element in the first place? If you handle localization server-side, you set the language attribute on the html element and then only serve the appropriate language version of your content. In that case you shouldn't end up dealing with duplicate lang attributes to begin with.

Edit: Upon rereading your original post, I think you are trying to say that you are serving a page where not all the content may have a French translation, and in cases where it doesn't, it defaults to English. Your example is somewhat confusing in that case, as you included two <h2> elements which suggests you're serving both versions at the same time, and you also wouldn't have a French text appear in a page set to English.

If this is the case, you apparently have some server-side logic that grabs the English content whenever a French translation is unavailable. It should not be too hard to modify that logic to add an appropriate lang attribute in cases where it does, which seems more efficient and a better way of doing things than always setting the lang attribute on everything.

Leshy fucked around with this message at 09:49 on May 7, 2015

# ? May 7, 2015 09:37

Kekekela: Oct 28, 2004

o.m. 94 posted:

you intolerable poo.

Brutal.

# ? May 7, 2015 11:04

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Jabor posted:

You are actually checking the recaptcha token on the server to verify that it's been filled out, right? The client-side checks are just there for convenience, they don't provide any actual security.

Yes, I was both checking the response existed and that it was valid.

hayden. posted:

Possibly worth making your own simple captcha? I doubt spammers would customize their software to work with your site specifically.

Had better luck implementing a simple hidden checkbox honeypot, seems to have done a better job

# ? May 7, 2015 16:26

fuf: Sep 12, 2004; haha

Long shot but does anyone happen to know anything about the UK Data Protection Act and the Prudential Regulation Authority requirements for data storage?

Basically I need to know if the database contents need to be encrypted or not.

I'm finding it surprisingly hard to google.

fuf fucked around with this message at 16:58 on May 7, 2015

# ? May 7, 2015 16:43

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Lumpy posted:

I host on rackspace and we use mercurial. I just apt-get installed it. Obviously if you have one of those cloud site things I don't think you can do that, but if you have a shell, just slap in on there.

Ah poo poo, that might be it. We have cloud hosting for all our live sites.

# ? May 7, 2015 21:40

o.m. 94: Nov 23, 2009

Leshy posted:

If this is the case, you apparently have some server-side logic that grabs the English content whenever a French translation is unavailable. It should not be too hard to modify that logic to add an appropriate lang attribute in cases where it does, which seems more efficient and a better way of doing things than always setting the lang attribute on everything.

Indeed; and on further thought I apologise to not coming to this conclusion earlier... I was being lazy and seeing if I could just paint every result with a lang attribute but the correct logic is pretty straightforward as you say, thanks!

# ? May 8, 2015 11:15

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

What are some other good CSS inspiration sites like Codrops?

# ? May 8, 2015 16:14

me your dad: Jul 25, 2006

nevermind. it was depressing to think about.

me your dad fucked around with this message at 05:07 on May 10, 2015

# ? May 9, 2015 21:27

Triglav: Jun 2, 2007; IT IS HARAAM TO SEND SMILEY FACES THROUGH THE INTERNET

My blog engine renders its RSS feed at an address I'd rather not use, but I can't find anywhere in its source code to change it. I know it must be in there, but I've been digging at it for days. Is just using .htaccess to fake its location possible?

The URL is: site.com/rss/1
And I'd like it to be: site.com/rss
But when I put this in my .htaccess, nothing changes:
RewriteEngine On RewriteRule ^rss$ rss/1 [NC,L]
Any ideas? I don't really understand .htaccess.

# ? May 10, 2015 09:20

Silvah: Aug 27, 2004; s0me

Karthe posted:

I'm writing my first serious Angular SPA using the NGBoilerplate style as the foundation and I need help figuring out how to access constants defined in one module from another module. Basically, I want to access the USER_ROLES constant defined in my main module from another module.

Here's my main module
code:
(function() {
	'use strict';

	angular.module('webapp-client', [...snip...])

	.constant('USER_ROLES', {
		admin: 'admin',
		manager: 'manager',
		employee: 'employee'
	})
And here's the homepage module:
code:
angular.module( 'webapp-home', [
	'ui.router'
])

.config(function config( $stateProvider, USER_ROLES ) {
	$stateProvider.state( 'home', {
		url: '/home',
		views: {
			"main": {
				controller: 'HomeCtrl',
				templateUrl: 'home/home.tpl.html'
			}
		},
		data:{
			pageTitle: 'Home',
			authorizedRoles: [USER_ROLES.admin, USER_ROLES.manager, USER_ROLES.employee]
		}
	});
})
When Grunt tried to build the site it spit back an error saying:

Then I tried adding USER_ROLES followed by webapp-client.USER_ROLES into webapp-home's dependencies when I declared the module but those just produced similar errors:

I thought it would be as easy as passing in dependencies into a Controller but it turns out it isn't quite so simple. What am I doing wrong?

The problem is you're trying to access a link-time constant at compile-time (the config method happens before linking). What you're looking for instead of data is "resolve": https://github.com/angular-ui/ui-router/wiki#resolve

So what you'd want to do is something like:

code:

.config(function config( $stateProvider) {
	$stateProvider.state( 'home', {
		url: '/home',
		views: {
			"main": {
				controller: 'HomeCtrl',
				templateUrl: 'home/home.tpl.html'
			}
		},
		resolve: {
			//Resolve entries are resolved at link-time
			authorizedRoles: function(USER_ROLES){
				return [USER_ROLES.admin, USER_ROLES.manager, USER_ROLES.employee];
			}
		}
		data:{
			pageTitle: 'Home'
		}
	});
})

Where the controller at some point takes the "authorizedRoles" dependency, for example:

code:

angular.module('webapp-client')
.controller('HomeCtrl', function($scope, $state, authorizedRoles, ...){
	//(Optional - expose the authorizedRoles array on the $scope if you need to use it on the view)
	$scope.authorizedRoles = authorizedRoles;

	//More controller code...
});

An extra benefit is that child states will inherit resolved dependencies from their parent states (the same is also true for data, but data is meant for you to provide known values, such as the pageTitle you're using).

Side note: Keep in mind that if you're going to minify your JS, you should be using the string dependency injection style (see https://docs.angularjs.org/guide/di) for Angular

# ? May 10, 2015 12:08

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

Silvah posted:

The problem is you're trying to access a link-time constant at compile-time (the config method happens before linking). What you're looking for instead of data is "resolve": https://github.com/angular-ui/ui-router/wiki#resolve

Thanks for the tip, that makes sense and worked perfectly when I tweaked my code.

On a related note, is there a better way of including authenticated/authorization checks than to include this block of code at the top of every controller?

code:

if(!AuthService.isAuthenticated()) {
	$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
	return;
}
else if(!AuthService.isAuthorized(authorizedRoles)) {
	$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
	return;
}

Edit: Nevermind, it appeared to be a problem with my machine.

IAmKale fucked around with this message at 01:02 on May 11, 2015

# ? May 10, 2015 19:37

Silvah: Aug 27, 2004; s0me

Karthe posted:

Thanks for the tip, that makes sense and worked perfectly when I tweaked my code.

On a related note, is there a better way of including authenticated/authorization checks than to include this block of code at the top of every controller?
code:
if(!AuthService.isAuthenticated()) {
	$rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
	return;
}
else if(!AuthService.isAuthorized(authorizedRoles)) {
	$rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
	return;
}
Edit: Nevermind, it appeared to be a problem with my machine.

Yes, since you're using ui-router, you can utilize the $stateChangeStart event, just bind a handler for it to $rootScope in your main application module's run and call event.preventDefault(); to cancel the state change if the authentication fails. (the first argument in a handler callback is always the event).

code:

//app module declaration
angular.module('webapp-client', [//whatever dependencies...])
.config(function($stateProvider){
//... your config block ...
})
//the run block runs at [b]link-time[/b] and so can be injected with the linked $rootScope, $state, etc. It will run once when your application loads (ex. a full-page load/refresh).
.run(function($rootScope, $state, AuthService...){
	$rootScope.$on('$stateChangeStart', 
	function(event, toState, toParams, fromState, fromParams){
    		event.preventDefault();
    		// transitionTo() promise will be rejected with
    		// a 'transition prevented' error
	});
});

HOWEVER, it's late and I may not be thinking straight, but I don't believe this will satisfy what you're trying to do. If you want to avoid putting that block in every controller, you're probably better off overall just using strings and the data declarations in your states, rather than trying to inject the USER_ROLES constants at link-time. The problem is that the $stateChangeStart doesn't have direct knowledge of the resolved values (which are provided to the controller on demand, but not the event). However, it DOES know about the data object in the toState parameter in the handler, which doesn't need to be resolved or anything.

I did some work on this, just messing around, maybe it will be a starting point for you to see if you can get it to behave how you want:

http://codepen.io/hsrob/pen/xGZzQv

EDIT: I forked and modified the CodePen to show you what it would look like using data

http://codepen.io/hsrob/pen/doGjGp

Silvah fucked around with this message at 13:52 on May 11, 2015

# ? May 11, 2015 13:36

fuf: Sep 12, 2004; haha

What's a good parallax scrolling plugin?

I've tried
https://github.com/Prinzhorn/skrollr (couldn't get scrolling to work on mobile)
and
https://github.com/markdalgleish/stellar.js (looks bad on mobile and is buggy)

(posted in javascript thread but I think I should have posted it here)

# ? May 11, 2015 18:05

Spraynard Kruger: May 8, 2007

fuf posted:

What's a good parallax scrolling plugin?

I've tried
https://github.com/Prinzhorn/skrollr (couldn't get scrolling to work on mobile)
and
https://github.com/markdalgleish/stellar.js (looks bad on mobile and is buggy)

(posted in javascript thread but I think I should have posted it here)

Is there a reason you're after a plugin specifically, instead of just doing things with pure CSS?

# ? May 11, 2015 18:18

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

Silvah posted:

If you want to avoid putting that block in every controller, you're probably better off overall just using strings and the data declarations in your states, rather than trying to inject the USER_ROLES constants at link-time.

I guess I should just stick with declaring strings in data{}, it seems a lot easier than trying to hack my way around the fact that there's no good way to load up constants before loading a state. I'd tried that earlier and had it working while I was looking around for a solution, but the constants line up with the structure of my API so I figured it'd be a good idea to create a constant to make sure the two sync up.

Now I have a Bootstrap problem. I'm creating a user portal that will hide some options based on the user's current role. I'm using this basic layout right now to present two options per row, up to however many options might be made available in the future:

code:

<div class="container portal-options">
	<div class="col-md-6">
		<a ui-sref="base.foo">
			<button class="btn btn-lg btn-primary menu-nav-button">
				<i class="fa fa-clock-o"></i>
				<p>Option1</p>
			</button>
		</a>
	</div>
	<div class="col-md-6" ng-show="isAuthorized(['admin', 'manager'])">
		<button class="btn btn-lg btn-primary menu-nav-button">
			<i class="fa fa-users"></i>
			<p>Option2</p>
		</button>
	</div>
</div>

Unfortunately, if the Option2 is hidden because the user isn't authorized, the first item still sits off to the side instead of (ideally) expanding to fill up the whole space. Is there anything I can study up on that will help me figure out how to get the first column to expand into the entire available space if the second option is hidden? Should I just switch out classes if the auth check fails?

# ? May 11, 2015 22:25

Spraynard Kruger: May 8, 2007

Karthe posted:

Unfortunately, if the Option2 is hidden because the user isn't authorized, the first item still sits off to the side instead of (ideally) expanding to fill up the whole space. Is there anything I can study up on that will help me figure out how to get the first column to expand into the entire available space if the second option is hidden? Should I just switch out classes if the auth check fails?

Recommended reading here would be about Bootstrap's grid system. There are 12 fixed columns per row in Bootstrap, so a col-md-6 won't expand to a col-md-12 automatically. But, since you have Angular, you can wire up an ngClass directive to change the class on the first column from col-md-6 to col-md-12 when the user is not properly authorized.

Also, instead of an ngShow for the second portion, you would probably be better off with an ngIf. This will remove the element from the DOM entirely, so an unauthorized user can't just go and unhide it (though it's still not ideal, from a security perspective).

# ? May 11, 2015 22:41

fuf: Sep 12, 2004; haha

Spraynard Kruger posted:

Is there a reason you're after a plugin specifically, instead of just doing things with pure CSS?

Thanks. I spent ages on this today but I couldn't get background images to move in the same way on Firefox and Chrome unfortunately. I ended up using https://github.com/janpaepke/ScrollMagic .

# ? May 12, 2015 18:10

denzelcurrypower: Jan 28, 2011

Please forgive the extremely basic question, I actually have been googling this for a while and I'm having a hard time figuring out what the issue is.

I'm attempting to make a very basic navigation bar. After following a tutorial I have created a list that functions as a navigation bar, here is the code for it:

code:

    <style>	
	  #nav{
		float: left;
		margin: 0px 0px 0px 0px;
		padding: 2px;
		list-style: none;
		background-color: #f2f2f2;
		border-bottom: 2px solid #ccc; 
		border-top: 2px solid #ccc;
		border-left: 2px solid #ccc;
		border-right: 2px solid #ccc;}
	  #nav li {
		float: left; }
	  #nav li a {
		display: block;
		padding: 8px 120px;
		text-decoration: none;
		font-weight: bold;
		color: #069;
		border-right: 1px solid #ccc; }
	  #nav li a:hover {
		color: #c00;
		background-color: #fff; }

    </style>	 
  </head>
  
  <body>
	<ul id="nav">
	  <li><a href="#">Home</a></li>
	  <li><a href="#">Projects</a></li>
	  <li><a href="#">Resume</a></li>
	  <li><a href="#">Bio/Contact</a></li>
	</ul>
  </body>

However, there a few issues with this navigation bar. First of all, the current page that I am on still appears as a link. I'd like the current page I'm on to look different and not be clickable. I figured the simplest way to do this was to create a class for the element that reflects the current page I am on, and create different style rules for that class. For whatever reason this isn't working:

code:

 
Changed 

	  <li><a href="#">Home</a></li>
to 
	  <li class="home"><a href="#">Home</a></li>

and added style rule: 

	  #nav .home li {
	    text-decoration: underline;}

Even with this code, the underline doesn't show up on the home page button. I also tried using an id selector instead of class: <li id=#home> and #home li {text-decoration: underline;}. This doesn't do anything either.

My other problem is that I'm trying to insert an overall website title within the nav-bar on the left side, that isn't a link. Can't seem to figure out how to do this, although I think it is the same solution as my first problem (creating an id/class for the website title list item within the nav-bar). Also, I'm trying to center the nav-bar and it seems if I change float: left to float:center it just breaks the navigation bar instead of centering it on the page like I would like, and adding align="center" to the <ul> element does nothing.

Sorry for the rudimentary questions, if anyone has the time to help me out, I would really appreciate it.

denzelcurrypower fucked around with this message at 05:48 on May 13, 2015

# ? May 13, 2015 05:32

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

First thing is that you want #nav li.home rather than #nav .home li

# ? May 13, 2015 06:13

MasterSlowPoke: Oct 9, 2005; Our courage will pull us through

Your selector should be li.home. If I guess correctly, this still won't work as a is more specific. Change your css rule to li.home a.

# ? May 13, 2015 06:17

Leshy: Jun 21, 2004

MoosetheMooche posted:

Sorry for the rudimentary questions, if anyone has the time to help me out, I would really appreciate it.

No problem, that's what we are here for! Your menu looks pretty good, but as you have noticed, using a list with floats leads to some problems, which makes it tricky to deal with. Fortunately, everything is easily fixable. I've made a Codepen for you: http://codepen.io/anon/pen/zGqKBN. It may require some explanation, so here goes:

First of all, do not use # (ids) for styling CSS, only classes. This makes it easier to avoid specificity issues where some CSS takes priority over other CSS. It is a good practice to adopt and you should do this.

Second, don't use floats. While powerful, they lead to all sorts of messy situations that can be tricky to deal with. The float: left; on your <ul> prevents it from centering, for example. By setting display: table; and margin: 0 auto; instead, you are essentially saying "Make this a block as wide as it needs to be" and "I want an automatic equal margin on the left and right", which centers your menu.

You can then make the <li> elements line up horizontally by either setting them to display: inline-block or display: table-cell. Since we set the <ul> to display: table, I've gone with the latter.

These things will make your menu center nicely. Your next question was how to prevent the link to the current page from being a link:

The short answer is that you can't. At least, not with HTML/CSS. You can do it with things like PHP or JavaScript, but you really shouldn't bother. You could style the link so that it does not appear to be one and have the cursor not change upon hovering over it, but best practice is to apply a class, such as .active, to the link and style it in such a way that the user can see that they are currently on that page and have them decide whether they want to click it or not. You could, as I have done in the Codepen, not apply the :hover effect to the active link to give some extra indication that you do not need to go there.

And your last question was how to add a website title to the menu that isn't a link.

This is easy enough by simply adding a <li> that contains a <h1> or something instead of an <a>, but... you should not have the website title in the menu bar, right next to a link saying "Home". People are pretty accustomed to being able to click on a website title or logo to go back to the homepage, so if you add the website title to the menu, get rid of the "Home" link, and make the title link to the homepage. I have done this in the Codepen.

Hope this helps!

Edit: Fixed the link and removed something that wasn't really necessary.

Leshy fucked around with this message at 12:08 on May 13, 2015

# ? May 13, 2015 10:30

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

MoosetheMooche posted:

Sorry for the rudimentary questions, if anyone has the time to help me out, I would really appreciate it.

Leshy posted:

http://codepen.io/anon/pen/zGqKBN

I just want to point out how the padding is currently controlling the width of the menu, which is rarely what you'd want. If the container gets too small for this menu, this causes some bizarreo stuff to happen: http://codepen.io/anon/pen/pJyNOL

Let's expands on Leshy's approach: http://codepen.io/anon/pen/RPaoqa

You'll notice we're using a fixed size some-container, which is just a placeholder for the rest of your website for which this menu sits inside.

.menu
The menu itself is now set to expand to width: 100%, so it grows to fit whatever its container is. You can specify a fixed size if you desire.
The box-sizing has been switched to border-box to prevent the borders of the elements within the menu from adding to the width of the menu. Without this setting, the border add to the width and it no longer fits the container.

.menu a
All left and right padding has been removed from these elements. The width of the a grows to fill the cell because of display: block, and the width of the cell is determined as a property of .menu li having display: table-cell;, making it function exactly like a table.

I've moved the "home" class onto the <li>, so I can affect the width of this particular cell. Using .menu .home I've modified the width to width: 20%;, giving the other menu items a bit more room.
Just like .menu a, for .menu .home a I've removed the horizontal padding so this is no longer a factor when calculating width.

You'll notice that Bio/Contact's cell is a little wider than everything else. This is because when you use table-cell the width is weighted according to the cell content. In this case, "Bio/Contact" is the longest text item, so it gets a slightly bigger cell.
If you want your menu item widths to be the same, you need to apply a width to .menu li. Assuming you still want .home to be 20%, this would be 26.66% ((100 - 20) / 3 = 26.66)

As an exercise for you, notice what happens when you bring the container size down to below 400px. You'll run into similar issues if you add another item to your menu, as you'll need more horizontal space.
Obviously you'd never design a website with a body container that's too small for your menu, but what if the user resizes their browser, and you, being a good developer, have designed your site to horizontally scale to allow that?

Well, you can use Media Queries to detect certain widths of the browser, and apply additional CSS rules when that occurs.
You could easily add a media query which changes your menu li's from table-cell to block, and give the anchors 100% width. This would then give you a simple stack of vertical menu items, and no horizontal space issues - perfect for a mobile user!

# ? May 13, 2015 13:24

denzelcurrypower: Jan 28, 2011

Wow, this is way more help and information than I could have hoped for and in such a short period of time. I just woke up so I'm going to spend the day checking out the code and suggestions you guys have posted for me. Just wanted to say thanks, it really seems like a great community in this sub forum.

e: While I'm here, is it good practice to keep css style info in an external file or is including it in every sub-page of the website a good idea? Since it's a fairly basic website with just a nav-bar and writing I'm thinking an external style page would be good to keep the code looking neater but if I'm wrong please let me know!

Also, is there a good program for design/code view like that website you guys linked to? I've been using Dreamweaver but it seems to do some wonky stuff and I have to manually click refresh every time I make a change which kind of ruins the whole point of the thing (convenience).

-

Doesn't the some-container actually make it more difficult for a browser to resize the website? It seems like I have to put in a set resolution that the page will display as instead of having it adapt to my browser like it would normally. For example you have set the resolution to 800x400 which only looks right if I have my browser window quite small. Is it a necessity to use Media Queries when I nest the menu/website in a container?

denzelcurrypower fucked around with this message at 18:05 on May 13, 2015

# ? May 13, 2015 17:13

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

MoosetheMooche posted:

Wow, this is way more help and information than I could have hoped for and in such a short period of time. I just woke up so I'm going to spend the day checking out the code and suggestions you guys have posted for me. Just wanted to say thanks, it really seems like a great community in this sub forum.

and here I'll contribute...

MoosetheMooche posted:

e: While I'm here, is it good practice to keep css style info in an external file or is including it in every sub-page of the website a good idea? Since it's a fairly basic website with just a nav-bar and writing I'm thinking an external style page would be good to keep the code looking neater but if I'm wrong please let me know!

Yes, ideally you'd write one external sheet for all pages to share. There is some talk of putting the above-the-fold first page CSS inline, but that's for super optimization with page caching and basically stuff you wouldn't need to worry about for small projects.

MoosetheMooche posted:

Also, is there a good program for design/code view like that website you guys linked to? I've been using Dreamweaver but it seems to do some wonky stuff and I have to manually click refresh every time I make a change which kind of ruins the whole point of the thing (convenience).

There's a few there on the first page of this thread. I haven't used it, but I think Brackets has an auto updating thing.

MoosetheMooche posted:

Doesn't the some-container actually make it more difficult for a browser to resize the website? It seems like I have to put in a set resolution that the page will display as instead of having it adapt to my browser like it would normally. For example you have set the resolution to 800x400 which only looks right if I have my browser window quite small. Is it a necessity to use Media Queries when I nest the menu/website in a container?

Not sure what you're asking here, a block element will be 100% of its parent, if its parent is body then it will be 100% the window. You can also havemin-width and max-width on elements without getting into media queries.Also, don't think in pixels. They aren't what you think they are anyway. If things don't look the right size on a phone you'll need this in the head <meta name="viewport" content="width=device-width, initial-scale=1.0">

# ? May 13, 2015 19:04

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

MoosetheMooche posted:

Also, is there a good program for design/code view like that website you guys linked to? I've been using Dreamweaver

I'd suggest you go with NetBeans for HTML5 and PHP, but that's me.

When you're fighting "weird poo poo" happening to your design, rather than editing a line and F5'ing to try the change, you can use something like Chrome dev tools (hit F12) to inspect the HTML, CSS and Scripts on a page. You can then make minor modifications and try to hunt down whatever it is that's causing the problem. If you get good with it, you can even edit your local files through Chrome.

Take a look at the workflow documentation for Chrome Dev Tools: https://developer.chrome.com/devtools/docs/authoring-development-workflow

# ? May 14, 2015 00:20

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Javascript thread cross post:

I'm trying to create a page where users can log in with their tumblr account and fill out a form to post to their blog.

I'm using hello.js with the tumblr module.

I've modified the tumblr module demo and everything seems to be working in terms of logging in and authenticating. However, I'm unable to convince the API to let me use any OAUTH-restricted POST commands. GET commands, such as retrieving a user's followed blogs, work fine. But if I try something simple such as user/follow to follow a new blog, I get a "401 Not Authorized" response.

What could be causing OAUTH restricted GET commands to be working fine, but POST does not?

You can see my testing code live at http://www.jereddanielson.com/testing/tumblr/hello.js-master/demos/tumblr.html

Below is the pertinent javascript. I'm using the OAUTH proxy at https://auth-server.herokuapp.com/

code:

function login(network){
	hello( network ).login({scope: 'publish_actions, publish, post, post_actions, follow, follow_actions'}).then( function(r){
		// Get followed blogs
		hello(network).api({path: '/user/following', method: "get"}).then(function(p){
			console.log(p);
			console.log("Tried to retrieve followed blogs. Response status: " + p.meta.status + " " + p.meta.msg);
		});
		// Try to follow a blog
		hello(network).api({path: '/user/follow', method: "post", data: {url: "daily-fractal.tumblr.com"}}).then(function(p){
			console.log(p);
			console.log("Tried to follow a blog. Response status: " + p.meta.status + " " + p.meta.msg);
		});
	}, function(e){
		console.error(e);
	});
}

hello.init({
	'tumblr' : "bQpjOrKgIu9pWVann1HVOAoW6gOGNoSpcMXIpwjNqghUmkwvgt"
},
{
	redirect_uri:'../redirect.html',
	oauth_proxy: "https://auth-server.herokuapp.com/proxy"
});

Any ideas?

# ? May 14, 2015 02:30

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

I need to arrange some up/down/left/right buttons on a bootstrap site. Does using a table to do this make me a horrible monster?

e: also are those svgs sensible?

Newf fucked around with this message at 14:16 on May 14, 2015

# ? May 14, 2015 14:11

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

I've got to build something fast and easy to administer by the user - help me fill in the blanks. Wordpress, Squarespace, ________. Just looking for new options. Something with smart templates being sold, and something that'll let me edit the css. Thoughts?

# ? May 14, 2015 14:56

ufarn: May 30, 2009

Wagtail is super interesting, if you use Django.

# ? May 14, 2015 15:50

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

I have two ng-repeats, one nested inside the other. How can I get the parent ng-repeat's $index from within the child ng-repeat?

code:

<div class="container">
    <div ng-repeat="location in ctrl.locations">
        <!-- CONTENT GOES HERE -->
        <div class="shiftee-settings-row" ng-repeat="station in location.stations">
            <!-- There doesn't appear to be a way to grab the location's index from here... -->
            <button type="button"ng-click="ctrl.updateStation(location.$index, station)">Update</button>
        </div>
    </div>
</div>

I want to refresh only the affected location's list of stations, and to do that I need the location's index within ctrl.locations. Nothing within a location object indicates its position in ctrl.locations, though, and unfortunately $index isn't available within the location object. If it's not possible I might have to A) maintain a reverse array mapping location.id's to indices, or B) just refresh the whole page. B's kinda wasteful, though, and could potentially hammer the API server with requests if abused/the list of locations grows larger.

# ? May 14, 2015 19:59

Adbot: ADBOT LOVES YOU

# ? May 11, 2024 19:28

lunar detritus: May 6, 2009

Karthe posted:

I have two ng-repeats, one nested inside the other. How can I get the parent ng-repeat's $index from within the child ng-repeat?

I can't test right now but I think $parent.index would give you the index you want.

# ? May 14, 2015 20:03

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

«‹›361 »