The Web Design & Development Megathread

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

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

My small team uses Grunt for:

- autoprefixing
- combining media queries (we do inline media queries)
- minifying, concatenating (SASS and JS)
- JS hinting
- livereload
- image crunching
- devcode, strips out stuffs depending on environment

Most of these are only run on the production task of course

# ¿ Sep 12, 2014 23:23

Adbot: ADBOT LOVES YOU

# ¿ May 17, 2024 15:03

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

change your CSS links in the head to this format

code:

<link rel="stylesheet" href="stylesheet.css" />

# ¿ Sep 17, 2014 15:31

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

you shouldn't block the user from being able to zoom, use this

code:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Read here if you care anymore: http://davidbcalhoun.com/2010/viewport-metatag/

# ¿ Sep 25, 2014 14:23

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

bawfuls posted:

For reference, this is probably the biggest headache of a table on the site, when it comes to formatting.

my god

# ¿ Sep 27, 2014 01:15

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

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 really won't do anything for you that would be worth it. If your just doing basic DOM manipulation on informational type websites just stick with jQuery if even that.

MVC (model view controller) type frameworks like those you listed really wouldn't start benefiting you until your dealing with users retrieving, saving or creating new data/content. They really help with heavy data manipulation in the client side browser and templating views based on what a user is doing. For example the web version of Instagram relies heavily on React.

streetlamp fucked around with this message at 23:25 on Sep 30, 2014

# ¿ Sep 30, 2014 23:17

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Manta posted:

This is a newb question. What software tools do people use? Like if you were making a web site from nothing.
I find that I have a dozen files open in Notepad++ and I have XAMPP running. I keep making a change->saving the file->reloading it in my browser->"inspect element" to find problems->goto first step. It takes really long to get the right layout or get the js function I found online to work or whatever. What do you use to get your page layout, do people use tools like Dreamweaver or something like that? Do you use some IDE? I should be using a framework and am not yet so maybe I'm missing something obvious.

It sounds like a lot of your trouble is just from inexperience with HTML or CSS and not necessarily the tools. I can throw together the structure of a page usually without having to check in the browser and be pretty confident its going to look as intended when I do check.

But yes, still your method is kind of a slower way of doing things. I use Grunt (http://gruntjs.com/) with BrowserSync to do live browser reloading and the browser is usually refreshed with the changes before I even turn my head to look at the monitor. It injects the changes via JS and so its not even a page reload.

I used CodeKit before I got comfortable with Grunt to do similar things, really super awesome no hassle setup but its Mac only.

Also for tweaking small things and debugging annoying problems, I just do most of that right in Chrome devtools. Now you can even just save the CSS changes straight from Chrome, using source maps for SASS/LESS preprocessed stuff. Same for JS tinkering, I dont even use devtools to its full potential for JS stuff but it can do a lot.

# ¿ Oct 7, 2014 23:32

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

did you see this stackoverflow?
http://stackoverflow.com/questions/21155137/javascript-localstorage-object-broken-in-ie11-on-windows-7

# ¿ Oct 10, 2014 20:23

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

I personally would look into picking up Rails for the backend functionality, I'm sure people would just as easily recommend their preferred language like Python or PHP too though. Rails has great stuffs like Devise for instant ready to go authentication, works super duper with sqlite or mySQL or really any DB solution.

For the frontend you will need HTML, Javascript and possibly a framework like jQuery or even React if you wanna be hip, then CSS for styling. Look into a CSS framework like Bootstrap, and HTML5 boilerplate for good starting points. You could use Grunt or Gulp for taskrunning (things like minify CSS, livereload, combine JS files) and a CSS preprocessor like SASS/LESS which extends CSS to use things like variables and mixins.

streetlamp fucked around with this message at 01:19 on Oct 12, 2014

# ¿ Oct 12, 2014 01:16

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

enthe0s posted:

Has there been any must read book on JavaScript since Crockford's "The Good Parts"? It was released in 2008, so I was wondering if there was a more recently released book that I should read instead.

I really like this as an introduction http://eloquentjavascript.net/
and its free to read online!

# ¿ Nov 7, 2014 18:40

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

kedo posted:

Exactly. Susy! SUSY! I love it.

Amen, god bless and hail satan. Probably my favorite thing I use every day.

# ¿ Nov 11, 2014 02:40

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Heskie posted:

Susy is great though I still find it a little restrictive. I spent ages trying to create a very simple masonry layout (gallery grid but with some items spanning 2 rows, fluid widths, fixed gutters). Eventually I conceded and manually built it with CSS/Sass in 5 minutes.

I don't know if its because I'm very comfortable with CSS or I've not quite 'got' grid frameworks, but is that something you've ever come across?

Can you throw up a quick codepen of it in SASS? Susy is pretty drat open to doing whatever you want it do.

fake edit: like this? http://www.zell-weekeat.com/smarter-layouts-with-susy/

# ¿ Nov 11, 2014 15:03

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Looks like an awesome project, I know nothing about Ducatis but could definitely use something similar for plenty of other cars I end up with.

35 minutes per PDF seems awful though, I assume your just manually entering this stuff? Could you speed it up at all with some OCR magic or something? I don't know too much about adsense stuff but I do know you need a buttload of traffic to make any coin and the time needed to input your data would surely kill any profit. Also could look into mechanical turk?

Might want to check out the Blog for bucks thread in the business sub too for adsense questions.

# ¿ Dec 2, 2014 01:15

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Blinkz0rz posted:

Except WordPress which only really scales if you throw more horsepower at it. Try load-balancing it and see what happens. Hope you don't have anything stored in the media library!

HyperDB yo (and nginx, memcached, etc)
What part of WP doesn't scale as well as any other PHP CMS?

# ¿ Dec 3, 2014 00:54

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Blinkz0rz posted:

And what I mean by that is that there's no really good way of putting common files (i.e. user uploads) on storage that's not on the server.

Thus, you run the risk, if you're trying to load balance on AWS, for instance, of users uploading data that never gets propagated to other instances and gets wiped when the instances are pulled down.

Also there's the whole "we store absolute links in the database" thing.

Like mirroring your uploads to a CDN and setting the upload_url_path option to point at it?

e: Not even sure why Im defending WP, but like v1nce said tool for a job

streetlamp fucked around with this message at 05:15 on Dec 3, 2014

# ¿ Dec 3, 2014 05:07

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

pipes! posted:

Photoshop is just a hammer. Some hammers have ergonomic grips, some are painted with bright colors to make them easier to find if you drop them, some have little loops on the end to make them easier to hang up afterwards. It all doesn't change the fact that if you're using that hammer to drive nails in at the wrong end of the piece of wood, you're simply wasting your time.

Exactly this, too many designers and devs get caught up on using the latest software, framework, etc while ignoring the fact that many of their problems don't lie in the 'hammer'. These designers are failing as designers in this situation way before they even get into using software.

# ¿ Jan 12, 2015 01:36

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

caiman posted:

Just this evening I came across this: https://fonticons.com/. It seems to basically be a way to create a customized group of icons without having to load an entire pack.

Also https://icomoon.io/

revmoo posted:

I've got an app that displays hundreds of thousands of dom nodes and that number is only going to increase. I update their contents with AJAX. I'm running into performance issues and from profiling it appears that I may just be hitting the limits of what you can do with a browser. Right now I'm sitting at 153k dom nodes, and there are elements, roughly 10-15,000 of which, that actually get updated every 20 seconds. This of course, runs like dog poo poo. The core of the issue appears to be the main loop that does the actual updating of the html. I tried throwing it into a staggered setTimeout but it didn't help at all.

Where do I go from here to scale this thing? Do I need to use some sort of canvas/svg tech or what? I'm kind of stumped.

Are you visualizing a bunch of data or something? Anyway to post some sort of preview/example?

streetlamp fucked around with this message at 16:49 on Jan 23, 2015

# ¿ Jan 23, 2015 16:46

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Definitely look at Canvas, could help out a lot

https://groups.google.com/forum/#!msg/d3-js/ZJ6pznVU5LQ/wLYuIGPUnvsJ

# ¿ Jan 23, 2015 21:36

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

The size is being set via this bit of js in scripts.js

code:

jQuery(function($) {
	if ( $(window).width() > 1024 ) {
		var height = $(window).height(); 
		$('.has-banner, .overlay').css('height', height);
		$(window).resize(function() {
			var height = $(window).height(); 
			$('.has-banner, .overlay').css('height', height);
		});
	}
	$(window).resize(function(){	
		if ($(".header-image").css("display") == "none" ){
			var height = $(window).height(); 
			$('.has-banner, .overlay').css('height', height);
		} else {
			$('.has-banner, .overlay').css('height', 'auto');
		}
	});
});

You just need to subtract some pixels from the height variable like for example 40px

code:

var height = $(window).height() - 40;

Make sure you do it for all the instances that height is being set

# ¿ Jan 29, 2015 17:47

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

fuf posted:

Wordpress and nginx
...
Any ideas?

Try something like this out
https://github.com/Varying-Vagrant-Vagrants/VVV/blob/develop/config/nginx-config/nginx-wp-common.conf

# ¿ Aug 21, 2015 03:27

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Karthe posted:

I'm probably overthinking this, but are there any "static site generators" that will let me just sandwich some HTML files in between two other HTML "template" files, maybe with support for page hierarchy as the HTML files are stored in folders? I have a header and footer that I want to pre- and append to some boring informational pages so we can host our site on Github Pages. Right now I've got a really basic bash script that I run to cat everything together but it doesn't support anything deeper than a single directory because

Two people above probably got this covered for you but here's a link to a fairly simple static generator I use at work for prototyping mostly using grunt and grunt-includes

https://github.com/VCUarts/bp

# ¿ Dec 9, 2015 03:00

Adbot: ADBOT LOVES YOU

# ¿ May 17, 2024 15:03

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

my bony fealty posted:

Has anyone ever used TerminalFour CMS? I am transitioning a site to it now and holy hell it's annoying me, I've figured out well enough how to make it do what I want but it feels extremely limiting.

lol I unfortunately have, I built 2 or maybe 3 sites with it around 2 years ago. It's super limiting and the only reason I built the two was to demonstrate to my department how limiting it was. does this happen to be for something related to VCU?

# ¿ Jul 20, 2017 18:05

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