The Web Design & Development Megathread

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

«‹›361 »

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

Karthe posted:

the header calendar image uses a relative link but loads up fine when you directly access /event/1. Why does that link work but the CSS one has issues?

That shouldn't make any difference. How is this image defined? Can you show me the code?

Thermopyle posted:

Turns out that "stylehseet" is not the same as "stylesheet", but it sure as hell looks like the same word.

PhpStorm labels that as a spelling mistake for me, but other than that I probably would have been chasing my tail on it, too. Chrome doesn't bat an eye.
I was going to make a joke about adding it to your IDE's dictionary and it becoming part of the auto-complete, but it won't actually let me do that. :eng99:

# ? Feb 4, 2015 00:28

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 21:12

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

v1nce posted:

That shouldn't make any difference. How is this image defined? Can you show me the code?

Here's some HTML as appears when accessing https://calendar-angularjs-masterkale1.c9.io/event/1 (I reverted the code for the same of troubleshooting):

code:

<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <!-- This <link> won't load... -->
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    <base href="/">
  </head>
  <body ng-app="CalendarApp">
    <div class="header">
      <div class="container">
        <!-- ...but this <img> will -->        
        <a href="/"><img src= "img/logo.svg" width="51" height="54"></a>

EDIT: I removed the preceding slash from <img>

IAmKale fucked around with this message at 07:43 on Feb 4, 2015

# ? Feb 4, 2015 07:22

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

Karthe posted:

Here's some HTML as appears when accessing https://calendar-angularjs-masterkale1.c9.io/event/1 (I reverted the code for the same of troubleshooting):

code:

<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <!-- This <link> won't load... -->
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
    <base href="/">
  </head>
  <body ng-app="CalendarApp">
    <div class="header">
      <div class="container">
        <!-- ...but this <img> will -->        
        <a href="/"><img src= "/img/logo.svg" width="51" height="54"></a>

The logo path is an absolute path. It starts with /

That's what you want the css link to look like as well

# ? Feb 4, 2015 07:26

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

down with slavery posted:

The logo path is an absolute path. It starts with /

That's what you want the css link to look like as well

Ugh, I forgot to remove that forward-slash - that wasn't in the original HTML file. I inserted it yesterday during testing but forgot to remove it before I posted it. Try the link now, I removed the preceding slash yet the <img> displays just fine.

IAmKale fucked around with this message at 07:45 on Feb 4, 2015

# ? Feb 4, 2015 07:42

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Karthe posted:

Ugh, I forgot to remove that forward-slash - that wasn't in the original HTML file. I inserted it yesterday during testing but forgot to remove it before I posted it. Try the link now, I removed the preceding slash yet the <img> displays just fine.

You have <base href="/"> in your head so all relative paths are relative to site root. It doesn't affect your CSS declaration which comes before it.

# ? Feb 4, 2015 08:16

prom candy: Dec 16, 2005; Only I may dance

I'm doing a site for a client that has a lot of videos, I'm looking for a player that has the following features. I don't care if this is an embedded SaaS thing like Vimeo Pro or something that's totally self-hosted and self-managed. I just need it to be able to do the following stuff:

* Flexible advertising preroll, not necessarily with ad tags but with my own videos
* At least some branding/skinning features (watermark, etc.)
* Embeddable (I can probably work this out myself with iFrames)
* Works on all major devices/browsers

Free is nice, but paid is not a problem. It just needs to be really solid. Any suggestions?

# ? Feb 4, 2015 15:53

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

ynohtna posted:

You have <base href="/"> in your head so all relative paths are relative to site root. It doesn't affect your CSS declaration which comes before it.

Well I'll be, that was it. I also discovered that moving <base> above the CSS declaration "fixed" the relative CSS declaration as well. Thanks for pointing that out.

# ? Feb 4, 2015 16:50

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

I haven't used these guys yet, but I believe http://wistia.com/ is intended to cover your kind of use case, less about social video, more about embedded video and tools to help you get done whatever you need for that.

# ? Feb 4, 2015 19:54

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

Gonna cross-post this here, because I'll bet one of you will be able to answer this:

I own a domain. It's always been hosted through powweb, and the domain is registered there, too. I just noticed the domain expired back on January 14. I was going to re-register it through godaddy (I'm sure there are better places, but I already have other sites registered there, it's just easier), but godaddy's saying the domain is already taken. Sure enough, whois says the same thing - and what's more, they also say its expiration date is now January 14, 2016. As if it's been auto-renewed.

When I go to powweb, however, it's showing the domain as expired, with the option to renew it. How is it that powweb is giving me the option to renew this domain, but I can't register it anywhere else? Do they autopurchase their users' expired domains, with the intent of selling them back to them?

# ? Feb 4, 2015 21:40

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

jackpot posted:

How is it that powweb is giving me the option to renew this domain, but I can't register it anywhere else? Do they autopurchase their users' expired domains, with the intent of selling them back to them?

Yep.

A good provider will do this, hang onto it for a few months, and only charge the normal price to you as a way of preventing a squatter from grabbing it and charging you up the wazoo.

A shady provider will act like a squatter and charge you up the wazoo.

# ? Feb 4, 2015 22:04

My Rhythmic Crotch: Jan 13, 2011

I've been searching for quite a while now for something like Qualys SSL Labs, except capable of testing an intranet site. I have these SSL certs from our IT department that most browsers, and most applications do not trust. Starting to get desperate for a way to figure out the actual issue behind it all.

# ? Feb 4, 2015 23:05

prom candy: Dec 16, 2005; Only I may dance

Maluco Marinero posted:

I haven't used these guys yet, but I believe http://wistia.com/ is intended to cover your kind of use case, less about social video, more about embedded video and tools to help you get done whatever you need for that.

This looks really good, thank you!

# ? Feb 5, 2015 15:18

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

Are there any database hosting services that will help me to quickly get an API service up and running for cheap/free? I want to start practicing development with AngularJS but I'm feeling overwhelmed since I also feel like I have to simultaneously learn something like the Django REST Framework first before I can proceed. I'm just looking for something I can use in development to auth against and store data. Once I get comfortable with the Angular I figure I can then move on to Django and learn that at my leisure.

# ? Feb 5, 2015 16:20

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

Karthe posted:

Are there any database hosting services that will help me to quickly get an API service up and running for cheap/free? I want to start practicing development with AngularJS but I'm feeling overwhelmed since I also feel like I have to simultaneously learn something like the Django REST Framework first before I can proceed. I'm just looking for something I can use in development to auth against and store data. Once I get comfortable with the Angular I figure I can then move on to Django and learn that at my leisure.

I've never used it, but I think I've heard people using Firebase for something like that.

# ? Feb 5, 2015 17:43

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

Karthe posted:

Are there any database hosting services that will help me to quickly get an API service up and running for cheap/free? I want to start practicing development with AngularJS but I'm feeling overwhelmed since I also feel like I have to simultaneously learn something like the Django REST Framework first before I can proceed. I'm just looking for something I can use in development to auth against and store data. Once I get comfortable with the Angular I figure I can then move on to Django and learn that at my leisure.

I used this tutorial when I started learning Angular: https://thinkster.io/learn-to-build-realtime-webapps/

It uses Firebase as Thermopyle said, and I found it to be pretty good for learning.

# ? Feb 5, 2015 20:07

revmoo: May 25, 2006; #basta

What's a good way to store webpages for portfolio use? I am about to finish the biggest project of my career and it will all be entirely locked behind a login page and I need to be able to demo some of the stuff in the future.

I basically want to be able to store the state of a few pages into bookmarks or something where the user can click around in the page and any javascript state or dynamically/ajax loaded content will be present. This would preclude just saving the HTML page so I'm assuming I need a Chrome plugin or something?

# ? Feb 5, 2015 22:44

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

I tend to use wget for these kinds of shenanigans.

http://www.guyrutenberg.com/2014/05/02/make-offline-mirror-of-a-site-using-wget/
http://gnuwin32.sourceforge.net/packages/wget.htm

Double check what it dumps out though, it can be difficult to get exactly the right result.

# ? Feb 5, 2015 23:35

Workaday Wizard: Oct 23, 2009; by Pragmatica

Anyone here using React? Are there any cross-browser differences/incompatibilities I would need to care about?

# ? Feb 6, 2015 13:14

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

Shinku ABOOKEN posted:

Anyone here using React? Are there any cross-browser differences/incompatibilities I would need to care about?

Lots of us are. You need to use shims / polyfills for IE8, and I *think* that is as low as it goes, but check the docs.

There is plenty of React chat in the Modern Front End thread. I'm on my phone, so sorry for not liking, but it is on the main page.

# ? Feb 6, 2015 13:41

revmoo: May 25, 2006; #basta

v1nce posted:

I tend to use wget for these kinds of shenanigans.

http://www.guyrutenberg.com/2014/05/02/make-offline-mirror-of-a-site-using-wget/
http://gnuwin32.sourceforge.net/packages/wget.htm

Double check what it dumps out though, it can be difficult to get exactly the right result.

Not going to work, as I mentioned I want to capture the full state of the site with ajax content.

After doing some further research it looks like such a tool simply does not exist and I will have to live with screenshots.

# ? Feb 6, 2015 14:44

EAT THE EGGS RICOLA: May 29, 2008

revmoo posted:

What's a good way to store webpages for portfolio use? I am about to finish the biggest project of my career and it will all be entirely locked behind a login page and I need to be able to demo some of the stuff in the future.

I basically want to be able to store the state of a few pages into bookmarks or something where the user can click around in the page and any javascript state or dynamically/ajax loaded content will be present. This would preclude just saving the HTML page so I'm assuming I need a Chrome plugin or something?

How are you mocking your tests? I would just deploy a separate instance with test data on a private server and use that.

# ? Feb 6, 2015 14:51

revmoo: May 25, 2006; #basta

I'm not really interested in holding on to this companies entire codebase after I'm no longer an employee. I just wanted to grab some portions of the live app to demo at a point in the future.

# ? Feb 6, 2015 15:13

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

revmoo posted:

Not going to work, as I mentioned I want to capture the full state of the site with ajax content.

After doing some further research it looks like such a tool simply does not exist and I will have to live with screenshots.

Fire up a screen recorder and navigate the site and make a pretty movie. People love movies.

# ? Feb 6, 2015 16:29

revmoo: May 25, 2006; #basta

That's actually a pretty solid idea, thanks.

# ? Feb 6, 2015 16:40

TheEffect: Aug 12, 2013

This issue is driving me insane. Background- I have a webpage I made for fun as an easter egg for an internal site on my company's network. The index page isn't rendering the images and it's giving off a 404 not found error, even though they're in the appropriate directory. Pages that are linked to the index page DO get their pictures rendered. The webpages and the pictures are both in their own directories so I'm really not sure what could be going on. The tag is correct as well as the file name.

For example-
On my index page I have <img src="pics/opslogo.jpg"> which should point to http://[internal site]/html/Old_Ops_Website/pics/opslogo.jpg, which it does according to the page source, but it doesn't render even though I know the picture is in there.

On a separate page I have <img src="pics/connection.jpg"> which should point to http://[internal site]/html/Old_Ops_Website/pics/connection.jpg, which it does, and it DOES render correctly.

Interestingly enough the pictures that won't render when hitting the site from the network DO render correctly on the host machine itself.

Any ideas?

TheEffect fucked around with this message at 20:43 on Feb 6, 2015

# ? Feb 6, 2015 20:24

Video Nasty: Jun 17, 2003

If you right-click the image placeholder and choose "copy image url" (Chrome), paste that in your address bar and see where it gets you. It's possible that a BASE HREF is not allowing your paths to resolve correctly, or that the HREF in the image is missing a directory path that leads to the image properly. It could also be an issue where you are not allowing permissions to view the directory the images are stored in.

# ? Feb 6, 2015 21:45

TheEffect: Aug 12, 2013

Jake Blues posted:

If you right-click the image placeholder and choose "copy image url" (Chrome), paste that in your address bar and see where it gets you. It's possible that a BASE HREF is not allowing your paths to resolve correctly, or that the HREF in the image is missing a directory path that leads to the image properly. It could also be an issue where you are not allowing permissions to view the directory the images are stored in.

Copying and pasting the image URL gives me the following default 404 from ApacheTomcat-

quote:

Message- /html/Old_Ops_Website/pics/ops-logo.jpg
Description- The requested resource is not available.

The folder with the images store the images for all webpages on the site, so it can't be permissions since it works on the other pages right?

Here are the paths, taken from "copy-shortcut", to the images from the non-working page and a working one-

http://[internal site]/html/Old_Ops_Website/pics/ops-logo.jpg
http://[internal site]/html/Old_Ops_Website/pics/connection.jpg

Given those pieces of information, I'm absolutely bewildered as to why this isn't working.

Not sure if it makes any difference but the actual root of the website is located in "C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT" while the page I'm working on is located in "C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\ROOT\html\Old_Ops_Website". Both directories have index files.

I tried changing the index file to another name and hitting it via "http://[internal site]/html/Old_Ops_Website/test.html" with the same results.

Also tried "<img src="./pics/opslogo.jpg"/>", just in case, but no-go still.

Editeditedit-

Ok so I tried it with the images that I know for sure to be working on other pages and they show up on the index page as well. I still don't understand why the others won't show up since all the images are located in the exact same directory and when viewing the website from the host all images render correctly. Next I tried to link the images that aren't working to one of the other pages and they don't work there either. I've triple checked and the images are definitely in the right directory and in the correct format and I can open them up and view them. What the hell?

TheEffect fucked around with this message at 23:03 on Feb 6, 2015

# ? Feb 6, 2015 22:30

thegasman2000: Feb 12, 2005; Update my TFLC log? BOLLOCKS!
/

I want to make the worlds simplest page. It will show either yes or no... like https://isitchristmas.com/

The complication Is I want to be able to text, or email, the change from NO to YES. Whats the easiest way of doing this? Its a site to say if someone has been sent off yet, so speed is kinda the point.

# ? Feb 7, 2015 01:08

My Rhythmic Crotch: Jan 13, 2011

thegasman2000 posted:

I want to make the worlds simplest page. It will show either yes or no... like https://isitchristmas.com/

The complication Is I want to be able to text, or email, the change from NO to YES. Whats the easiest way of doing this? Its a site to say if someone has been sent off yet, so speed is kinda the point.

You need a script that runs every day on your server, and you need a service to send texts and emails. Try Twilio for text and Mailgun for mail. You'd think sending email wouldn't be hard but it is a pain in the rear end getting an email server setup that will not be flagged as spam. Twilio and Mailgun both have easy to use Python APIs.

# ? Feb 7, 2015 03:56

thegasman2000: Feb 12, 2005; Update my TFLC log? BOLLOCKS!
/

Thanks I will check them out!

I wonder if I am over thinking this and an ftp app for my iPhone with 2 files, one yes and one no, would work.

thegasman2000 fucked around with this message at 05:07 on Feb 7, 2015

# ? Feb 7, 2015 05:01

The Dave: Sep 9, 2003

I wonder if IFTTT can do anything for you.

# ? Feb 7, 2015 05:11

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

thegasman2000 posted:

Thanks I will check them out!

I wonder if I am over thinking this and an ftp app for my iPhone with 2 files, one yes and one no, would work.

Or an SSH client for your phone so you can edit.

# ? Feb 7, 2015 06:29

NovemberMike: Dec 28, 2008

Anyone have any good books/websites/resources that explain responsive design well?

# ? Feb 8, 2015 00:23

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

NovemberMike posted:

Anyone have any good books/websites/resources that explain responsive design well?

http://www.abookapart.com/products/responsive-web-design

# ? Feb 8, 2015 00:41

ArcticZombie: Sep 15, 2010

I have a div which contains a bunch of other divs. The parent div and child divs are fixed sizes. When it contains too many elements to display, I want it to overflow to the right, horizontally, so I can scroll left/right to see to rest. Currently, what will happen is it fill up until it hits the right edge, then start a new row underneath to create a vertical scroll, rather than a horizontal scroll.

For example, what I have:

What I want:

How can I do this in a way which will work on both Firefox and Safari/Chrome? The shot above was achieved in a webkit-specific way. You can check out the CSS at https://www.scrubble.co.uk. The viewport has to be less that 1024px wide or you'll get the other view.

# ? Feb 8, 2015 01:21

Leshy: Jun 21, 2004

The floats wrap automatically since they're in an element of fixed size; there's not a really good way to overcome that, as far as I know.

A quick and easy solution that seems to work fine from some testing in Firefox and Vivaldi (Webkit) is changing the individual result boxes from floats to inline block elements. Coupled with a white-space nowrap on the container, they'll line up horizontally without wrapping. A few tweaks to the overflow properties and it should work as you want it to, although you'd have to test it with whatever other browsers you're serving to make sure it works there too. These changes should do the trick:

code:

.result {
  display: inline-block;     // instead of float: left;
}

#results {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

You'll have to add some height to the #results container too to accomodate the horizontal scrollbar.

# ? Feb 8, 2015 02:00

Ron Don Volante: Dec 29, 2012

Can anyone explain how a page like this is made? http://www.coinflation.com/silver_coin_values.html

I'm wondering how a) they automatically grab the current price of silver (or is it manually updated?) and then b) how the chart auto-calculates each coin's silver value.

# ? Feb 8, 2015 08:48

ArcticZombie: Sep 15, 2010

Leshy posted:

The floats wrap automatically since they're in an element of fixed size; there's not a really good way to overcome that, as far as I know.

A quick and easy solution that seems to work fine from some testing in Firefox and Vivaldi (Webkit) is changing the individual result boxes from floats to inline block elements. Coupled with a white-space nowrap on the container, they'll line up horizontally without wrapping. A few tweaks to the overflow properties and it should work as you want it to, although you'd have to test it with whatever other browsers you're serving to make sure it works there too. These changes should do the trick:
code:
.result {
  display: inline-block;     // instead of float: left;
}

#results {
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}
You'll have to add some height to the #results container too to accomodate the horizontal scrollbar.

I had tried inline-block but didn't use it with nowrap. Thanks, this worked a treat.

# ? Feb 8, 2015 11:48

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

Ron Don Volante posted:

Can anyone explain how a page like this is made? http://www.coinflation.com/silver_coin_values.html

I'm wondering how a) they automatically grab the current price of silver (or is it manually updated?) and then b) how the chart auto-calculates each coin's silver value.

a) a script grabs the price of silver, either from an API, or scraping it off another site.
b) another script calculates the value of the coins based off of A

This is basic stuff; you need to know the price, and a little bit about each coin (name, amount of silver in it). The scripts could be run either on the server (before the page gets to you), on the client (after the page gets to you) or a mix of the two. Since I'm on my phone, I can't tell you which is the case on that particular page. Regardless, this would be a great learning project , or something someone exoerienced could bang out in a half hour.

# ? Feb 8, 2015 16:01

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 21:12

NovemberMike: Dec 28, 2008

Kobayashi posted:

http://www.abookapart.com/products/responsive-web-design

Thanks, I grabbed the ebook and it seems pretty useful.

# ? Feb 9, 2015 00:15

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

«‹›361 »