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

How come when I have 4 divs with:

code:

float:left
width:25%

they line up in a nice little row except on Internet Explorer where the last one gets shoved down a row?

e: Thanks MonkeyMaker

fuf fucked around with this message at 20:25 on Jul 23, 2013

# ¿ Jul 23, 2013 20:08

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 02:38

fuf: Sep 12, 2004; haha

Yeah that Macaw thing looks pretty amazing.

What was the name of that software that set up some kind of virtual web server really easily? I feel like the word 'up' was involved somehow.

Alternatively: what's the easiest / simplest way for me to set up everything necessary to run Wordpress on an old Ubuntu laptop so that I can do some theme development stuff locally?

# ¿ Jul 24, 2013 17:33

fuf: Sep 12, 2004; haha

Thanks both.

Vagrantup looks pretty cool, but it's not quite what I remembered.

Anyway installing apache / mysql / php was easy so I'm all set.

# ¿ Jul 24, 2013 18:25

fuf: Sep 12, 2004; haha

Lumpy posted:

I'm still working my way through this, but here's another good read (so far!) on typography: http://practicaltypography.com/

You can send the 'Typography in 10 minutes' page to clients!

quote:

The fastest, eas�i�est, and most vis�i�ble im�prove�ment you can make to your ty�pog�ra�phy is to ig�nore the fonts that came free with your com�put�er (known as sys�tem fonts) and buy a pro�fes�sion�al font (like those found in font recommendations).

This is useless for web design, right? I have a pretty flimsy grasp of how fonts work but I always thought they came from the user side?

(I know this guide / book isn't just for web design stuff)

# ¿ Jul 26, 2013 19:04

fuf: Sep 12, 2004; haha

Winter is Cuming posted:

I loving loathe a lot about it.

Like what?

# ¿ Aug 16, 2013 10:07

fuf: Sep 12, 2004; haha

Dynamic favicons
http://lab.ejci.net/favico.js/

Anyone tried this? It looks pretty cool.

# ¿ Sep 5, 2013 20:08

fuf: Sep 12, 2004; haha

Oh My Science posted:

I'm actually fairly impressed with Flywheel, if anyone wants to give it a shot I snagged some extra beta codes.

Looks interesting, thanks.

I used this one: wbpvd

edit: heads up: they don't let you do anything before entering credit card details.

e2: prices.

Tiny
$15.00 / Month
5,000 Monthly Visitors
5 GB of Storage
250 GB Bandwidth

Professional
$30.00 / Month
25,000 Monthly Visitors
10 GB of Storage
500 GB Bandwidth

Business
$75.00 / Month
100,000 Monthly Visitors
20 GB of Storage
1 TB Bandwidth

And note each site has to be paid for separately.

I'm not convinced those prices justify the benefits tbh. It is pretty slick though. But maybe only for people who aren't comfortable dealing with hosting directly.

fuf fucked around with this message at 20:55 on Sep 11, 2013

# ¿ Sep 11, 2013 20:43

fuf: Sep 12, 2004; haha

I've just discovered http://www.google.com/fonts and it seems like a pretty ideal way of allowing unconventional fonts.

I vaguely remember some controversy about web fonts. Is there anything I should look out for? Is there a proportion of users it won't work for?

# ¿ Sep 23, 2013 13:51

fuf: Sep 12, 2004; haha

Cool, thanks for the reassurance.

# ¿ Sep 23, 2013 15:24

fuf: Sep 12, 2004; haha

Yeah dual-booting into linux is fairly painless and makes development a lot easier.

I installed Ubuntu just because I wanted to play around with lamp and git, but I'm so used to it now that I only boot into Windows for games.

# ¿ Sep 25, 2013 17:43

fuf: Sep 12, 2004; haha

It drives me crazy how often I get confused by the same loving issue: how to centre content. I never know if I'm doing it right.

If I want to centre a row of list items, is this enough?

code:

ul {
    text-align:center;
}

li {
    display:inline;
}

Or is there something else I need to watch out for?

# ¿ Oct 13, 2013 13:48

fuf: Sep 12, 2004; haha

Uziel posted:

I'm trying to get a Bootstrap 3 sticky footer to work using this code:
http://pastebin.com/7rs6PEmZ

Did you add padding to the bottom of <body>?

From the bootstrap docs:

quote:

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-bottom: 70px; }

Make sure to include this after the core Bootstrap CSS.

# ¿ Oct 15, 2013 14:04

fuf: Sep 12, 2004; haha

Kobayashi posted:

(by Ghost)

DigitalOcean now have a ghost droplet image. I played around with it yesterday - it's pretty cool.

If I use bootstrap to make a site, is there something that will go through bootstrap.css and strip out everything that doesn't get used?

# ¿ Oct 18, 2013 11:57

fuf: Sep 12, 2004; haha

Oh My Science posted:

Plus you could always keep the full version in your dev environment and just strip it down in production.

Yeah I was hoping to do something like this.

It's a really basic one-page site, but I'm still using bootstrap because I'm bad at css. It pains me to think of all that extra unused bootstrap code getting loaded for no reason.

# ¿ Oct 18, 2013 19:28

fuf: Sep 12, 2004; haha

Lumpy posted:

One file for reset / normalization

Lumpy posted:

Most people have a standard reset or normalize file they include in every single site they make which has the basics in it, and is included before everything else.

Any chance you could expand on this a bit (or post a link)? What kind of stuff goes in there?

e: nm pipes posted some links

# ¿ Oct 22, 2013 20:06

fuf: Sep 12, 2004; haha

I'm trying to wean myself off Twitter Bootstrap.

Is there something like Initializr which explains why each thing is in there and what it's doing? I'm not ready to write everything from scratch, but I'm also sick of looking at code and going "welp, I guess that's important, I better leave it alone". I want to make a site and understand exactly what's happening with every bit of code.

# ¿ Jan 5, 2014 18:50

fuf: Sep 12, 2004; haha

Thanks for the responses.

I decided to take the plunge and just start building from scratch. I'm borrowing stuff from bootstrap and html5 boilerplate but only when I have a reason to and only when I understand what it's doing.

I'm used to using grunt (and grunt-watch) to compile LESS, but never used livereload before - pretty handy!

What's the issue with LESS compared to other preprocessors? (I guess SASS?) I'm using it just because I'm familiar with it from bootstrap but if there's a good reason to switch then now is probably the time I should do it.

# ¿ Jan 6, 2014 19:05

fuf: Sep 12, 2004; haha

omg Internet Explorer 8 :negative:

So much wasted time.

Three things:

1) What is the actual market share for IE8? I keep seeing different numbers, ranging from like 1% to 20%.

2) What are people's thoughts on displaying a "You are using an outdated browser, you should update" message for IE8 users? Do you think maybe it comes across badly and annoys users?

3) Bootstrap etc advocate a "mobile first" approach where you default to a one-column mobile layout and then use media queries to adjust for wider screens. But IE8 doesn't support media queries. So do you a) write a whole separate stylesheet for IE8? b) use a polyfill to get media queries working in IE8, or c) forget "mobile first" and make your default layout the one that IE8 users will see?
(I couldn't get (b) to work, so I did (a). If I was starting from scratch I think I would do (c))

# ¿ Apr 6, 2014 15:31

fuf: Sep 12, 2004; haha

Is there a name for the "make a container fill the whole height of a screen" thing? Like when a site header fills the whole screen and then the next section comes into view as soon as you start scrolling. eg: https://ghost.org/

I've been doing it with jQuery like this, but wondered if there was a more standard approach:

code:

if ($('#container').height() < $(window).height()){
  $('#container'.height($(window).height());
}

Also thanks for the responses re IE8 compatibility a few pages back. Realised I forgot to respond after my initial post (how frightfully rude :ohdear:

# ¿ Apr 23, 2014 16:22

fuf: Sep 12, 2004; haha

Well poo poo, that was a whole bunch of wasted time then! I have no idea why I thought I had to use javascript for something so simple. Thanks to the three of you.

I hate how when I try and be clever and solve problems myself instead of just googling I usually end up with some overly elaborate solution because of a basic gap in my knowledge. :shobon:

# ¿ Apr 23, 2014 17:09

fuf: Sep 12, 2004; haha

HTML5 boilerplate does a clever thing where it tries to load a remote version of jQuery, then loads a local version if that fails:

code:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

1) How would I do something similar to check for Angularjs? Is there an equivalent of window.jQuery that would check if Angular is loaded?

2) Can I do something similar for CSS? If I'm loading a remote version of bootstrap:

code:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

How could I check it's loaded and then revert to a local version if it's not? If it's not possible then is it better to always load a local version (slower) or always load a remote version (riskier)?

edit: oh wow, pasting that bootstrap link bootstrapified the forums for me.

# ¿ Apr 24, 2014 13:46

fuf: Sep 12, 2004; haha

Yup that works, thanks

edit: if anyone's interested I checked for the bootstrap JS files by seeing if the "modal" method exists:

code:

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>$().modal || document.write('<script src="js/vendor/bootstrap.min.js"></script>')</script>

Still stumped on how to check for css though.

fuf fucked around with this message at 14:25 on Apr 24, 2014

# ¿ Apr 24, 2014 14:07

fuf: Sep 12, 2004; haha

kedo posted:

Trello

Just checked this out and I like it a lot, thanks. I spent ages the other day searching for todo list software but this never popped up.

# ¿ Jun 3, 2014 10:23

fuf: Sep 12, 2004; haha

pipebomb posted:

Is NameCheap still considered the go-to for domain reg/transfers and SSL certs?

There's a recent discussion of registrars in the hosting thread (starts near the bottom of this page):
http://forums.somethingawful.com/showthread.php?threadid=3289126&userid=0&perpage=40&pagenumber=81

# ¿ Jun 9, 2014 17:18

fuf: Sep 12, 2004; haha

Goon posted:

What would your recommendations be for a set of frameworks that have broad support, a bright future, aren't too imposing to learn as a newbie, and work well together?

I'm only like one stage ahead of you in terms of experience but I've been really enjoying using MEAN (Mongodb, Express, Angular and Node) for the last few months. It all works pretty nicely.

There's a premade stack here http://mean.io/#!/
But I recommend following the tutorials on scotch.io and building from scratch
http://scotch.io/tutorials/javascript/creating-a-single-page-todo-app-with-node-and-angular

One day I am gonna ask about using Node in production in this thread, and whether it can replace apache and nginx, but I'm not quite there yet.

# ¿ Jun 16, 2014 11:29

fuf: Sep 12, 2004; haha

Chill Callahan posted:

The MEAN stack sounds pretty miserable.

How come?

I finally settled on something after trying like a million loving combinations of different frameworks. Please don't make me change again.

Lumpy posted:

others recoil in horror at using JS on the server. I have no opinion on the matter.

What are some reasons people give for this? I don't wanna keep using Node if it's really so terrible, but a JS backend is a pretty big bonus for me because it's the only language I know other than php. Also I really rely on stuff like grunt now.

# ¿ Jun 16, 2014 15:53

fuf: Sep 12, 2004; haha

Yeah that all makes sense.

I mean I didn't pick Node just because it's JS, that's just a nice bonus. I like how easy it is to manage projects with NPM, grunt, etc., and also how you have to build everything from scratch so you know what's going on.

I've gotten pretty far with django a few times in the past, but managing different versions of python with virtual environments or whatever kind of drove me crazy (can't remember the details).

What I really want to know is if Node is actually significantly slower, less reliable, or less secure or something, because that would be a good reason to change.

quote:

running a server knowing just JS seems like a bad idea.

You mean like managing a server? I've been doing that for a while with just bash. :shobon:

What else might I need?

(not trying to be defensive or anything, these are genuine questions!

)

# ¿ Jun 16, 2014 18:18

fuf: Sep 12, 2004; haha

Chris! posted:

I prefer Zurb Foundation

Finally checked this out today thanks to your posts and you're not wrong, it's a lot nicer than bootstrap. The SASS files are a lot easier to read through. gently caress a bootstrap.

# ¿ Jun 17, 2014 18:00

fuf: Sep 12, 2004; haha

Foundation does some clever adjusting of padding depending on the height of the nav bar, which changes with page width. But it only updates the padding on a page refresh, not dynamically as the browser window is resized.

Does that still count as "responsive"? Is it good enough that a site looks good at any width when it first loads, or should it adjust 'live'? I mean how often are people resizing their browser windows anyway?

# ¿ Jun 18, 2014 13:37

fuf: Sep 12, 2004; haha

Chris! posted:

Hmm this doesn't sound right - it should all adjust when the browser window is resized (for example the topbar on the Foundation site itself, or on the examples here http://foundation.zurb.com/docs/components/topbar.html - works fine in Chrome), unless I'm misunderstanding what you mean?

I made a little demo:

http://fuf.pw/foundation/

At around 750px wide the list drops down onto a second line, so the nav bar is twice as high, but the site content doesn't adjust and gets hidden. If you refresh the page it adjusts and moves down. (at least that's how it works for me)

# ¿ Jun 18, 2014 14:30

fuf: Sep 12, 2004; haha

cbirdsong posted:

Rotating a tablet between portrait and landscape is probably a real-world use case for crossing that particular width.

Very good point!

Chris! posted:

Ahh I see what you mean. Yeah, for that I guess you'd either have to adjust the break-point at which the main menu gets hidden (but with so many menu items it would be swapped for the mobile menu at like 750px) or manually adjust the padding with media queries.

Just realised what you meant about padding - the content drops down when you refresh but doesn't do it "live". Truth be told I've never used the top-bar, I always use Foundation's off-canvas for my mobile menu, so I've not noticed that before!

So it turns out Foundation has a JS function which adds padding to <body> depending on the height of the topbar when the page loads. This overrides any media queries I set.

The only solution I've come up with is to use jquery to call the same Foundation function every time the window changes size:

code:

$(window).resize(function(){
   Foundation.libs.topbar.init();
});

Now the body padding changes as soon as the topbar gets taller. Not exactly efficient, but it works.

# ¿ Jun 18, 2014 16:49

fuf: Sep 12, 2004; haha

Is there a clever way of comparing my html files to my compiled main.css file to see which rules never get applied anywhere?

Right now I'm importing all the Foundation SASS files directly into my main.scss file so I can edit the Foundation rules directly instead of overwriting them (maybe a bad idea), but it means I'm also compiling a whole bunch of components that never get used (progress-bars, breadcrumbs, etc.).

I could manually remove the 'import @progress-bars' lines, but with some of them it's not obvious whether they're doing anything.

# ¿ Jun 20, 2014 12:35

fuf: Sep 12, 2004; haha

gmq posted:

Try uncss.

oh hell yeah, this looks perfect thanks!

Could the same thing be done with js files? :shobon:

Like instead of needing a full version of jquery you could just extract the bits that actually get used? It would be really cool to only have a single css file and a single js file with everything you need, instead of separately including full versions of jquery and modernizr etc.

# ¿ Jun 20, 2014 12:53

fuf: Sep 12, 2004; haha

cbirdsong posted:

With Bootstrap, I like just creating an IE8-specific .less file and setting up the container width and all the column widths in there. That way, you only have to worry about one breakpoint working correctly in IE 8. I'm sure you could do something similar with other front-end frameworks.

How do you check for IE8? Is this still a legit method?

code:

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ie8.css">
<![endif]-->

A different topic from a while back:

gmq posted:

Try uncss.

Trip report on this: I was initially really impressed because it cut my css file (that included all of Foundation) from over 100kb to like 15kb. But the problem is that it can't check for css rules that are added by js when the page loads. You can specify an array of rules that will always get preserved, but in the end I decided it was too much work to make sure I caught them all.

Brand new question:

Foundation dynamically adds a bunch of a classes to the html element when the page loads, so it looks something like this:

quote:

<html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Are those there just so I can check whether a browser supports a certain feature? If I'm not actually checking for them I can safely remove them right?

# ¿ Jun 30, 2014 13:46

fuf: Sep 12, 2004; haha

kedo posted:

It probably has Modernizr built into it, I'd imagine. You could remove them but I don't know why you'd want/need to.

yeah sorry you're right - they're coming from modernizr not foundation. I feel like it looks a little messy, but no big deal I guess.

# ¿ Jun 30, 2014 14:11

fuf: Sep 12, 2004; haha

Kudaros posted:

Pelican, Bootstrap, and Django are all attractive to me.

Make sure you're clear on what these frameworks are actually doing. Bootstrap just makes your site look nice, while django will actually make your apps work. If you use django you'll still probably need something like bootstrap (and vice versa). I've never used Pelican but it kind of just looks like a way of updating a simple blog site quickly and easily - maybe not the best choice for a portfolio?

e: oops, V1nce's post is much more comprehensive

# ¿ Jul 11, 2014 14:15

fuf: Sep 12, 2004; haha

Pollyanna posted:

I'm working with Foundation right now, and I have a couple questions:

Is there a way to modify the stacking/listing of the topbar dropdown menu to make it into a grid instead? On a small screen, the topbar automatically changes a section list into dropdown format, as a vertical stack of links. However, I want that to become a grid on a small screen - without it changing anything on the large screen.

You can do this by modifying the foundation sass file directly (components/_top-bar.scss, check around line 275) or by overriding with your own css. You wanna change it so that the list items keep floating left even on small screens, then do some stuff with the widths. This is the rule you need to edit:

code:

.top-bar-section ul li {
   your css here
}

# ¿ Jul 14, 2014 19:16

fuf: Sep 12, 2004; haha

http://forums.somethingawful.com/misc.php?action=whoposted&threadid=3554791

yes you are

# ¿ Jul 15, 2014 15:59

fuf: Sep 12, 2004; haha

Subjunctive posted:

Someone also mentioned a good front-end news aggregator here or in the front-end thread, which sort of thing can help absorb strategies and approaches.

I think it was http://sidebar.io/

(I am just full of helpful links today :v:

)

# ¿ Jul 15, 2014 17:11

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 02:38

fuf: Sep 12, 2004; haha

stoops posted:

Is there an easy way to create a div on an existing site that overlays the entire site?

Or would I have to restructure the divs currently on my site?

I'm trying to create a "loading" div that, when called up, would show right in the middle , horizontally and vertically, over everything else currently on the page.

maybe like this?

code:

<div id="loading"></div>

#loading{
  position: absolute;
  height: 100%;
  width: 100%;
}

edit: thought you meant literally covering the whole page

# ¿ Jul 17, 2014 16:03

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

«‹›7 »