The Web Design & Development Megathread

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

«‹›361 »

bobua: Mar 23, 2003; I'd trade it all for just a little more.

Didn't even see that somehow, thanks!

# ? Oct 3, 2013 19:54

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 21:35

me your dad: Jul 25, 2006

I'm using Lightbox v2.51 on my personal work portfolio site. The lightboxOverlay seems to be set to my monitor height (1024px). I have an image though that is 2145px and when scrolling down, the lightbox overlay stops. I want it to cover the dimensions of any image.

I've looked a bit on Google but haven't found anything which solves the problem (a lot of the solutions seem to deal with older versions).

Can anyone help? I'd rather not post my site here but if someone can PM me I'd be very grateful.

# ? Oct 4, 2013 02:33

Oh My Science: Dec 29, 2008

I would say very few people use a browser at that height, have you considered editing the image and offering a high-res download instead?

This might be silly but I try to edit all images in a lightbox to a set height so that they match and the animations are less jarring.

# ? Oct 4, 2013 02:43

me your dad: Jul 25, 2006

Oh My Science posted:

I would say very few people use a browser at that height, have you considered editing the image and offering a high-res download instead?

This might be silly but I try to edit all images in a lightbox to a set height so that they match and the animations are less jarring.

I had a couple other images that I cropped to meet the height restriction, but I was hoping to keep this one in particular the original height. It seems like there should be a way in the css file to override the height but I can't find it.

# ? Oct 4, 2013 02:46

Oh My Science: Dec 29, 2008

It's hard to help without seeing code :/ I noticed that version 2.6 is out now, maybe an upgrade will correct the issue?

You could PM a link to me if it comes down to that.

# ? Oct 4, 2013 02:53

me your dad: Jul 25, 2006

Oh My Science posted:

It's hard to help without seeing code :/ I noticed that version 2.6 is out now, maybe an upgrade will correct the issue?

You could PM a link to me if it comes down to that.

I made a test page. The first image is fine. The second one is tall, and causes problems:

[website removed for now]

I'm a little nervous to update versions in case it breaks anything. I need this ready by Monday.

Edit: Curiously, the overlay fills the screen in IE8, but not Chrome or Firefox.

Edit 2: The div isn't centered in IE8 for some reason :suicide:

me your dad fucked around with this message at 23:30 on Oct 4, 2013

# ? Oct 4, 2013 12:25

excidium: Oct 24, 2004; Tambahawk Soars

me your dad posted:

I made a test page. The first image is fine. The second one is tall, and causes problems:

I'm a little nervous to update versions in case it breaks anything. I need this ready by Monday.

Edit: Curiously, the overlay fills the screen in IE8, but not Chrome or Firefox.

If you want a hacky way of doing it in only CSS, add this:

height: 2300px !important to #lightboxOverlay in lightbox.css.

This will make the page height the largest for all page sizes the largest of all your images. Without this you'll need to hack around in the JS for the lightbox to ensure that the document height isn't calculated and applied until after the image is loaded into the DOM so that it accounts for the additional height.

excidium fucked around with this message at 23:29 on Oct 4, 2013

# ? Oct 4, 2013 15:04

me your dad: Jul 25, 2006

excidium posted:

If you want a hacky way of doing it in only CSS, add this:

height: 2300px !important to #lightboxOverlay in lightbox.css.

This will make the page height the largest for all page sizes the largest of all your images. Without this you'll need to hack around in the JS for the lightbox to ensure that the document height isn't calculated and applied until after the image is loaded into the DOM so that it accounts for the additional height.

Thanks - I'll give this a shot when I get home.

# ? Oct 4, 2013 15:41

pipes!: Jul 10, 2001; Nap Ghost

I hate to be a noodge about this, but you might want to might want to update the lightbox to something that's responsive/touch-friendly, and also kill the transition animations. Nobody has the time or desire to wait for that stuff to fire off while paging through your work.

# ? Oct 4, 2013 15:58

me your dad: Jul 25, 2006

pipes! posted:

I hate to be a noodge about this, but you might want to might want to update the lightbox to something that's responsive/touch-friendly, and also kill the transition animations. Nobody has the time or desire to wait for that stuff to fire off while paging through your work.

Thanks for the feedback. Got any recommendations for a touch/responsive option?

I'll likely keep it as-is for now, since this will be for an interview on Monday, and I won't have a lot of time to redevelop everything. I'm not saying I won't try, but getting something in working order is my main priority right now.

(I do email marketing, so my HTML/CSS isn't as sharp as a full-on web designer/developer)

me your dad fucked around with this message at 18:06 on Oct 4, 2013

# ? Oct 4, 2013 17:52

pipes!: Jul 10, 2001; Nap Ghost

me your dad posted:

Thanks for the feedback. Got any recommendations for a touch/responsive option?

Should have offered something in the last post, sorry. I just used this for something and liked it, give it a shot?

# ? Oct 4, 2013 18:09

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

Is there any way to get telephone number anchors with the tel: to work on desktop computers if the user has something like skype installed? Or is there some other prefix that is more widely used maybe?

# ? Oct 4, 2013 18:45

pipes!: Jul 10, 2001; Nap Ghost

fletcher posted:

Is there any way to get telephone number anchors with the tel: to work on desktop computers if the user has something like skype installed? Or is there some other prefix that is more widely used maybe?

I believe Skype will use tel: if it's set as the default program to handle desktop phone calls. If you want to target Skype specifically, they offer a skype: URI.

# ? Oct 4, 2013 18:55

S.W.O.R.D. Agent: Apr 30, 2012

Looking for a bit of help / advice here.

I�m currently working a Business Analyst, and may have an opportunity to work my way into a Web Developer position with the same company. I got to know a developer here, and my conversations with him peaked my interest in web development. In my free time I�ve worked through the HTML and CSS courses on Tree House and Code Academy, and have just started the Java Script tracks when this opportunity popped up.

I know we currently us PHP / Symfony here so that�s what I�ll need to know. Other than going through the Code Academy & Tree House stuff for PHP are there any other resources that would be recommended to try and get up to speed quickly? Is there a go to PHP / Symfony book that could be recommended.

# ? Oct 4, 2013 20:44

Oh My Science: Dec 29, 2008

S.W.O.R.D. Agent posted:

I know we currently us PHP / Symfony here so that�s what I�ll need to know. Other than going through the Code Academy & Tree House stuff for PHP are there any other resources that would be recommended to try and get up to speed quickly? Is there a go to PHP / Symfony book that could be recommended.

I can't comment on the availability of books aside from saying most will be out dated. Unfortunately getting up to speed with any language or framework requires time & patience.

You could try approaching the position from another angle. Assuming you have a solid understanding of HTML/CSS/JS, and that they require those skills, it might be enough to get you in the door while you learn PHP/Symfony as part of the team.

# ? Oct 4, 2013 21:29

S.W.O.R.D. Agent: Apr 30, 2012

Oh My Science posted:

You could try approaching the position from another angle. Assuming you have a solid understanding of HTML/CSS/JS, and that they require those skills, it might be enough to get you in the door while you learn PHP/Symfony as part of the team.

Thanks for the feedback. This has sort of been the long term plan, but we had some unexpected turnover so the opportunity popped up much more quickly than anticipated. I feel pretty good about my HTML/CSS, but am just in the beginning stages of Java.

I was under the impression that JS and PHP were sort of mutually exclusive, and not that PHP built on a JS foundation. Is that not the case? Would I be able to learn PHP before JS and then build on my JS knowledge from PHP experience?

# ? Oct 5, 2013 03:32

Oh My Science: Dec 29, 2008

S.W.O.R.D. Agent posted:

Thanks for the feedback. This has sort of been the long term plan, but we had some unexpected turnover so the opportunity popped up much more quickly than anticipated. I feel pretty good about my HTML/CSS, but am just in the beginning stages of Java.

I was under the impression that JS and PHP were sort of mutually exclusive, and not that PHP built on a JS foundation. Is that not the case? Would I be able to learn PHP before JS and then build on my JS knowledge from PHP experience?

I think you have a few wires crossed.

HTML, CSS, and JS are commonly used by front end designers. Depending on the position & company you may be able to pick up more front end work using those tools while learning about PHP as you go.

Read this http://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend

# ? Oct 5, 2013 04:17

Mister Chief: Jun 6, 2011

Javascript also has nothing to do with Java.

# ? Oct 5, 2013 05:37

Knyteguy: Jul 6, 2005; YES to love
NO to shirts; Toilet Rascal

bobua posted:

Node.js/express question, hope this is the right place.

In app.js:
code:
app.get('/', routes.index);
app.get('/users', user.list);
In the routes folder, there is an index.js, and a user.js file. In user.js, there is an exports.list function. I assume line 2 from above calls the file user.js, and the exports.list function. What confuses me is that index.js has an exports.index function... So if the generated code wasn't already there, I would think I would need to do something like
code:
app.get('/', routes.index.index);
instead. or add a
code:
var index = require('./routes/index');
line, which isn't there...(although there is a routes var that points at the routes folder.

My only guess is that maybe index is a special case, and get's called automatically? The documentation and tutorials on all of this has been terrible:(

code:

[app.js]
homepage = require('./controllers/homepage_routes')
app.get('/', homepage.index);

[homepage_routes.js]
exports.index = function(req, res){
  if(req.user) {
    var steamID = req.user.steamid; // If user is logged in, set req.user to their steam id
    require('../models/user_model').get(steamID, function(err, doc) {
      if (err) throw err;
      res.render('index', { title: 'Meta.tf', user: doc });
    });
  } else {
    res.render('index', { title: 'Meta.tf', user: null });
  }
};

This is how to get an index route working. As far as I know it's simply common convention than any kind of special case.

There's going to be a var routes = require('./routes'); or something similar declared wherever your get / is defined. Exports.index will export routes.index to the server file or wherever.

You're over-complicating the concept I think.

(note my code here is not the best, it's kind of old).

# ? Oct 5, 2013 08:58

jony neuemonic: Nov 13, 2009

S.W.O.R.D. Agent posted:

Looking for a bit of help / advice here.

I�m currently working a Business Analyst, and may have an opportunity to work my way into a Web Developer position with the same company. I got to know a developer here, and my conversations with him peaked my interest in web development. In my free time I�ve worked through the HTML and CSS courses on Tree House and Code Academy, and have just started the Java Script tracks when this opportunity popped up.

I know we currently us PHP / Symfony here so that�s what I�ll need to know. Other than going through the Code Academy & Tree House stuff for PHP are there any other resources that would be recommended to try and get up to speed quickly? Is there a go to PHP / Symfony book that could be recommended.

This book was my first exposure to PHP and SQL, and I'd recommend it. It's pretty opinionated but it'll get you on the right track and should dovetail nicely into learning Symfony since the examples use a similar (but simpler) structure to most frameworks.

# ? Oct 5, 2013 15:43

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

I'm revamping the UI on my movie trailers site to use a "card"-based UI (� la Google+) and I'm trying to decide between delivering full pages from the server, loading HTML snippets for each card from the server, or just building the HTML for each card by downloading the data via my API and building the view with JS.

In the simplest case I'd just deliver full pages, but I'm planning on having lots of filtering (different dates, keyword searches, etc) and viewtype (compact cards, expanded cards, lists, etc) options, and I think it'd be slick to not do page reloads for these types of things.

I could deliver HTML snippets, but I got to thinking if I'm going to do that, I might consider just using my already existing API. One of the things that makes me hesitate about using the API is that I'm offering public API access via API keys (so I can rate limit API users who need it), and I don't know of any way to access my API via in-browser JS without someone being able to do a simple View Source and see the API key I'm using for public web site views.

Any thoughts?

# ? Oct 5, 2013 19:08

Oh My Science: Dec 29, 2008

How are you building your API? Are you using a back-end framework?

Google Tech talk on API Design https://www.youtube.com/watch?v=aAb7hSCtvGw

# ? Oct 5, 2013 19:34

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Oh My Science posted:

How are you building your API? Are you using a back-end framework?

Google Tech talk on API Design https://www.youtube.com/watch?v=aAb7hSCtvGw

I can do whatever. Right now I'm using django-rest-framework.

# ? Oct 5, 2013 19:50

Eflas: Sep 24, 2010

jiggerypokery posted:

Can anyone give a definitive answer as to why (or even if) PostgreSQL is better than MySQL? It seems a lot of people just say it is without any kind of substance behind why.

I saved the link of a forum post that went into an in-depth comparison of the two, which was tucked away in a text file on Google Drive, and now it has some use!

http://forums.somethingawful.com/showthread.php?noseen=0&threadid=2803713&perpage=40&pagenumber=318#post404518882

Really should be enshrined somewhere, though.

# ? Oct 5, 2013 20:47

ufarn: May 30, 2009

Thermopyle posted:

I'm revamping the UI on my movie trailers site to use a "card"-based UI (� la Google+) and I'm trying to decide between delivering full pages from the server, loading HTML snippets for each card from the server, or just building the HTML for each card by downloading the data via my API and building the view with JS.

In the simplest case I'd just deliver full pages, but I'm planning on having lots of filtering (different dates, keyword searches, etc) and viewtype (compact cards, expanded cards, lists, etc) options, and I think it'd be slick to not do page reloads for these types of things.

I could deliver HTML snippets, but I got to thinking if I'm going to do that, I might consider just using my already existing API. One of the things that makes me hesitate about using the API is that I'm offering public API access via API keys (so I can rate limit API users who need it), and I don't know of any way to access my API via in-browser JS without someone being able to do a simple View Source and see the API key I'm using for public web site views.

Any thoughts?

Two brief observations:

1) Add `html { height: 100%; margin-bottom: 1px; }` to your CSS, so the scrollbar doesn't appear and disappear, when a box is opened.

2) There is something that makes the entire container jerk left, when a box is expanded, in Chrome.

Both are pretty annoying visually.

# ? Oct 6, 2013 01:08

jony neuemonic: Nov 13, 2009

ufarn posted:

2) There is something that makes the entire container jerk left, when a box is expanded, in Chrome.

Sounds similar to this Bootstrap issue. In their case it was because of how OSX handles scrollbars.

# ? Oct 6, 2013 02:05

ufarn: May 30, 2009

fidel sarcastro posted:

Sounds similar to this Bootstrap issue. In their case it was because of how OSX handles scrollbars.

I'm on Windows, so let's hope the issue concerns all platforms.

# ? Oct 6, 2013 02:14

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

ufarn posted:

Two brief observations:

1) Add `html { height: 100%; margin-bottom: 1px; }` to your CSS, so the scrollbar doesn't appear and disappear, when a box is opened.

2) There is something that makes the entire container jerk left, when a box is expanded, in Chrome.

Both are pretty annoying visually.

Thanks. I'm rewriting the all of the HTML currently. What's up there now is just the first quick iteration, and I don't like it and neither does anyone else. So I'm changing it completely.

# ? Oct 6, 2013 02:22

MrMoo: Sep 14, 2000

Does anyone have recommendations for refactoring a reasonably straight forward but JavaScript heavy site from 2009?

I haven't kept up to date with anything and barely remember anything how it was implemented. It still seems to work reasonably well, it looks like load performance can be improved with newer jQuery versions that have shrunk by 10x the size.

http://www.vxintimate.com/ ( lingerie)

Over the years some technologies have broken and changed, originally used Google Gears for accelerating uploads for administration and that was replaced with HTML 5 spec. Admin pages also used CSS background images for list boxes and every browser has subsequently dropped support there too.

MrMoo fucked around with this message at 02:50 on Oct 6, 2013

# ? Oct 6, 2013 02:48

DreadCthulhu: Sep 17, 2008; What the fuck is up, Denny's?!

I could use some advice regarding online billing platforms. I need to slap together a billing page for subscriptions (ideally one-time charges as well) in a reasonably short amount of time for a quick experiment we want to make. I'm certainly considering Stripe, but I keep hearing of all these other "wrappers" around Stripe which might facilitate things, especially if you're doing something likely very throwaway.

I'm curious if you folks have had experience with this and if you'd advise trying out sites like Chargebee/Chargify etc. for the kind of scenario above, or if Stripe is still the way to go.

# ? Oct 6, 2013 08:43

Dwayne Bensey: Jan 7, 2010

I'm trying to make my portfolio site responsive, particularly for my Galaxy S3 so I can show it to people at jobs fairs, etc. The problem is I can't seem to get my media queries to work properly across both the default Samsung browser and Chrome. Both of them give different values for device-width and device-height, so I've just been using width and dpi to adjust it for my phone.

Samsung browser:

Chrome:

(sorry for the large images)

I've tried the following:

code:

#container
{
	background-color: red;
	width: 50%;
	height: 50%;
}

@media screen and (max-width: 360px) and (-webkit-device-pixel-ratio: 2)
{ 
	#container
	{
		background-color: yellow;
		...
	}	
}

...but it still uses the color and dimensions from the first #container rule. Has anyone else had trouble with S3s? I've scoured Google and Stack Overflow, but none of the suggestions from other people seem to work

Am I missing something really obvious here?

edit: Never mind, it's working now!

In case anyone is interested:

code:

@media only screen and (max-device-width:720px) and (-webkit-min-device-pixel-ratio: 1.5)
{ 
	#container
	{
		background-color: yellow;
		...
	}	
}

Dwayne Bensey fucked around with this message at 22:44 on Oct 9, 2013

# ? Oct 9, 2013 20:05

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

I have a "how stuff works" type question about browsers and website resources. Google is failing me. Question: when I visit a website, my browser requests the resources (html file, css, images, js, etc) from the server. The server sends a response back and my browser renders the resources as appropriate. At this point, WHERE ARE the resources I'm looking at stored? For example, I visit https://www.somethingawful.com and the grenade logo is rendered - at this point where is my browser reading this image file from? It had to be transferred from the server to my computer, so does the file actually reside on my local machine somewhere? If it actually resides on my local computer, then why is right click --> Save As something entirely different from what's already happened? If it doesn't reside locally, then what's actually occurring as it's loading in my browser?

# ? Oct 9, 2013 20:39

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

It probably varies a bit between the browsers and OSes, but yes, once you load a site, all that stuff is stored on your computer. The browser will probably keep it in a hidden folder somewhere, and it will eventually be deleted to load new stuff or when you clear your cache. You can choose to save the image again outside that folder so it has a name and location easily understood by humans, and will never be automatically deleted by the browser.

Edit: On the responsive design issues, I'm pretty sure your media query is malformed and doesn't need that first 'and':

code:

@media (max-width: 360px) {
}

You probably also don't need the device-pixel-ratio stuff, unless you're specifically loading higher-resolution images. CSS pixels on 'retina' devices are actually points made of varying numbers of pixels (in Apple's case, a clean doubling). That way your 1080p phone doesn't have insanely tiny desktop-size sites loading in.

cbirdsong fucked around with this message at 20:55 on Oct 9, 2013

# ? Oct 9, 2013 20:46

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

caiman posted:

I have a "how stuff works" type question about browsers and website resources. Google is failing me. Question: when I visit a website, my browser requests the resources (html file, css, images, js, etc) from the server. The server sends a response back and my browser renders the resources as appropriate. At this point, WHERE ARE the resources I'm looking at stored? For example, I visit https://www.somethingawful.com and the grenade logo is rendered - at this point where is my browser reading this image file from? It had to be transferred from the server to my computer, so does the file actually reside on my local machine somewhere? If it actually resides on my local computer, then why is right click --> Save As something entirely different from what's already happened? If it doesn't reside locally, then what's actually occurring as it's loading in my browser?

As mentioned it will vary between browsers, but if you're looking at anything on your screen (browser or not) the data for that is in RAM on your computer and, optionally, stored in a file somewhere on your hard drive.

# ? Oct 9, 2013 20:54

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

Out of unskilled curiosity - I have a page with a dozen or so identical static elements (publications with author/date/blurb) that will conceivably stretch to a couple of dozen over time, and this is the third revision of exactly how they would be presented. I have no CMS or MYSQL, so how batshit is it for me to write it so the actual text is just a series of php arrays passed into a function that dumps them into the current design structure of <div><img=""><p> etcetera?

# ? Oct 10, 2013 06:23

Oh My Science: Dec 29, 2008

Ghostlight posted:

... etcetera?

You could skip all the PHP and use http://jekyllrb.com/

# ? Oct 10, 2013 06:48

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Ghostlight posted:

Out of unskilled curiosity - I have a page with a dozen or so identical static elements (publications with author/date/blurb) that will conceivably stretch to a couple of dozen over time, and this is the third revision of exactly how they would be presented. I have no CMS or MYSQL, so how batshit is it for me to write it so the actual text is just a series of php arrays passed into a function that dumps them into the current design structure of <div><img=""><p> etcetera?

Sounds simple enough to me.

# ? Oct 10, 2013 13:54

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

Anyone know of code/jQuery plugin to "pinch to zoom" an image on mobile? Anything I've seen is either not possible unless I open a new window without the viewport meta tag, or involves building the whole site in jQuery mobile or Sencha.

# ? Oct 10, 2013 14:00

jony neuemonic: Nov 13, 2009

Ghostlight posted:

Out of unskilled curiosity - I have a page with a dozen or so identical static elements (publications with author/date/blurb) that will conceivably stretch to a couple of dozen over time, and this is the third revision of exactly how they would be presented. I have no CMS or MYSQL, so how batshit is it for me to write it so the actual text is just a series of php arrays passed into a function that dumps them into the current design structure of <div><img=""><p> etcetera?

You could pretty easily make a PHP (or whatever language your host supports, really) template that loops through your array and creates the html for each item. You probably don't even need to write a function, honestly. How are you getting the data into the array in the first place?

# ? Oct 10, 2013 15:04

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 21:35

pipes!: Jul 10, 2001; Nap Ghost

The Merkinman posted:

Anyone know of code/jQuery plugin to "pinch to zoom" an image on mobile? Anything I've seen is either not possible unless I open a new window without the viewport meta tag, or involves building the whole site in jQuery mobile or Sencha.

What does your viewport tag look like?

# ? Oct 10, 2013 15:16

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

«‹›361 »