The Web Design & Development Megathread

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

«‹›361 »

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

fuf posted:

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?

It is a bit blurry, definitely.

If you know exactly how wide it will be, pick a size that is an even multiple of that. If I change this one's width to 175px (25% of 700), then the scaler can do its job much more cleanly:

Pivo posted:

I don't know why you're downloading a 700x351 image just to display it at 185x90! BAD BAD BAD Scale it first!

If you just use a 185x90 image, it will look like poo poo on retina displays.

Of course, the real best answer is using an SVG and swapping the PNG in for IE 8 and Android 2.x.

# ? Sep 2, 2014 16:11

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 07:54

Heskie: Aug 10, 2002

fuf posted:

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?

I had a similar issue where a PNG was reversed upside down for my client's Safari a while back. They were using OSX Tiger (Safari 5 I think?) but it looked fine for me in Mavericks/Safari 7.

I think it was caused by the image's colour profile being saved as RGB rather than CMYK, so it could be that?

e: Ahh sorry I thought you meant the image was rendering very blurry rather than the aliasing on scale. Yeah its doing that.

Heskie fucked around with this message at 16:17 on Sep 2, 2014

# ? Sep 2, 2014 16:14

kedo: Nov 27, 2007

CSS code:

image-rendering:-webkit-optimize-contrast;

This will crisp it up, but imo it takes it too far and makes it a little pixelated. You're probably better off serving it at a dimensions where it won't be resized in the browser.

# ? Sep 2, 2014 16:15

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

kedo: Nov 27, 2007

Looks good to me in Safari 7. Nice and crisp.

# ? Sep 2, 2014 17:00

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

fuf posted:

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

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

# ? Sep 2, 2014 17:49

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

Jimlit: Jun 30, 2005

I'm looking for some usability feedback on this header I made for our company site. Personally i feel like it's way to cluttered and that the menu's lack a unified structure. Also to keep in mind, at the moment the site has absolutely no mobile specific features beyond beyond some java script to control the menu drop down on phones and tablets.

It can be found at:

http://www.ofnisystems.com

# ? Sep 2, 2014 18:49

kedo: Nov 27, 2007

Jimlit posted:

Personally i feel like it's way to cluttered and that the menu's lack a unified structure.

Yes.

Also you're assuming people have monitors that are > 700px tall. Approximately 5% of that information should be in drop down navigation. The Services menu is about as deep as you should get, imo, and that's already a lot of information.

# ? Sep 2, 2014 19:18

The Dave: Sep 9, 2003

When I loaded the page I was like "That menu seems fine", then the hover knocked me out of my chair.

Yeah it looks like you have 3 levels of information, with level 2 being you're actual items. I don't see a need for level 1 on any of the dropdowns, just sounds like some marketing fluff that only adds to the confusion. Then on like Products it's almost like you're trying to fit a whole landing page in the navigation. Would right more but I'm in a rush.

# ? Sep 2, 2014 19:30

Jimlit: Jun 30, 2005

Thanks for the feedback, I've been restructuring it today and its really helpful to get some opinions from outside the office.

One of the big reasons for going with this style of header was to highlight the product benefits to the users to help them make better decisions on how to navigate the site. Unfortunately it devolved into "how much copy can we fit in it with out breaking it structurally!".

# ? Sep 2, 2014 21:19

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

Jimlit posted:

I'm looking for some usability feedback on this header I made for our company site. Personally i feel like it's way to cluttered and that the menu's lack a unified structure. Also to keep in mind, at the moment the site has absolutely no mobile specific features beyond beyond some java script to control the menu drop down on phones and tablets.

It can be found at:

http://www.ofnisystems.com

Wow, you got 5 whole websites in your header. Impressive!

Echoing what everyone else says. That header is very good for exactly one thing: ensuring nobody will ever bother to read anything in there or click on it.

# ? Sep 2, 2014 21:31

Jimlit: Jun 30, 2005

Cut a bunch of the copy and layers out per the recommendations:

http://www.ofnisystems.com/header-revision/

Lumpy posted:

Wow, you got 5 whole websites in your header. Impressive!

You should have seen the version with the blog roll in it.

Jimlit fucked around with this message at 23:40 on Sep 2, 2014

# ? Sep 2, 2014 23:38

Pivo: Aug 20, 2004

I still think it's way too much and as I'm sure you're aware it totally sucks on mobile, but what the client wants is what the client wants right, and what the gently caress do I know? I'm the backend guy. But I love UI/UX. There's just *got* to be a better way to do that... If it was me designing it, I'd get rid of all of the hover poo poo (unless it was just a tiny menu pops under). So like, like for example on my 15" rMBP when I hover 'Information', the poo poo that pops up literally takes up half of my screen. That's not a menu, that's a webpage! And I'm sort of immediately overwhelmed by it, and even if I knew what all of these CFR things were I would still feel like I was at the mercy of your UI to keep my mouse over that menu while I decided which one to click. Check out the concept of hover intent - maybe pop up the big menu (if you REALLY like it...) if they stay there for a while, but otherwise let them just click 'Information' and make sure all of that info is linked from that page.

But again, I'm a backend guy.

Also there's some weirdness with Chrome on OS X, when you hover Services some random poo poo gets highlighted in the bottom-right corner.

# ? Sep 3, 2014 00:34

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Heskie posted:

I had a similar issue where a PNG was reversed upside down for my client's Safari a while back. They were using OSX Tiger (Safari 5 I think?) but it looked fine for me in Mavericks/Safari 7.

I think it was caused by the image's colour profile being saved as RGB rather than CMYK, so it could be that?

Web stuff should always be RGB. I doubt it was that.

# ? Sep 3, 2014 05:13

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

What Chenghiz said; Saving as CMYK will usually cause IE7 (8?) to not show the image, but I've never heard of it messing with the content. That's probably a cockup with an image processing library on the server or the PNG was written by a bizarro application. Safest way to deal with it is just resave it through Photoshop Save-for-web, or if you're running a CMS, pass images through something like GD Library on upload to make sure they're not dodgy (eg. CMYK).

Jimlit posted:

Cut a bunch of the copy and layers out per the recommendations:
http://www.ofnisystems.com/header-revision/

That's still a mega menu. It's not as overwhelming as it was before with the amount of text, it's not exactly streamlined. Try dropping the padding of .sub-anchor to 10px or less and it might feel more reasonable.

You also want to think about mobile early on - if site this is going to work on mobile, you need to accept that a mega menu is never going to be present, because there simply isn't the room for it. In that case, the menu can only display maybe the first two levels.
Because of that, when I click on "Excel Safe" I'd expect the landing page to have the usual blurb, but also links to the 4 pages that appear under the Mega Menu in a call-to-action style. If they're that important to be on the menu, they should be prominent on the parent page.
Similarly, when I click "Products" I expect the products page to have maybe a grid of 2x2 products that appear under the menu, with inviting pictures and small blurbs as CTAs. Right now it's just a get-me-out-of-here wall of text, with an uninviting accordion sidebar menu.

Also at 956px your site feels cramped as hell on a 1920 screen. The standard is at least 1170px provided the site is actually responsive. If it's not responsive (which your current one isn't), it feels like it was made in 2004.

Also in your site.js, you're using slideUp(0) which is causing a 1-frame animation lag in Chrome, so you get a millisecond where both menus are visible and it's bugging me like crazy.

code:

// poo poo like this
$('.t1').mouseover(function(){ 
    $('.nav-sub').stop().slideUp(0);
    $('.s1').stop().slideDown(0); 
});

// Should either be this, so you can change the values from 0 to 100 and have it work
$('.t1').mouseover(function(){ 
    $('.nav-sub').stop().slideUp(0, function() {
        $('.s1').stop().slideDown(0); 
    });
});

// Or this, so you don't get the 1ms flicker
$('.t1').mouseover(function(){ 
    $('.nav-sub').hide();
    $('.s1').show(); 
});

I don't want to tell you how to get more conversions or anything, but all your "how to buy" pages need a dead-obvious link to the Contact Us page (and labelled as such), or even better, a contact form of their own. These should be inviting CTAs, and pictures work wonders for this, rather than 4 sentences of text that I have to actually read.

http://www.ofnisystems.com/products/excelsafe/summary/ almost has it right, but the link appears below the fold. It would be amazing if you could use a scroll-spy and have the "contact us for a blah blah blah" follow you down the page.
The anchor on that page which surrounds "Try ExcelSafe with your MS Excel spreadsheets." should also have display:block applied to it, otherwise when you mouse over various parts of the empty space you don't get the link, and it causes the underline to flicker.

# ? Sep 3, 2014 06:01

hayden.: Sep 11, 2007; here's a goat on a pig or something

I'm making a sort of Harvest Moon game in HTML/Canvas and eventually want it to be multiplayer. In the meantime I want to be able to store map data (it's a tile structure). I want to be able to save and load this map data across multiple computers because I do dev work on three separate PCs, so that means the localstorage option is out doesn't it?

Another idea I had was using AJAX to a PHP page to get the data out of a MySQL database, but I am using GitHub to host my project and I'm not sure of an elegant way to have the database connection info not publicly available. This also has the downside of having to do a SQL query for data every single time a player needs it and it seems like that'd be really slow/resource intensive if there were a lot of people playing. This might be okay though because I don't really need real-time updating with a harvest moon like game, there can be a few second lag between updates and not really be a big deal.

The other option is using websockets or whatever to connect to a node.js server, but I'm only somewhat familiar with node and that'd be the most time consuming option and again run into the problem of storing database login/password in a file (to connect to a remote SQL database) on GitHub.

I also saw some possible options of having a local data storage solution with node.js, like maybe redis or a node package that stores data locally in JSON. That way the data would sync on GitHub.

I'm also concerned about the future of node because I know the lead guy left recently.

Can someone tell me what some good options are here?

hayden. fucked around with this message at 07:13 on Sep 3, 2014

# ? Sep 3, 2014 07:09

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

hayden. posted:

I'm making a sort of Harvest Moon game in HTML/Canvas and eventually want it to be multiplayer. In the meantime I want to be able to store map data (it's a tile structure). I want to be able to save and load this map data across multiple computers because I do dev work on three separate PCs, so that means the localstorage option is out doesn't it?

Phone posting, but maybe check out MakerDrive?

# ? Sep 3, 2014 08:44

Heskie: Aug 10, 2002

Chenghiz posted:

Web stuff should always be RGB. I doubt it was that.

Sorry yeah of course, it will have been the other way round, it was ages ago.

The PNG was supplied by the designer so who knows where it came from. Re-saving with Save For Web in PS fixed it though.

Heskie fucked around with this message at 09:00 on Sep 3, 2014

# ? Sep 3, 2014 08:55

Jimlit: Jun 30, 2005

v1nce posted:

Good feedback

Thanks for the JQuery tip, I see the 1ms glitch now and cant un-see it.

Admittedly the site itself is a Frankenstein monster of overwrought copy, bad link structure and ancient web standards. I have been pushing a lot of what you mentioned in your feedback, unfortunately the people calling the shots are completely adverse to making many of them. The header is a perfect example of a crutch for a bad internal link structure, but its what I have to work with.

# ? Sep 3, 2014 13:51

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

hayden. posted:

I'm making a sort of Harvest Moon game in HTML/Canvas and eventually want it to be multiplayer. In the meantime I want to be able to store map data (it's a tile structure). I want to be able to save and load this map data across multiple computers because I do dev work on three separate PCs, so that means the localstorage option is out doesn't it?

Another idea I had was using AJAX to a PHP page to get the data out of a MySQL database, but I am using GitHub to host my project and I'm not sure of an elegant way to have the database connection info not publicly available. This also has the downside of having to do a SQL query for data every single time a player needs it and it seems like that'd be really slow/resource intensive if there were a lot of people playing. This might be okay though because I don't really need real-time updating with a harvest moon like game, there can be a few second lag between updates and not really be a big deal.

The other option is using websockets or whatever to connect to a node.js server, but I'm only somewhat familiar with node and that'd be the most time consuming option and again run into the problem of storing database login/password in a file (to connect to a remote SQL database) on GitHub.

I also saw some possible options of having a local data storage solution with node.js, like maybe redis or a node package that stores data locally in JSON. That way the data would sync on GitHub.

I'm also concerned about the future of node because I know the lead guy left recently.

Can someone tell me what some good options are here?

If you need to load and save map data across multiple clients you definitely need a database somewhere. The easiest way to keep connection info to your DB secret is probably to make a separate module that you can require into your main server code that contains the info, and put that module into your .gitignore file. I wouldn't worry about your sql queries being slow unless they're really heavy.

Whether you use PHP or node for your back-end code is pretty much up to preference and what you want to learn/practice. Both are able to respond to ajax requests or use websockets. Are you planning on hosting the game on github pages or do you have a web server for that? As far as I know you wouldn't be able to run server-side code off github - just static pages and source code.

# ? Sep 3, 2014 14:24

Pivo: Aug 20, 2004

Has anyone run into a problem with Firefox sending expired cookies? What we do is we set the expiry time of the cookie properly, and we also store the expiry date of the cookie within the cookie itself. When we get the cookie, we sanity-check that it isn't expired. We've double/triple checked the code and it makes sense, and we keep getting logs from Firefox and only Firefox sending us expired cookies. Literally has never happened with Chrome, Safari, IE, anyone else. Just FF. Is there something obvious that we're missing? I'm not cocky enough to say "Firefox is doing the wrong thing" here, but it sure looks that way.

We basically fix this by exempting various versions of Firefox from the expired cookie check, and it's no big deal for our users since worst-case is they'll have to log in again, but it's still annoying.

# ? Sep 3, 2014 15:25

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

I'd like to change out a Font Awesome icon based on a parent class. So something like

HTML code:

<div class='on'>
   <i class="fa fa-toggle[-on|-off]"></i>
   <!-- other things affected by on-ness are also here -->
</div>

And can't think of a way to do this without integrating bits of the FA CSS into my own, which strikes me as a bad idea.

# ? Sep 3, 2014 20:01

Sedro: Dec 31, 2008

Munkeymon posted:

And can't think of a way to do this without integrating bits of the FA CSS into my own, which strikes me as a bad idea.

I think the proper way is to reference their LESS or SASS, so you can use their styles without copying and pasting them.

# ? Sep 3, 2014 20:13

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Sedro posted:

I think the proper way is to reference their LESS or SASS, so you can use their styles without copying and pasting them.

Yeah, my approach in one project is to avoid using the fa classes in my markup at all, as eventually we'll be swapping in custom iconography. I use the fa classes using @extend or the content variables, ie $fa-var-chevron-down. I know the font awesome scss in the repo/bower is just fine for this approach.

# ? Sep 3, 2014 20:50

Bastard: Jul 13, 2001; We are each responsible for our own destiny.

Munkeymon posted:

I'd like to change out a Font Awesome icon based on a parent class. So something like
HTML code:
<div class='on'>
   <i class="fa fa-toggle[-on|-off]"></i>
   
</div>
And can't think of a way to do this without integrating bits of the FA CSS into my own, which strikes me as a bad idea.

As already said, use sass or less. If you want to go reeeeealy quick and dirty, just use multiple classes and hide/show them based on the parent state, like so: http://jsfiddle.net/vwz0xucz/

# ? Sep 3, 2014 20:59

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

The best way to do it is probably inserting the FA icon using CSS content properties: http://stackoverflow.com/questions/20782368/use-font-awesome-icon-as-css-content

# ? Sep 3, 2014 21:27

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

Lumpy posted:

Just be very, very, very, very careful of:

$eeny: 37.50em; //600px...
// unless I change my base font-size, then it's no longer 600px
// and if I want 600px, then I should just use 600px, so maybe
// I should think about that and use PX instead of em,
// or not put in pixels size comments
// next to my em sizes because it can get me or another dev
// in trouble later if they equate $eeny with 600px elsewhere in
// the CSS and then things change and suddenly things are broken
// all over the place because there was an assumption made due
// that that comment

Lets talk about this, help me out. I'm not immune to cargo culting it at times, but I thought ems were standard practice for breakpoints for a while now?

I've been under the impression that I can avoid browser zooming issues by using ems over pixels, a la these guys and this guy. Where am I wrong on that? As for the px value in the comments, that's just for my own head; when I'm designing something I know generally how wide 600px is, but 37.5em doesn't mean anything to me. Lastly, I'm not changing the base font size at any point, and the people that follow me won't be either; these aren't gargantuan corporate sites I'm building, they're little sites around 6-7 pages. Resetting the base font size would break things in ways that would be seen pretty quickly.

# ? Sep 4, 2014 02:37

PleasantDilemma: Dec 5, 2006; The Last Hope for Peace

Thermopyle posted:

I need to whip up a dashboard style site with Boostrap 3 (like these, but I don't care where it comes from). For right now I'm just looking for a pre-built theme. Anyone have any they've used an particularly liked?

I'm also super interested in any answers to this, I have to prototype a dashboard thing at work and I haven't done that before.

# ? Sep 4, 2014 03:21

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

jackpot posted:

Resetting the base font size would break things in ways that would be seen pretty quickly.

I believe Lumpy's point was mostly that if this is the case then it's because your sites are designed for 600px written as 37.5em rather than designed for 37.5em. It's fine for small sites and if you're working by yourself, but anybody picking up your code will, as you say, quickly find that the font-size breaks things because of that.

The whole purpose of em is so that everything maintains its design relativity to the other elements, as opposed to pixels which are an absolute "it's this big, deal with it" and run into issues with mobile devices that misreport their resolutions and people who have increased their font-size for readability.

# ? Sep 4, 2014 05:44

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

jackpot posted:

Lets talk about this, help me out. I'm not immune to cargo culting it at times, but I thought ems were standard practice for breakpoints for a while now?

I've been under the impression that I can avoid browser zooming issues by using ems over pixels, a la these guys and this guy. Where am I wrong on that? As for the px value in the comments, that's just for my own head; when I'm designing something I know generally how wide 600px is, but 37.5em doesn't mean anything to me. Lastly, I'm not changing the base font size at any point, and the people that follow me won't be either; these aren't gargantuan corporate sites I'm building, they're little sites around 6-7 pages. Resetting the base font size would break things in ways that would be seen pretty quickly.

As Ghostlight summed up, it's not about using px over em. It's about the fact that your comment is a lie. 37.5em is not 600px. If you want your container to be 37.5em wide, great! Just don't put a comment next to it that says it's 600px wide, because it's not. It's 37.5em wide. If you don't understand what 37.5ems means from a design perspective, then you probably shouldn't be using it for layout, since you seem to want a fixed width, which means you should use px instead.

Every browser (IE 8 included, I think) will scale up px just fine when the user zooms, so if you do want fixed sizes for things, you'll be A-OK using them.

If you want your media queries to re-layout the site as people zoom, then you should use ems in your media queries. If you have a "fluid" layout and want your line lengths to be nice always, then use ems for min and max widths on text blocks. But if you are designing a thing that you want to be 600px wide, you should make it 600px.

# ? Sep 4, 2014 18:26

kedo: Nov 27, 2007

Looking for opinions.

After quitting my full time job to start freelancing full time I find myself with a lot of open time. I have several projects that are proposed and will probably be kicking off in a month or two, but in the mean time I've run out of productive things to do. Thus, I'd like to tackle a new language or framework or CMS but am having a hard time picking one to dive into.

My expertise is primarily on the front end (which I've been doing for about 13 years), and I have a super solid grasp on HTML, CSS, JS and know enough PHP to be dangerous. I've been working with WordPress so long that I can do pretty much anything a client might want with it, but I worry that I'm pigeonholing myself. Learning a new language altogether is intriguing to me because someday I'd like to handle a bit more of the backend side of projects than I do now. Being able to develop native apps is also an exciting idea. However I have no real training in programming and am having a hard time figuring out what I want to jump into.

I'm looking at Ruby and Python right now because they seem a lot more useful in the long run than something like PHP. Any thoughts? Someone point me in a good direction.

# ? Sep 4, 2014 20:16

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

kedo posted:

Looking for opinions.

After quitting my full time job to start freelancing full time I find myself with a lot of open time. I have several projects that are proposed and will probably be kicking off in a month or two, but in the mean time I've run out of productive things to do. Thus, I'd like to tackle a new language or framework or CMS but am having a hard time picking one to dive into.

My expertise is primarily on the front end (which I've been doing for about 13 years), and I have a super solid grasp on HTML, CSS, JS and know enough PHP to be dangerous. I've been working with WordPress so long that I can do pretty much anything a client might want with it, but I worry that I'm pigeonholing myself. Learning a new language altogether is intriguing to me because someday I'd like to handle a bit more of the backend side of projects than I do now. Being able to develop native apps is also an exciting idea. However I have no real training in programming and am having a hard time figuring out what I want to jump into.

I'm looking at Ruby and Python right now because they seem a lot more useful in the long run than something like PHP. Any thoughts? Someone point me in a good direction.

Django.

# ? Sep 4, 2014 20:18

Analytic Engine: May 18, 2009; not the analytical engine

kedo posted:

Looking for opinions.

After quitting my full time job to start freelancing full time I find myself with a lot of open time. I have several projects that are proposed and will probably be kicking off in a month or two, but in the mean time I've run out of productive things to do. Thus, I'd like to tackle a new language or framework or CMS but am having a hard time picking one to dive into.

My expertise is primarily on the front end (which I've been doing for about 13 years), and I have a super solid grasp on HTML, CSS, JS and know enough PHP to be dangerous. I've been working with WordPress so long that I can do pretty much anything a client might want with it, but I worry that I'm pigeonholing myself. Learning a new language altogether is intriguing to me because someday I'd like to handle a bit more of the backend side of projects than I do now. Being able to develop native apps is also an exciting idea. However I have no real training in programming and am having a hard time figuring out what I want to jump into.

I'm looking at Ruby and Python right now because they seem a lot more useful in the long run than something like PHP. Any thoughts? Someone point me in a good direction.

D3.js

# ? Sep 4, 2014 20:31

Bob Morales: Aug 18, 2006; ~~Just wear the fucking mask, Bob~~

I don't care how many people I probably infected with COVID-19 while refusing to wear a mask, my comfort is far more important than the health and safety of everyone around me!

Stupid question: I have a div that's centered and I want to put 'expanding' divs on each side that I can fill with the same color. What are a few ways to do that?

code:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="foobar.css">

<!-- page title, displayed in your browser bar -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet">
</head>
<body>
<div id='menubar'>
	<ul>
        <li><a href="#"><img src="images/logo_white_100px.png">logo</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Connect</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">Service</a></li>
		<li><a href="#">Media</a></li>
		<li><a href="#">Contact</a></li>
		<li class='social'><a href="#"><i class="fa fa-facebook"></i></a></li>
		<li class='social'><a href="#"><i class="fa fa-linkedin"></i></a></li>
		<li class='social'><a href="#"><i class="fa fa-twitter"></i></a></li>
		<li class='social'><a href="#"><i class="fa fa-youtube"></i></a></li>
	</ul>
</div>
<div id='foo'>
	(c) 1991, 1992, 1993
</div>
</body>
</html>

code:

body {
	margin: 0px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
}

li.social {
    float: right;
}

#menubar {
/*    margin: 0 auto; */
    background-color: #83bf23;
 /*   width:100%; */
 	min-width: 960px;
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    overflow: hidden;
}

a:link, a:visited {
    display: block;
    width: auto;
    height: 40px;
/*    font-weight: medium; */
    font-size: 12pt;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #eeeeee;
    background-color: #83bf23;
 /*   text-align: center; */
    padding: 10px 10px 0px 10px;
    text-decoration: none;
}

a:hover, a:active {
    background-color: #819f51;
}

#foo {
	background-color: #dddddd;
/*	display:block; */
}

# ? Sep 4, 2014 20:59

The Dave: Sep 9, 2003

You could make your menu bar be what goes 100% then have a container inside of it that adds width constrictions / centering. Like: http://codepen.io/anon/pen/GAuaI

# ? Sep 4, 2014 21:29

Bob Morales: Aug 18, 2006; ~~Just wear the fucking mask, Bob~~

I don't care how many people I probably infected with COVID-19 while refusing to wear a mask, my comfort is far more important than the health and safety of everyone around me!

The Dave posted:

You could make your menu bar be what goes 100% then have a container inside of it that adds width constrictions / centering. Like: http://codepen.io/anon/pen/GAuaI

Neat. I tried something similar but put divs on the outside, and had to resort to Javascript to get what I wanted and that was just wonky.

# ? Sep 4, 2014 21:37

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

kedo posted:

Looking for opinions.

After quitting my full time job to start freelancing full time I find myself with a lot of open time. I have several projects that are proposed and will probably be kicking off in a month or two, but in the mean time I've run out of productive things to do. Thus, I'd like to tackle a new language or framework or CMS but am having a hard time picking one to dive into.

My expertise is primarily on the front end (which I've been doing for about 13 years), and I have a super solid grasp on HTML, CSS, JS and know enough PHP to be dangerous. I've been working with WordPress so long that I can do pretty much anything a client might want with it, but I worry that I'm pigeonholing myself. Learning a new language altogether is intriguing to me because someday I'd like to handle a bit more of the backend side of projects than I do now. Being able to develop native apps is also an exciting idea. However I have no real training in programming and am having a hard time figuring out what I want to jump into.

I'm looking at Ruby and Python right now because they seem a lot more useful in the long run than something like PHP. Any thoughts? Someone point me in a good direction.

ASP MVC

For real, though, Microsoft actually makes a decent web framework these days

# ? Sep 4, 2014 22:22

Heskie: Aug 10, 2002

kedo posted:

Freelance learning stuff

I'm in a near identical situation and have been going back and forth between Rails and Laravel.

I'm leaning towards Laravel as it'll improve my PHP knowledge and hopefully teach good habits which I can use in my current projects. Additionally, getting a job using Rails outside of London seems like an impossible task.

I really like Ruby though, I find it fun to code in and tools like Middleman and Sinatra look really cool.

Heskie fucked around with this message at 22:33 on Sep 4, 2014

# ? Sep 4, 2014 22:30

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 07:54

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

kedo posted:

Looking for opinions.

After quitting my full time job to start freelancing full time I find myself with a lot of open time. I have several projects that are proposed and will probably be kicking off in a month or two, but in the mean time I've run out of productive things to do. Thus, I'd like to tackle a new language or framework or CMS but am having a hard time picking one to dive into.

My expertise is primarily on the front end (which I've been doing for about 13 years), and I have a super solid grasp on HTML, CSS, JS and know enough PHP to be dangerous. I've been working with WordPress so long that I can do pretty much anything a client might want with it, but I worry that I'm pigeonholing myself. Learning a new language altogether is intriguing to me because someday I'd like to handle a bit more of the backend side of projects than I do now. Being able to develop native apps is also an exciting idea. However I have no real training in programming and am having a hard time figuring out what I want to jump into.

I'm looking at Ruby and Python right now because they seem a lot more useful in the long run than something like PHP. Any thoughts? Someone point me in a good direction.

Django.

# ? Sep 4, 2014 23:27

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

«‹›361 »