The Web Design & Development Megathread

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

«‹›361 »

Griffith86: Jun 19, 2008

caiman posted:

bawful's thing brought this to mind but it's an unrelated question. How common is it these days for people to just build a website from scratch without the aid of tools like Wordpress, Bootstrap, etc.? Even though I'm comfortable with these tools and I welcome them, I'm equally comfortable opening Sublime Text and typing out plain old HTML/CSS/JS/PHP. I understand that the tools make development quicker and easier, and they provide functionality that would be difficult and time-consuming to do yourself, so I fully grasp why people use them. I'm just curious how common it is to make a website without them.

On the HTML/CSS side of things, my company just started (about 3-4 months ago, 2 projects) using frameworks like Bootstrap, Foundation, etc. All of our other projects are still built by hand (by me) so it's not uncommon. Before those, the only framework we had used was Skeleton on our company website.

# ? Sep 27, 2014 04:38

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 09:29

The Dave: Sep 9, 2003

I'm starting to feel like if you're starting from scratch you need a really good reason to be doing so. Otherwise you're spending more time and making something that will be harder for other people to pick up and help work on / modify.

# ? Sep 27, 2014 14:59

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

What do you call those pages whose sole point is to get your email address to tell you when the real site rolls out?

I've got a site that will be rolling out within a few months and I'd like to throw up some Google ads for relevant searches and get people to sign up for an email saying "yeah, that site you were interested in is now live!".

I'm trying to search around for examples for inspiration, but I'm having a hard time finding them as I don't know what they're called.

Alternatively, if they're not really a thing with a name...anyone have some good examples?

# ? Sep 27, 2014 17:33

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

Which is better/faster/optimal: to call jQuery from Google's CDN in addition to your main JS file; or to use your own jQuery file that's combined into your main JS file? Option one means loading Google's fast and likely cached jQuery file, but option two means one less http request. Thoughts?

# ? Sep 27, 2014 17:35

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Thermopyle posted:

What do you call those pages whose sole point is to get your email address to tell you when the real site rolls out?

I've got a site that will be rolling out within a few months and I'd like to throw up some Google ads for relevant searches and get people to sign up for an email saying "yeah, that site you were interested in is now live!".

I'm trying to search around for examples for inspiration, but I'm having a hard time finding them as I don't know what they're called.

Alternatively, if they're not really a thing with a name...anyone have some good examples?

Transactional landing page. I don't have a good example unfortunately but I know exactly what you mean.

# ? Sep 27, 2014 17:38

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

caiman posted:

Which is better/faster/optimal: to call jQuery from Google's CDN in addition to your main JS file; or to use your own jQuery file that's combined into your main JS file? Option one means loading Google's fast and likely cached jQuery file, but option two means one less http request. Thoughts?

Test it and find out!

# ? Sep 27, 2014 17:46

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

caiman posted:

Which is better/faster/optimal: to call jQuery from Google's CDN in addition to your main JS file; or to use your own jQuery file that's combined into your main JS file? Option one means loading Google's fast and likely cached jQuery file, but option two means one less http request. Thoughts?

Generally people recommend hosting your own these days. The initial gain from faster loading is quite marginal compared to the risk of malicious injection of code into the cdn version (like could have happened last week with jquery), the cdn going down, etc.

It's also one more thing you can wrap together into your bundle if you're concatting/minifying your scripts.

# ? Sep 27, 2014 18:03

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

Uziel posted:

Transactional landing page. I don't have a good example unfortunately but I know exactly what you mean.

Oh that's great. Lots of good google results for that term. Thanks!

# ? Sep 27, 2014 18:20

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

The Dave: Sep 9, 2003

fuf posted:

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>

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

# ? Sep 28, 2014 15:55

The Dave: Sep 9, 2003

fuf posted:

hey this is interesting:
http://jsfiddle.net/1en2q2x2/2/
theme stylesheet had font-weight:300 on <body> for some reason.

I've actually just started doing this because when it's supported it makes the page look so much lighter and nicer.

Could you set a rule for the strong tag for font weight 900 or something? Or does adding !important to the default help?

# ? Sep 28, 2014 15:58

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

The Dave: Sep 9, 2003

fuf posted:

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

Oh that makes sense, I don't know about all that cool stuff.

# ? Sep 28, 2014 17:47

vOv: Feb 8, 2014

fuf posted:

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

Yes, because it means there are fewer round-trips. If you're on a connection with 20ms one-way latency, then each additional script you load adds another 40ms latency to your load time, since scripts are downloaded one-by-one and there's no way to say 'give me these 10 resources'.

# ? Sep 28, 2014 19:35

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

The Dave posted:

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

Also fix your dependencies to a single version and then test against any updates.

Don't ever let anyone else (e.g. a CDN) determine what version of a dependency you're using.

# ? Sep 28, 2014 19:40

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

Blinkz0rz posted:

Also fix your dependencies to a single version and then test against any updates.

Don't ever let anyone else (e.g. a CDN) determine what version of a dependency you're using.

I'm not sure if you're saying this, but this reads like you could be saying this so...you can use a CDN and fix against a specific version.

# ? Sep 28, 2014 20:42

ex post facho: Oct 25, 2007

I've realized that I have a passion for UI design and workflows that make sense, and aren't frustrating and unintuitive.

Is there any particular kind of language focus I should have in my learning process if I think that I would excel in that area?

# ? Sep 29, 2014 18:33

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

Doesn't the CDN also benefit from browser caching? Whereas loading your own version doesn't allow for that? I feel like that's something I read ages ago, but things could have obviously changed since then...

# ? Sep 29, 2014 19:57

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

enthe0s posted:

Doesn't the CDN also benefit from browser caching? Whereas loading your own version doesn't allow for that? I feel like that's something I read ages ago, but things could have obviously changed since then...

It's not that your own version doesn't allow for it (your version will be cached for subsequent visits/pages), it's just that a hugely popular CDN like Google's is likely to already be cached by the user's browser before they even hit your home page.

# ? Sep 29, 2014 20:28

Jimlit: Jun 30, 2005

a shameful boehner posted:

I've realized that I have a passion for UI design and workflows that make sense, and aren't frustrating and unintuitive.

Is there any particular kind of language focus I should have in my learning process if I think that I would excel in that area?

You should focus on the following:
Html
CSS
Javascript
(insert trendy javascript library of the month)

But seriously, good UX is in no way attributed to the languages and libraries that are used. If you truly have a "passion" for it get to reading and develop an eye for it.

The Elements of Style and The Elements of Typographic Style
Flow Great usability advice wrapped in a self help book that might also fix your broken miserable life.

# ? Sep 29, 2014 20:47

The Dave: Sep 9, 2003

Yeah UX is really more of a mindset that isn't really tied to any coding in particular. I think studying something like information architecture or how to conduct usability research would make you a good UX practitioner.

I actually just finished a great book that is all about coming onto a team as the sole UX evangelist: http://rosenfeldmedia.com/books/ux-team-of-one/

# ? Sep 29, 2014 21:00

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Chenghiz posted:

the cdn going down

HTML code:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="mahsite.com/scripts/jQuery-1.11.1.js"><\/script>')</script>

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

# ? Sep 29, 2014 21:01

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

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

fuf posted:

uh is that sarcasm? Because that is exactly how I load all my js libraries
(try to load from a cdn, check if it loaded, if it didn't fall back to a local version)

No, network errors can sometimes be really slow to resolve to an actual error state, but, on the bright side, they're also really unlikely to happen with a big CDN, so it's probably not abjectly horrible or anything.

# ? Sep 29, 2014 22:27

My Rhythmic Crotch: Jan 13, 2011

bawfuls posted:

My dad has a niche website

My gut reaction would be to use a static site generator. Two advantages: no security problems like you'll get with Wordpress, and you are still going to have speedy load times.

# ? Sep 30, 2014 02:06

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

a shameful boehner posted:

I've realized that I have a passion for UI design and workflows that make sense, and aren't frustrating and unintuitive.

Is there any particular kind of language focus I should have in my learning process if I think that I would excel in that area?

You sound like you want to get into UX, as others have mentioned. There's an ongoing debate within the UX community of whether UX designers should code at all. I tend to think they should, insofar that understanding the capabilities of the medium and prototyping are essential to good design. In general, I don't think UX designers should write production code, though. Scalability, security, cross-browser/platform compatibility, efficiency, error handling, and sustainability are all vital components of the experience, but aren't core competencies of the UX designer. Leave that poo poo to the real engineers. Instead, UX designers should spend their time doing research -- meeting with stakeholders, observing people as they try to perform their tasks, testing prototypes with potential users, etc.

Traditionally, UX designers would also spend their time putting together user flows and wireframes in tools like Omnigraffle, but these days, motion design is such an important part of UX that static tools are't really sufficient anymore. Unfortunately, there's no consensus toolset for the modern UX designer. If you're technically oriented, then there are amazing Javascript libraries out there to illustrate design concepts. Beyond that, there are any number of other rapid prototyping tools, including Framer, Adobe Edge, Keynote, Macaw, Quartz Composer (with modern updates like Origami and Avocado), UX Pin, and countless others.

Overall, my point is that good design mostly happens before computers are involved. It's all about getting an organization aligned behind the same goals, fostering a deep understanding of what your users are trying to accomplish, and using analytics data to inform future design decisions.

# ? Sep 30, 2014 02:58

The Dave: Sep 9, 2003

^^^ a very good post about ux

# ? Sep 30, 2014 11:58

Wungus: Mar 5, 2004

This isn't really a question or anything, but I've just started learning Angular.js and holy poo poo I've got half a dozen projects that would have been so easy to complete had I learned this earlier. Angular.js is so fuckin' nice.

# ? Sep 30, 2014 17:53

calusari: Apr 18, 2013; It's mechanical. Seems to come at regular intervals.

Ok, this is probably a terrible description of my problem but here it goes:

Let's say I am storing the code for a webpage in a variable: webpage_html

Sometimes the code for a particular webpage is one line long and it just contains a unique id to load a template and that works fine (template loads perfectly within this page)

But, if I try to load the template directly it doesn't work because when it tries to assign the webpage_html to JSON its this long rear end multiple line html source code

So I am getting an unterminated string literal because its multiple lines, how do I get around this? There aren't \n to replace

# ? Sep 30, 2014 18:37

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

calusari posted:

So I am getting an unterminated string literal because its multiple lines, how do I get around this? There aren't \n to replace

You need to go the other way and replace e.g. new lines with \n. Just use JSON.stringify or equivalent.

If you're determined to do this yourself, don't forget to escape line separator and paragraph separator.

# ? Sep 30, 2014 19:53

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

Whalley posted:

This isn't really a question or anything, but I've just started learning Angular.js and holy poo poo I've got half a dozen projects that would have been so easy to complete had I learned this earlier. Angular.js is so fuckin' nice.

I'm finding the same thing with Ember. Two-way data binding is so much nicer than loving around with events.

# ? Sep 30, 2014 20:16

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

Whalley posted:

This isn't really a question or anything, but I've just started learning Angular.js and holy poo poo I've got half a dozen projects that would have been so easy to complete had I learned this earlier. Angular.js is so fuckin' nice.

prom candy posted:

I'm finding the same thing with Ember. Two-way data binding is so much nicer than loving around with events.

You guys are going to be ecstatic when you try React.

(or maybe not, but it's pretty fuckin' sweet)

# ? Sep 30, 2014 20:37

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

Thermopyle posted:

You guys are going to be ecstatic when you try React.

(or maybe not, but it's pretty fuckin' sweet)

Yep. I was resigned to having to learn Angular or Ember. Then React showed up. :neckbeard:

# ? Sep 30, 2014 22:03

obstipator: Nov 8, 2009; by FactsAreUseless

Be careful with Ember. Last I heard the next version is going to change a lot. Also all the stackoverflow answers from over a few months old are now obsolete, so make sure you check for the newest answers. IIRC, they were the ones that requested that SO remove all their old questions and answers.

# ? Sep 30, 2014 22:28

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

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?

# ? Sep 30, 2014 22:42

calusari: Apr 18, 2013; It's mechanical. Seems to come at regular intervals.

pokeyman posted:

You need to go the other way and replace e.g. new lines with \n. Just use JSON.stringify or equivalent.

If you're determined to do this yourself, don't forget to escape line separator and paragraph separator.

Sorry, I'm an idiot

code:

 
var page_html = JSON.stringify('{{ webpage.html_content }}');

$.ajax({
                url: '/my_url',
                dataType: "json",
                type: 'POST',
                data: {
                       page_html: page_html,
                       csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function( json ) {
                       // blah blah
                }
});

yields

code:

var page_html=JSON.stringify('<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
');

which is an unterminated string literal

# ? Sep 30, 2014 23:01

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

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

obstipator posted:

Be careful with Ember. Last I heard the next version is going to change a lot. Also all the stackoverflow answers from over a few months old are now obsolete, so make sure you check for the newest answers. IIRC, they were the ones that requested that SO remove all their old questions and answers.

Yeah I've been using Ember for a couple of months now and there is a LOT of outdated information out there. It reminds me of when Rails was new and undergoing a lot of change. Luckily the official Ember guides are really good.

What's the deal with React? What's it good at that Ember and Angular are bad at?

# ? Sep 30, 2014 23:22

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 09:29

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

prom candy posted:

What's the deal with React? What's it good at that Ember and Angular are bad at?

Being fast. The way it makes you think about your apps. It's conceptually small, so easy to understand. Documentation.

# ? Oct 1, 2014 00:06

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

«‹›361 »