The Web Design & Development Megathread

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

«‹›7 »

fuf: Sep 12, 2004; haha

If someone clicks a link to, eg, an .mp4 file, is there any way to force their browser to download it like any other file rather than trying to stream it?

# ¿ Jul 20, 2014 11:29

Adbot: ADBOT LOVES YOU

# ¿ May 22, 2024 18:22

fuf: Sep 12, 2004; haha

Thanks, that put me on the right track

# ¿ Jul 20, 2014 12:08

fuf: Sep 12, 2004; haha

nice, even better.

# ¿ Jul 20, 2014 13:55

fuf: Sep 12, 2004; haha

Meta Ridley posted:

So where do I get started in webdev these days, if I want to make a career change?

I'm going through a similar updating of early 2000s knowledge. Here are some big things that have changed for me.

How I did it 10 years ago: mix html, php and mysql all together in a single file, so that the layout of pages is sprinkled with various "SELECT * FROM..." statements.
How I do it now: distinguish between the model (database stuff), controller (php (or equivalent) stuff) and view (html/css stuff). Treat the "front end" as distinct from the "back end".

How I did it 10 years ago: do everything on the server with PHP from scratch.
How I do it now: Pick a language and use a framework (java script: Node, Python: Django, Ruby: Ruby on Rails, etc.).

How I did it 10 years ago: Write all my own html and css from scratch, and produce websites that look like poo poo.
How I do it now: use Zurb Foundation for layouts and use SASS to make global changes to styles, and produce websites that look like poo poo.

How I did it 10 years ago: write code in notepad, upload files via ftp to a live webserver, accidentally delete important code and spend hours searching for missing semicolons.
How I do it now: write code in whatever (vim), use grunt to check for errors every time I save, use git to keep backups of all changes and to push files to a webserver.

How I did it 10 years ago: host websites on lovely shared hosting
How I do it now: host websites on Amazon AWS instances that scale up and down depending on demand and replace each other when one goes down etc.

# ¿ Jul 24, 2014 20:19

fuf: Sep 12, 2004; haha

Are any of those cool project management sites / software geared towards one-man operations?

I'd love to consolidate my calendar, todos, documentation and maybe git repos into one place but I've never found something that felt quite right.

# ¿ Jul 31, 2014 10:19

fuf: Sep 12, 2004; haha

gently caress me is there some universal law that if you make a website for someone they will only ever look at it on IE8? :negative:

# ¿ Aug 15, 2014 18:34

fuf: Sep 12, 2004; haha

Lumpy posted:

So you don't check your work in IE8 is what you are saying?

Well yeah, pretty often I don't ( :shobon:

), but no in this case it was something else. I made a separate stylesheet for ie8 that makes the site way uglier (but at least makes it work). Then as I was checking nginx logs today I realised my client has only ever seen the ie8 version.

# ¿ Aug 15, 2014 20:02

fuf: Sep 12, 2004; haha

Is there a way to check if a photograph has a copyright? This one in particular. How careful do I have to be if I use it on a site?

# ¿ Aug 15, 2014 22:13

fuf: Sep 12, 2004; haha

RobertKerans posted:

Lampedusa photo

wow, thanks for your effort!

I think you're right about the date, and I think it's probably an Italian photo. Italian copyright distinguishes "works of photographic art" (copyright 70 years) from "simple photographs" (20 years). I'm not sure which one the image falls under, but the Italian wikipedia page for Lampedusa is using the image and claiming it is a "simple photograph".

I also discovered that Paris Match uses the image here with a Droits r�serv�s message, which means it's an "orphan work" whose copyright can't be established (and so can be used).

# ¿ Aug 16, 2014 10:33

fuf: Sep 12, 2004; haha

Is there a way to transition from height:100% to height:auto? I know you can't animate to height:auto, but I found some workarounds that use max-height. But all the examples are based on starting from height:0 and I dunno how to do it with height:100%.

# ¿ Aug 27, 2014 15:28

fuf: Sep 12, 2004; haha

Thanks but I can't get that to work either. The heights are all correct but there's no animation - it just jumps to the new height.

# ¿ Aug 27, 2014 15:59

fuf: Sep 12, 2004; haha

got it working with min-height instead.

min-height:100%;

transitions to

min-height:0%;
height:auto;

# ¿ Aug 27, 2014 16:03

fuf: Sep 12, 2004; haha

Can someone (preferably a safari user) take a look at the logo on this site and tell me if it looks blurry?
http://bespokedrywall.campbellmarsh.co.uk/
(The orange "bespoke drywall" logo on the left)
The client is insisting it's blurry but it looks fine to me.

How should I be turning a svg into a png logo? I just picked an arbitrary large size (700px wide), but is that a bad idea if it's usually going to get squashed down to like 150px wide?

# ¿ Sep 2, 2014 15:59

fuf: Sep 12, 2004; haha

Awesome, thanks for the responses.

I changed the size so it matches the size it'll display at (180x90), and I added an alternative logo which is exactly twice as big for retina displays. I also put kedo's little css snippet in. Would someone mind checking if it looks any better?

e: thanks kedo

fuf fucked around with this message at 17:34 on Sep 2, 2014

# ¿ Sep 2, 2014 16:44

fuf: Sep 12, 2004; haha

Kobayashi posted:

Are you doing something with the scrolling? It doesn't feel natural. Don't ever try to get cute with scrolling, it never works.

Yeah it's part of the wordpress theme they bought. They seem to like it...

(I was a little embarrassed to share that link because I didn't make the site from scratch and there's some weird stuff going on with the theme / plugins / custom JS etc.)

# ¿ Sep 2, 2014 18:04

fuf: Sep 12, 2004; haha

I might be wrong but I do feel like there's a little bit of favouritism towards django on these forums for whatever reason (myself included).

# ¿ Sep 8, 2014 12:19

fuf: Sep 12, 2004; haha

Does google crawl elements if they're set to display:none?

I have some paragraphs of text that I want to fade in nicely but I wanna make sure google can read them. Should I hide them off-screen or set height:0 or something instead?

# ¿ Sep 10, 2014 16:09

fuf: Sep 12, 2004; haha

Heskie posted:

You can double check though using Webmaster Tools and using 'Fetch as Google' https://support.google.com/webmasters/answer/6066468?hl=en&ref_topic=6066464

oh hey that's cool.

# ¿ Sep 10, 2014 16:29

fuf: Sep 12, 2004; haha

anyone good with Compass, specifically transitions?

How come this works:

code:

element {
   transition: opacity 2s;
}

but this doesn't?

code:

@import 'compass/css3/transition';
element {
   @include transition-property('opacity');
   @include transition-duration(2);
}

What am I missing?

Other Compass mixins work fine.

# ¿ Sep 18, 2014 15:54

fuf: Sep 12, 2004; haha

skipped a) and went straight for b), thanks.

# ¿ Sep 18, 2014 17:42

fuf: Sep 12, 2004; haha

wutup can anyone help me with this?

This site has a breakpoint at <1000px where it switches to a single column 100% wide. It works fine when I resize the browser window but it doesn't work on my phone or using the chrome dev tools phone emulation. As soon as I turn on emulation the site gets a fixed width of 980px. I can't work out where the gently caress that 980 number is coming from. I can't see it in the CSS anywhere. How do I track something like that down?

e: alright apparently 980 is the default mobile viewport width or something. I fixed it by adding:

code:

<meta name="viewport" content="width=device-width, user-scalable=no">

I still don't really understand why / how a mobile viewport is 980px wide if the screen is actually much smaller.

e2: removed the site because I'm embarrassed.

fuf fucked around with this message at 12:46 on Sep 25, 2014

# ¿ Sep 25, 2014 11:12

fuf: Sep 12, 2004; haha

caiman posted:

one less http request.

Is it better to load one large js file than multiple small ones? I've always wondered this.

I think this looks nicer at least:

code:

<script src="js/main.js"></script>

than this:

code:

<script src="js/lib/jquery.js"></script>
<script src="js/lib/jquery.scrollto.js"></script>
<script src="js/lib/jquery-scrollspy.js"></script>
<script src="js/lib/foundation.js"></script>
<script src="js/lib/modernizr.js"></script>
<script src="js/lib/fastclick.js"></script>
<script src="js/lib/director.js"></script>
<script src="js/main.js"></script>

# ¿ Sep 28, 2014 14:54

fuf: Sep 12, 2004; haha

hey this is interesting:
http://jsfiddle.net/1en2q2x2/2/

In Chrome <strong> overrides font-weight:300, but in Firefox it doesn't.

I couldn't work out why wordpress wasn't showing bold text, and it turned out to be because the theme stylesheet had font-weight:300 on <body> for some reason.

# ¿ Sep 28, 2014 15:00

fuf: Sep 12, 2004; haha

The Dave posted:

Yeah but if you need to update a vendor script you've made more work for yourself.

I guess but grunt makes it pretty easy to concatenate and minify a bunch of scripts.

The Dave posted:

Could you set a rule for the strong tag for font weight 900 or something?

Thanks that's a good idea. Seems to work fine.

# ¿ Sep 28, 2014 16:10

fuf: Sep 12, 2004; haha

Munkeymon posted:

Because the time the browser spends waiting for that to 404 can't possibly be significant, right?

uh is that sarcasm? Because that is exactly how I load all my js libraries :shobon:

(try to load from a cdn, check if it loaded, if it didn't fall back to a local version)

# ¿ Sep 29, 2014 21:12

fuf: Sep 12, 2004; haha

caiman posted:

I make relatively simple websites with little user interaction beyond link clicking, searching, and filling out contact forms. Can someone explain to me how a framework like Angular/Ember/React would benefit me, if at all?

They wouldn't. I made the mistake of insisting on an elaborate framework to make a few basic sites because I thought it would help me learn, but it was counterproductive. Wait until you have something more app-like.
I do use a JS router though (https://github.com/flatiron/director, credit to whichever goon recommended this to me a while ago) for that nice, no-page-refresh feeling.

Also no one has linked to this thread yet:
http://forums.somethingawful.com/showthread.php?threadid=3571035

# ¿ Oct 1, 2014 09:54

fuf: Sep 12, 2004; haha

How does buying web fonts work? I've only used google fonts before where you just link directly to the font on google. If I buy this:
http://www.fonts.com/font/monotype/rockwell?QueryFontType=Web#product_top
How do I include it on my site? Presumably I need to auth with their server somehow? I want to use it on a client site with an as-yet-undetermined url and I dunno if I should buy it or get the client to buy it or what.

bonus question: any free fonts that look kinda like Rockwell?

fuf fucked around with this message at 16:59 on Oct 2, 2014

# ¿ Oct 2, 2014 16:50

fuf: Sep 12, 2004; haha

Awesome, that makes sense, thanks buddy.

# ¿ Oct 2, 2014 20:16

fuf: Sep 12, 2004; haha

Speaking of software:

I've been using Linux for a long time but I'm thinking of switching to Windows, and I'm wondering how I'm gonna preserve some of my workflow. Any Windows users here who still use command line tools like grunt, bower, ssh, git etc? How do you do it? I guess I should just run a virtual linux machine?

# ¿ Oct 8, 2014 11:24

fuf: Sep 12, 2004; haha

Thanks for the responses.

Thermopyle posted:

This is what I do, and it works perfect. I developed straight on Windows for years, but a couple years ago I decided to move to my current setup with Ubuntu in VMWare on two of my three monitors.

How do you share files between the two? This is my only worry. Do I have to sync two directories somehow, or can they share?

caiman posted:

I'm curious, why are you considering switching?

I bought a badass new laptop and it has really bad linux support. I've persevered with linux as my sole OS for about 10 years, but this time I just can't face trying to fix everything. I had an embarrassing incident in a meeting with a client where I couldn't adjust the screen brightness and I was flapping around in the terminal trying to fix it for ages. That was kind of the final straw. I used to not mind having a half-broken computer all the time, but I can't really risk it anymore, I just need something that works.

# ¿ Oct 8, 2014 16:59

fuf: Sep 12, 2004; haha

Why'd you switch away from vim Thermopyle? What do you use now?

Sometimes I wonder if I should switch to a fancy IDE, but like Lumpy I could never use anything without a vim mode. Any time I have to edit text outside of vim I end up with jjjjkkkkkllllllhhhhhh all over the place.

But now that I'm on Windows again I'm willing to give sublime etc. a shot.

fuf fucked around with this message at 18:18 on Oct 11, 2014

# ¿ Oct 11, 2014 18:14

fuf: Sep 12, 2004; haha

If I want to try Sublime Text should I go with 2 or 3?

# ¿ Oct 14, 2014 11:41

fuf: Sep 12, 2004; haha

Does the iphone browser try and detect phone numbers on pages and make them clickable? Client is complaining that when she clicks the phone number link it doesn't work and the number is invalid, but there is no link on the phone number. :confused:

# ¿ Oct 15, 2014 15:27

fuf: Sep 12, 2004; haha

Thanks both.

The problem with just disabling it is that she'll think I solved the problem by removing a feature, even though it's a feature I didn't know existed :v:

I think I solved it with this:

code:

<a href="tel:+442074919698">+44 (0) 207 4919 698</a>

First time I've used "tel".

It wasn't working before because of the brackets around the 0 (it started the number with 207)

# ¿ Oct 15, 2014 15:46

fuf: Sep 12, 2004; haha

Design I was just given to work with :negative:

scream shoot :v:

# ¿ Oct 16, 2014 13:53

fuf: Sep 12, 2004; haha

Does anyone know anything about electronic signatures? I just got asked to quote for a site that would include an "e signature module" and I kinda have no idea what that means.

I guess the only way is to sign up to one of the e sig companies (digisign etc) and embed their forms etc? No way to do a free / self-hosted version?

fuf fucked around with this message at 14:14 on Nov 20, 2014

# ¿ Nov 20, 2014 13:52

fuf: Sep 12, 2004; haha

revmoo posted:

My understanding is you basically just put a form where they have to manually type out their full name, which you then store as a row in a database table that contains their signature plus timestamp and details (might as well store their UA and ip address).

But they have to draw their signature on screen or something right? I can't find anything about how to implement that on your own site, just a bunch of companies that want you to pay monthly to do it on theirs.

# ¿ Nov 20, 2014 14:18

fuf: Sep 12, 2004; haha

Chris! posted:

There's Adobe Echosign https://www.echosign.adobe.com which allows you to "Embed signable forms in your website" on their Enterprise level - but doesn't list pricing for that level of system, might be overkill for what you need?

Thanks but yeah I doubt they'll want to fork out for that.

revmoo posted:

No you literally just put in a input type text and have them type out their name. Seems kinda flimsy but as far as I know courts have upheld these things as valid.

haha that's really weird.

I'm waiting to hear back on what they actually need it for.

# ¿ Nov 20, 2014 14:48

fuf: Sep 12, 2004; haha

haha turns out they just want a petition that people can add their names to. I should have clarified before jumping the gun. Thanks for the advice anyway

# ¿ Nov 20, 2014 15:15

Adbot: ADBOT LOVES YOU

# ¿ May 22, 2024 18:22

fuf: Sep 12, 2004; haha

So what's the deal with the .io tld? Did it get popular just because lots of names were still available? Do you think the popularity will last? Is it worth registering [my_startup_name].io?

# ¿ Dec 2, 2014 19:58

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

«‹›7 »