The Web Design & Development Megathread

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

«‹›361 »

akadajet: Sep 14, 2003

Newf posted:

Potentially stupid question here:

Why is it that everyone in web design uses hex colour codes rather than rgb? I can't believe that people find it easier to read the hex representation; is it just a convention held over from some time before rgb colours 'existed' on the web?

It's shorter? It's not that hard to read? And what's the deal with airline food?

# ? Aug 6, 2013 14:09

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 22:13

Skiant: Mar 10, 2013

Frankly, I think HSL is way easier to read than RGB or Hex (which is really close to RGB in terms of readability), but the support for HSL isn't exactly top notch.

# ? Aug 6, 2013 14:37

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

Newf posted:

Why is it that everyone in web design uses hex colour codes rather than rgb? I can't believe that people find it easier to read the hex representation; is it just a convention held over from some time before rgb colours 'existed' on the web?

It's easier to copy and paste, particularly out of Photoshop:

# ? Aug 6, 2013 14:49

kedo: Nov 27, 2007

Way, way back in the early days of CSS (like, IE 5 days), rgb wasn't even supported and hex was the only option. But back then hardly anyone was using CSS because it hardly worked for anything more than text styling. Instead, you'd end up using inline bgcolor on table cells and whatnot because it was the only option � and that also only accepted hex. So that's what people used.

These days there's not really any benefit to using hex over rgba except that it requires fewer characters. Also you can mix the two in order to create opacity variations of a color with SASS/LESS. There's a time and a place for each, really.

# ? Aug 6, 2013 15:18

Mogomra: Nov 5, 2005; simply having a wonderful time

Newf posted:

Potentially stupid question here:

Why is it that everyone in web design uses hex colour codes rather than rgb? I can't believe that people find it easier to read the hex representation; is it just a convention held over from some time before rgb colours 'existed' on the web?

I never really thought about that. I can't imagine that there are many (if any) popular browsers out there that wouldn't accept rgb() at this point. From my own personal experience, yeah, you're exactly right.

# ? Aug 6, 2013 18:58

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

I'm messing around with Bootstrap 3 here.

Is there some sort of design principle behind why they use a media query to remove the rounded corners on the nav pills at the top when the width is > 768px, or is that just weird?

It certainly just seems weird to me, but I'm just a programmer pretending to design.

# ? Aug 6, 2013 21:46

kedo: Nov 27, 2007

I'd guess it's to make the pills appear more button-like for touch users. As far as I'm aware there's not any sort of specific principle someone could point to that says "when browsers are > 768px, round things!" But the bootstrap guys probably have access to a lot of user testing data... maybe touch users are more likely to poke things with rounded corners than sharp corners?

# ? Aug 6, 2013 21:54

Oh My Science: Dec 29, 2008

Thermopyle posted:

It certainly just seems weird to me, but I'm just a programmer pretending to design.

It must be a bug either in your code or theirs, it is a release candidate.

If you take a look at the docs http://getbootstrap.com/components/#nav the nav elements have rounded corners at all resolutions.

Found it! Your nav ul has an extra class in it. Remove navbar-nav and it fixes itself.

Note - It seems to break the way it scales down, consider using the navbar instead. Just float:right the links. http://getbootstrap.com/components/#navbar

Oh My Science fucked around with this message at 22:41 on Aug 6, 2013

# ? Aug 6, 2013 22:32

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

Oh My Science posted:

Found it! Your nav ul has an extra class in it. Remove navbar-nav and it fixes itself.

Oops, thanks! That's a remnant of migrating from Bootstrap 2.

Oh My Science posted:

Note - It seems to break the way it scales down, consider using the navbar instead.

Hrmph. It sure does.

# ? Aug 6, 2013 23:36

ijustam: Jun 20, 2005

Alrighty I have a problem. This is more architectural than anything.

Background: We have 3 applications (all ASP.NET MVC [two of them are MVC4, one MVC3]) that are part of one software suite. Together they behave like one website but are actually 3 different websites:

* site1.company.com
* site2.company.com
* site3.company.com

Each site has its own dedicated functionality, but share a lot of CSS. We're starting to move away from Windows authentication and move towards forms authentication so I'm tasked with setting up an authentication system and start a framework for real-time notifications. This functionality would be shared by all 3 applications.

Is it possible to have the notifications/auth stuff be a shared entity that can be included by each application? Basically I'm trying to reduce how much repeated code we have. The catch is that management wants the navigation bar to be standardized with the notifications and that seems really weird. I'm not even sure if it's possible since the navbar has logic in it (such as what links to show based on permissions).

# ? Aug 7, 2013 16:14

Oh My Science: Dec 29, 2008

ijustam posted:

Alrighty I have a problem. This is more architectural than anything.

Try cross posting in the .net thread.

Does http://msdn.microsoft.com/en-us/library/eb0zx8fc(v=vs.100).aspx this cover what you want?

# ? Aug 7, 2013 17:16

Video Nasty: Jun 17, 2003

Anyone have experience in learning Objective-J? I'm really excited to dive into this, but want to know if Objective-C or even C++ will be a good precursor to learn.
I took away from the abstract that it's heavily based on Cocoa and Objective-C logic, which I'm at least familiar with but could devote some time to that early if it will benefit me in the long run.

# ? Aug 7, 2013 18:00

ijustam: Jun 20, 2005

Oh My Science posted:

Try cross posting in the .net thread.

Does http://msdn.microsoft.com/en-us/library/eb0zx8fc(v=vs.100).aspx this cover what you want?

Unfortunately no, I think the hard part is going to be getting the notifications to share.

# ? Aug 7, 2013 18:11

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

Jake Blues posted:

Anyone have experience in learning Objective-J? I'm really excited to dive into this, but want to know if Objective-C or even C++ will be a good precursor to learn.
I took away from the abstract that it's heavily based on Cocoa and Objective-C logic, which I'm at least familiar with but could devote some time to that early if it will benefit me in the long run.

I goofed around with Objective-J a while ago, and I think I would have been utterly lost had I not already know Objective-C / Cocoa from doing some iOS dev beforehand. That said, I don't think getting too deep into Objective-C is really needed... mostly to get used to the weird syntax. Also, I am dumb as a rock, so you might not have any trouble picking it up without it.

Out of curiosity, what has you so excited about it?

# ? Aug 7, 2013 20:04

Video Nasty: Jun 17, 2003

I feel like jQuery and its UI counterpart are an amazing framework, but I'd like to sink my teeth into something a little more comparable to actual object-oriented tendencies. Sadly, I fall into a rut with early antiquated standards in Webdev, having been taught to write entire pages of HTML and CSS out by hand; with more of an emphasis in design. I'd like to get more familiar with the programming side of things so I can improve abilities with more experience in the background functionality.
Objective-J looks to shed a majority of the markup of HTML and CSS, and allow me to experience more than the typical "dynamic" pages I've built by tacking on frameworks and plug-ins. It gives me a complete environment in a language I'm mostly familiar with, to experiment and toy around and hopefully practice more modern web standards in development.
I will definitely brush up on Objective-C, since I'm only competent with C++ and it couldn't hurt to know more about what I'm getting into.

# ? Aug 7, 2013 20:38

Pork Pie Hat: Apr 27, 2011

Hello thread,

I hope this is the right place to ask this kind of question, as it's not a specific question about code or frameworks or what have you.

So. In an effort to make myself employable in an area I find interesting I have decided I need to get some web design and development learning done. After reading the OP and checking out the 'Education' links I'm rather taken by Treehouse. The style and method of learning appeals to me and the Job Board seems like a pretty good feature too.

My question, then, is does anyone have any experience of learning with Treehouse? Would they be considered worth the money for someone who has a rudimentary understanding of Ruby/HTML/CSS and wants to advance and one day end up employed?

Thanks in advance for any advice.

# ? Aug 7, 2013 21:26

kedo: Nov 27, 2007

In my opinion, yes. Treehouse will is worth the money if you someday hope to get a job as a web designer / developer. They're not going to teach you absolutely every single thing you need to know to make some crazy nuts-o complex website but they're going to give you a very strong grounding in basic design principles and theory along with some practical code know-how.

From there, the world is your digital oyster! The longer you work in the field the more you'll realize you don't know jack poo poo because everything is constantly changing, so having a really solid foundation to build from is important. Depending on how actually rudimentary your rudimentary understanding of Ruby/HTML/CSS is you may not get much from those specific courses (except some best practices), so you could probably glide through a few of them pretty easily. You can also do a few of the video tutorials without paying if you want to test it out.

That all being said, I wouldn't put "Completed X Treehouse course" on your resume or anything.

e: Ha, I haven't watched any of these in ages. These dudes and their "holograms" are kind of hilarious.

kedo fucked around with this message at 22:20 on Aug 7, 2013

# ? Aug 7, 2013 22:04

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

Jake Blues posted:

I feel like jQuery and its UI counterpart are an amazing framework, but I'd like to sink my teeth into something a little more comparable to actual object-oriented tendencies. Sadly, I fall into a rut with early antiquated standards in Webdev, having been taught to write entire pages of HTML and CSS out by hand; with more of an emphasis in design. I'd like to get more familiar with the programming side of things so I can improve abilities with more experience in the background functionality.
Objective-J looks to shed a majority of the markup of HTML and CSS, and allow me to experience more than the typical "dynamic" pages I've built by tacking on frameworks and plug-ins. It gives me a complete environment in a language I'm mostly familiar with, to experiment and toy around and hopefully practice more modern web standards in development.
I will definitely brush up on Objective-C, since I'm only competent with C++ and it couldn't hurt to know more about what I'm getting into.

Curse you. Now I want to spend moments of my impossibly rare free time messing with that again. :argh:

# ? Aug 8, 2013 02:08

sim: Sep 24, 2003

Jake Blues posted:

I feel like jQuery and its UI counterpart are an amazing framework, but I'd like to sink my teeth into something a little more comparable to actual object-oriented tendencies...

I don't much about Objective-J, but I would also recommend looking into some JavaScript MVC/MVVM/MVWhatever frameworks like Angular, Ember, Backbone, or full stack options like Node+Express or Meteor. Combined with a UI library like Twitter Bootstrap, you can create a lot of functionality without focusing on the presentation aspect.

# ? Aug 8, 2013 13:59

Video Nasty: Jun 17, 2003

sim posted:

I don't much about Objective-J, but I would also recommend looking into some JavaScript MVC/MVVM/MVWhatever frameworks like Angular, Ember, Backbone, or full stack options like Node+Express or Meteor. Combined with a UI library like Twitter Bootstrap, you can create a lot of functionality without focusing on the presentation aspect.

Basically already doing that, but instead I'm building the back-end in PHP and syncing views with dynamic UI effects [themes, widgets, AJAX spinners, etc].
I absolutely love the extensibility of PHP's raw power, but they JUST updated php.net and most of their tutorials were long overdue to acknowledge better practices than MySQL and Magic Quotes. I'm not putting a whole ton of faith into Objective-J just yet, but it's caught my interest enough to be able to program something entirely with one language, instead of having to translate between multiple sheets of moon-code.

# ? Aug 8, 2013 15:46

Enderzero: Jun 19, 2001; The snowflake button makes it
cold cold cold
Set temperature makes it
hold hold hold

I've been asked to put together an estimate for a consulting project. I am terrible at estimates.

The project is a single page app dashboard for enterprise users of a popular iOS software. There are some simple-ish forms for registering an organization. It allows users to do CRUD operations on users, Groups (like Marketing, Sales, etc.), and setting up key/value options for the organization/group/user.

There's no design done, I will be coming up with the look and the flow, and it may require one or two iterations while they send it through their product team. I am learning some new things on this project, so I will not be charging them for every bit of time on this project - I need the money and experience more than a complete billing. But I'm terrified I'm going to come in too high or too low and lose the contract. I've quoted them a rate of $50/hr. I tried to estimate how many work units, assign an estimated time for each phase (2 hrs design per unit, 1 hr bugfixes, etc) and have come up with an estimate of 70-80 hours - ~30 for design, ~40-50 for implementation.

Does this sound reasonable for a modern, backbone.js, sparse with a coupla frills dashboard site? Any tips for better estimating?

# ? Aug 8, 2013 16:46

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

Jake Blues posted:

but they JUST updated php.net

Ha. Sounds about par for the course when it comes to PHP.

# ? Aug 8, 2013 16:54

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Enderzero posted:

Does this sound reasonable for a modern, backbone.js, sparse with a coupla frills dashboard site? Any tips for better estimating?

I would put that at around two weeks, but I would also charge double your hourly rate.

As far as tips for better estimating, it helps to look at each individual piece and give a small estimate. Humans are much better at estimating small pieces than an entire project. When you've gone through all the features, add the time up for each and tack on another 30-50% for testing/debugging.

# ? Aug 8, 2013 18:00

Pork Pie Hat: Apr 27, 2011

kedo posted:

In my opinion, yes. Treehouse will is worth the money if you someday hope to get a job as a web designer / developer. They're not going to teach you absolutely every single thing you need to know to make some crazy nuts-o complex website but they're going to give you a very strong grounding in basic design principles and theory along with some practical code know-how.

From there, the world is your digital oyster! The longer you work in the field the more you'll realize you don't know jack poo poo because everything is constantly changing, so having a really solid foundation to build from is important. Depending on how actually rudimentary your rudimentary understanding of Ruby/HTML/CSS is you may not get much from those specific courses (except some best practices), so you could probably glide through a few of them pretty easily. You can also do a few of the video tutorials without paying if you want to test it out.

That all being said, I wouldn't put "Completed X Treehouse course" on your resume or anything.

e: Ha, I haven't watched any of these in ages. These dudes and their "holograms" are kind of hilarious.

Thank you very much for replying and giving me such good advice. I'm not quite 100% on Treehouse yet (I'm seriously considering tuts+ as I enjoy dicking around with photoshop too) but I am at least prepared to accept that I will know jack poo poo for quite a while yet!

Thanks again, it's appreciated.

# ? Aug 8, 2013 19:46

Oh My Science: Dec 29, 2008

6EQUJ5 posted:

I'm not quite 100% on Treehouse yet ...

If you want to try them out plan to use one a month until you say "gently caress yeah I dig this learning style".

I'll be throwing a big update into the OP this weekend, if I wanted to explore the possibility of an SA web dev IRC channel would people use it?

# ? Aug 8, 2013 19:54

Enderzero: Jun 19, 2001; The snowflake button makes it
cold cold cold
Set temperature makes it
hold hold hold

Bognar posted:

I would put that at around two weeks, but I would also charge double your hourly rate.

As far as tips for better estimating, it helps to look at each individual piece and give a small estimate. Humans are much better at estimating small pieces than an entire project. When you've gone through all the features, add the time up for each and tack on another 30-50% for testing/debugging.

Thanks for the tips. I am charging double my hourly, and I arrived at my estimate pretty much by your method.

# ? Aug 8, 2013 20:15

kedo: Nov 27, 2007

Oh My Science posted:

I'll be throwing a big update into the OP this weekend, if I wanted to explore the possibility of an SA web dev IRC channel would people use it?

I'd probably idle in there most days. It'd be handy to have a place to ask quick questions / share stuff.

# ? Aug 8, 2013 20:19

Oh My Science: Dec 29, 2008

kedo posted:

I'd probably idle in there most days. It'd be handy to have a place to ask quick questions / share stuff.

Where do I host it? I could throw something up on a VPS but I have a feeling some goons have already figured this out.

# ? Aug 8, 2013 20:22

The March Hare: Oct 15, 2006; _{Je r�ve d'un}
Wayne's World 3; Buglord

Oh My Science posted:

If you want to try them out plan to use one a month until you say "gently caress yeah I dig this learning style".

I'll be throwing a big update into the OP this weekend, if I wanted to explore the possibility of an SA web dev IRC channel would people use it?

I'd use the poo poo out of it.

# ? Aug 8, 2013 20:36

kedo: Nov 27, 2007

I know jack poo poo about setting up IRC channels, but I think you can just pick a public server and make a channel...?

Really though, I have no idea.

\/ \/ Seconded. For the type of work you described, Enderzero, I'd expect to pay a freelancer much more than $50/hr. Of course it depends a lot on your skill level in addition to the other things Bognar points out.

kedo fucked around with this message at 20:54 on Aug 8, 2013

# ? Aug 8, 2013 20:50

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Enderzero posted:

Thanks for the tips. I am charging double my hourly, and I arrived at my estimate pretty much by your method.

I may not have made myself clear. You said you quoted them $50/hr. I would have quoted double that - but that's just me. It will depend on what area you live in and what kind of company you're doing the work for.

# ? Aug 8, 2013 20:50

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Oh My Science posted:

Where do I host it? I could throw something up on a VPS but I have a feeling some goons have already figured this out.

You do know that CoC and number of other SA forums have active channels on irc.synirc.net? Why not just throw it in there? I would use it.

(DID YOU READ THE FAQ?)

# ? Aug 8, 2013 21:08

Nimrod: Sep 20, 2003

Oh My Science posted:

Where do I host it? I could throw something up on a VPS but I have a feeling some goons have already figured this out.

There's already a CoC channel on irc.synirc.net, called #cobol. I'd be down with a web dev channel too.

EDIT: Beaten. I should really refresh before posting.

# ? Aug 8, 2013 21:12

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

#web on synirc.

Done.

Go there.

# ? Aug 8, 2013 21:14

Oh My Science: Dec 29, 2008

Thermopyle posted:

#web on synirc.

Thanks, using this!

# ? Aug 8, 2013 21:28

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

I'm actually really miffed there isn't a hex variant for hsla. Hex really is easier to type - I mean, #ccc vs rgb(204,204,204), come on! It's not like rgb is that much more intuitive being out of 255 (though I think %-values are legit now as well?).

HSL being better than RGB isn't even up for discussion though.

# ? Aug 8, 2013 21:59

Vintersorg: Mar 3, 2004; President of
the Brendan Fraser
Fan Club

Little IE bug and not sure how to fix it. I am using a combination of bootstrap and Cycle2's Carousel Pager (http://jquery.malsup.com/cycle2/demo/caro-pager.php). It displays 3 items at a time with the "feature" in the middle. Chrome and Firefox render it fine, everything works and on W3 the output HTML validates as fine. Aside from this IE bug the rest of the site works perfect and if I had it my way id just launch it like this. But having a empty grey area isn't desirable. Unsure why it's doing this at all as nothing really seems too complicated as its just a bunch of divs in a slideshow.

Here is a working JSfiddle.

http://jsfiddle.net/J6bSQ/

Anyone want to take a guess for this?

In IE though the 3rd item is not displaying. I'll provide two pictures.

Chrome & Firefox

IE (taken from BrowserStack)

Not too sure why it would block this out. I have a "trick" that I think may be screwing with stuff.

CSS code:

.cycle-carousel-wrap { margin-left: 290px !important;}

(( yes, I hate important tags too but it seems they are needed to overwrite the Cycle2 inline poo poo ))

It's hard to recreate in JSfiddle but here is the snippet outputting this area.

PHP code:

<div class="featured_projects"><!-- featured projects starts -->
    <a href="#" class="nav-button cycle-prev"></a>
    <a href="#" class="nav-button cycle-next"></a>
	<h4>Featured Projects</h4>
    	<div id="slideshow-2">
    		<div id="cycle-2" class="cycle-slideshow"
            data-cycle-slides="> div"
            data-cycle-timeout="0"
            data-cycle-prev=".cycle-prev"
            data-cycle-next=".cycle-next"
            data-cycle-caption="#slideshow-2 .custom-caption"
            data-cycle-fx="carousel"
            data-cycle-carousel-visible="3"
            data-cycle-carousel-fluid=true
            data-allow-wrap="true"
            >
             <?php
            //iterate through each project
            foreach($projects as $project) { ?>
            <? $project_blurb = get_post_meta( $project->ID,'project_post_class',true ); ?>        
                <div class="project_box">
                    <div class="project_image">
                	  <a href="<?php echo get_permalink($project->ID); ?>" class="shadow">
<?php MultiPostThumbnails::the_post_thumbnail('Project', 'secondary-image', $project->ID, 'slideshow-2-size'); ?></a>
                    </div>
                	<br/>
                    <div class="project_desc">
                        <? echo "<p>" . (strlen($project_blurb) <= 200 ? $project_blurb : substr($project_blurb, 0, 200) . "...") . "</p>"; ?>
                    </div>
                </div>
            <?php } ?>
            <span class="clearfix"></span>
        </div>
    </div>
</div><!-- featured projects ends -->

# ? Aug 8, 2013 22:14

Pilsner: Nov 23, 2002

CSS question. I have code like this:

code:

<div class="head1">Corpse Summoning</div>
<div class="imageright" style="width:200px">
	<img src="Images/death-priestess.jpg"/><br />A Priestess of Luclin in the Guild Lobby provides corpse summoning.
</div>
<p>If you can't simply walk to your corpse, there are ways of summoning it.</p>
<ul>
	<li>The easiest way is to go to the Guild Lobby, accessed via the southwestern gate in Plane of Knowledge. In the east and west rooms you will find NPCs named A Disciple of Luclin and A Priest/Priestess of Luclin. Start by right-clicking the gnome merchant and buy a Soulstone of the appropriate level (sort by the "Lvl" column). Next, hand this Soulstone to a Priest/Priestess of Luclin, and all your corpses will be summoned to your feet.</li>
	<li>A Necromancer or Shadow Knight can summon your corpses using spells.</li>
	<li>The veteran reward AA Expedient Recovery summons all your corpses and performs a 100% resurrection on them.</li>
</ul>
</div>

<div class="head1">Corpse Dragging</div>

code:

.imageright {
	display: inline;
	float: right;
	padding: 5px 5px 5px 5px;
	border-width: 1px;
	border-style: solid;
	border-color: dimgray;
	margin-top: 5px;
	margin-left: 10px;
	font-size: 80%;
}

The problem is what I make an imageright div, the image overlaps into the next div if it's too tall.

Here's the problem:

Here's how I want it to look - hacked by making a <div> around the head1 div with a fixed height of 370px.

Is it possible to make it automatically force the next div to not overlap?

# ? Aug 8, 2013 22:37

jusion: Jan 24, 2007

Pilsner posted:

stuff

Try wrapping the "inner body" content (<p><ul> etc) in a div, and setting overflow: auto or hidden.

# ? Aug 8, 2013 22:54

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 22:13

Bognar: Aug 4, 2011; I am the queen of France; Hot Rope Guy

Pilsner posted:

*floats*

Is it possible to make it automatically force the next div to not overlap?

Floats exist outside of the document flow by default. Since you're not clearing your containing div, it's just going to end whenever it can without considering floats. You need to trigger block formatting context. The easiest way to do that is wrap all your "Corpse Summoning" content in

code:

<div style="overflow:auto;">
    ...
</div>

Edit: Another option is to put this at the end of the content you want to clear:

code:

<br style="clear: both;" />

Bognar fucked around with this message at 22:59 on Aug 8, 2013

# ? Aug 8, 2013 22:56

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

«‹›361 »