The Web Design & Development Megathread

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

«‹›2 »

Heskie: Aug 10, 2002

kedo posted:

I'm a hair's breadth from dropping IE 8 support as well.

I've only recently dropped IE7, and it still makes me feel uneasy. I was late to drop IE6 support too.

Do you know any trustworthy sources that'd help me ease my guilt?

# ¿ Jun 18, 2013 14:46

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 10:11

Heskie: Aug 10, 2002

Yeah that makes sense. I wouldn't mind so much if debugging IE7/8 in my VM wasn't such a pain.

A lot of my work is within the fashion industry and my analytics suggests its very Safari/Chrome heavy, but unfortunately I still have to support IE7 on some projects for China. Its kind of rubbed off on me and makes me feel uneasy dropping it on other projects. I felt the same way when I dropped IE6 about a year ago, and is something I need to get over.

Knowing that IE7 doesn't even get mentioned in StatCounter's chart eases my mind a lot, thanks for the link.

# ¿ Jun 18, 2013 15:24

Heskie: Aug 10, 2002

glompix posted:

As far as I can tell, progressive enhancement is still relevant. Build a core experience that gets the job done. Then, bring in as many fancy JS modules as you need. It might look janky and be lame in old browsers, but it will work. The kinds of users who are still on IE7 don't give a gently caress so long as they can do what they need without having to download a whole new browser. That's just good web development though - I could be just as well be advocating for blind users. Knowing your audience is #1.

I whole heartedly agree with this, but trying to explain it not just to the clients, but even people within the agency is like hitting my head against a brick wall. No Mr Designer, SIFR is not a valid workaround in 2013 and those buttons don't absolutely need rounded corners in IE7. :argh:

A lot of it has to do with it being the fashion industry I guess, and its all about being pixel perfect. I've found form over function to be very common and often problematic. Until IE7/8 dies a horrible death or I manage to teach everyone at the agency about progressive enhancement this will continue to be an issue.

akadajet posted:

I'll throw my recommendation in for Mimosa.

This looks useful, thanks for the link.

# ¿ Jun 19, 2013 11:09

Heskie: Aug 10, 2002

kedo posted:

Also anti-alias that ugly type.

Is there a known technique to do this on IE7+/win? I know theres -webkit-font-smoothing: antialiased, and I seem to remember something about text-shadow:0? But is there a known technique for this?

DreadCthulhu posted:

Btw, what's the deal with html5shiv vs html5shim? Both projects are up there on google code and both referenced from the github page of html5shiv.

They're the same thing, at the bottom of the github readme:

Remy Sharp on Github posted:

Why is it called a shiv?

The term shiv originates from John Resig, who was thought to have used the word for its slang meaning, a sharp object used as a knife-like weapon, intended for Internet Explorer. Truth be known, John probably intended to use the word shim, which in computing means an application compatibility workaround. Rather than correct his mispelling, most developers familiar with Internet Explorer appreciated the visual imagery. And that, kids, is etymology.

# ¿ Jun 24, 2013 21:25

Heskie: Aug 10, 2002

Flaggy posted:

Would this potentially work for the problems I am having as well? I am assuming by placing it in the <head> section would be in index.php?

It could go a long way to help if your theme uses HTML5 elements such as <header>, <aside> etc as IE doesn't support these and gets confused.

Although kedo mentioned there was a bunch of JS issues on IE7, so maybe not. I'd say add it anyway if you're wanting to support IE7/8. I include it on every site I build.

Your best bet is still probably Goons for hire though because debugging IE is usually all about experience, knowing what works and what doesn't after years of painful trial and error. Save yourself the hassle.

# ¿ Jun 24, 2013 22:11

Heskie: Aug 10, 2002

Munkeymon posted:

CSS stuff

I've been dealing with CSS' inadequacies for so long I forget half of the techniques I use are actually workarounds.

Flexbox layout will solve grid layout and vertical positioning issues. Unfortunately, as IE9 doesn't support it, it could be some time before we get to actually use it.

# ¿ Jun 25, 2013 22:20

Heskie: Aug 10, 2002

Winter is Cuming posted:

http://flexiejs.com/

More and more, I am willing to say "gently caress you IE" and just load up a Polyfill.

I've actually used this in the past, but thought it only supported the old syntax since they've changed it like 3 times?

Would content be rendered horribly while the JS loads? I guess who gives a gently caress if IE usage is low.

Edit: Actually if it's good enough for Mozilla and Compass then it's good enough for me.

# ¿ Jun 25, 2013 23:26

Heskie: Aug 10, 2002

Just saw this on Twitter.

Kyle Drake posted:

I want to make another Geocities. Free web hosting, static HTML only, 10MB limit, anonymous, uncensored.

http://neocities.org/blog/making-the-web-fun-again

I like this concept, it gives me warm fuzzy feelings about the 'good old days' of being 12 and building terrible Dragonball Z fansites on Tripod. If it gets more people like Eleanor into building websites then its A Good Thing in my opinion.

Heskie fucked around with this message at 01:08 on Jun 29, 2013

# ¿ Jun 29, 2013 00:58

Heskie: Aug 10, 2002

I'd recommend taking a look at http://www.mail-tester.com/ too.

You send an email to a generated mailbox, and it'll tell you if you're missing anything in your setup (like SPF/DKIM) that would cause your emails to be marked as spam.

Its really simple and helped me a ton when I was setting up my VPS.

# ¿ Jan 8, 2014 14:58

Heskie: Aug 10, 2002

pipes! posted:

I find it to be a lot better of an approach for responsive sites and a SASS-based workflow (especially if you base everything on a handfull of core measurements), and it's also far, far better from an accessibility standpoint if the user resizes the screen. Try hitting CMD+ three or four times on this page versus this page.

They both scale the same for me? :shrug:

I just use whichever the design dictates. For example, a recent project's designer insisted the page wrapper should always be 50px from the edge of the window even while scaling.

I think as long as the design scales and works as intended at any width then there's no problem. I don't think pixels should be shunned entirely as they serve their own purpose.

e: vvv and that

Heskie fucked around with this message at 14:30 on Jan 10, 2014

# ¿ Jan 10, 2014 12:23

Heskie: Aug 10, 2002

Anony Mouse posted:

How bad of a practice is it to use divs inside of anchors? I've read a few things that say to use spans instead because of semantics, putting blocks inside of inlines is bad, etc. On the other hand, HTML5 and modern browsers don't seem to care. In my particular case I'm asking because I want to make an Isotope/Masonry gallery with clickable items. It seems to work identically either way.

With divs: http://jsfiddle.net/belross/GgLf7/1/

With spans: http://jsfiddle.net/belross/eL8rP/1/

You could put the anchors inside the divs, and give them the same block dimensions: http://jsfiddle.net/UDGrf/1/
This means you could put some (hidden) text in there too if you wanted for screen readers etc.

Or you could remove the div/span altogether using only the anchor if they're potentially unnecessary? http://jsfiddle.net/UDGrf/2/

# ¿ Feb 7, 2014 14:17

Heskie: Aug 10, 2002

Nebulon Gate posted:

The only reliable way to detect if a screen is a touch screen is detecting screen size with user agent and touch capability.

Is this not reliable?

code:

var is_touch_device = 'ontouchstart' in document.documentElement;

I've been using it in a couple of projects and not noticed any issues, am I missing some significant devices?

Edit:

jackpot posted:

Haha, just found out IE10 doesn't support conditional statements. gently caress those guys, seriously. They've gone from being lovably incompetent to downright hostile.

Edit: And to answer your question, no, so far I haven't found any reason to use them (yay!). But I've needed them for every other goddamn IE release going back to IE6, so I don't see why 10 will be any different.

Detect features, not browsers etc etc.

Heskie fucked around with this message at 01:22 on Feb 28, 2014

# ¿ Feb 28, 2014 01:19

Heskie: Aug 10, 2002

Bastard posted:

Please look into version control and deployment services. They make everything soooooo much better.

Agree with this 100%.

If command line isn't your thing then SourceTree, Bitbucket and DeployHQ (or a free alternative) are great tools/services to get you started.

# ¿ Mar 1, 2014 13:21

Heskie: Aug 10, 2002

kedo posted:

That looks like any of a billion commonly used grid systems I've seen previously.

Same. Its pretty funny but its really not that different from many I've seen.

I've never seen the benefit personally, especially if you've adopted something like SMACSS.

# ¿ Mar 4, 2014 18:34

Heskie: Aug 10, 2002

KARMA! posted:

The only way is to limit the height of the box to multiples of the height of one repetition of the pattern through javascript. It's going to be very fiddly.

I feel like I have to do this sort of bullshit on a daily basis, while the designer stares at me blankly as I plead my case.

# ¿ Mar 20, 2014 00:10

Heskie: Aug 10, 2002

Sergeant Rock posted:

Can you use CSS Border-image on the containing element / body?

http://css-tricks.com/understanding-border-image/

Not while supporting IE7 :eng99:

# ¿ Mar 20, 2014 11:30

Heskie: Aug 10, 2002

Suspicious Dish posted:

... visibility in devtools.

Recently Chrome DevTools started showing psuedo elements in the markup as if they were regular elements, its a nice feature.

As for ::before/::after, I guess if their use is for presentation only then they're perfectly fine? Thats exactly what CSS is for after all.

# ¿ Mar 24, 2014 15:53

Heskie: Aug 10, 2002

kedo posted:

Stealing this for my portfolio, thanks!

# ¿ Apr 11, 2014 22:53

Heskie: Aug 10, 2002

Lumpy posted:

Remember, if you don't have at least 10 animated GIFs on your page, you won't get the user's attention.

Its going to pop, op.

# ¿ Apr 12, 2014 09:14

Heskie: Aug 10, 2002

The simplest solution I can think of would just be declaring the PHP variable inline as a javascript variable.

For example:

code:

<script>
  var category = <?php echo $category; ?>;
</script>

Its perhaps not the most elegant, but its easiest way I can think of to shift variables between PHP and JS.

# ¿ Jun 17, 2014 19:00

Heskie: Aug 10, 2002

PlesantDilemma posted:

Is this not a good idea? I do this at lot. The backend will generate a bunch of data and javascript picks it up like your example instead of doing an ajax call on load.

The purest in me likes to avoid inline JS (and CSS) as much as possible, but other than my own OCD I'd say its totally fine and I've seen it a lot.

# ¿ Jun 17, 2014 21:36

Heskie: Aug 10, 2002

Chris! posted:

runs IE 11

I hate you

*Goes back to debugging IE7*

# ¿ Jun 19, 2014 12:59

Heskie: Aug 10, 2002

Thats not actually a lot of files in my opinion. Pretty much the usual amount for every project I do.

As kedo said each file is usually not that large. Using Sublime I can cmd+p to fuzzy search straight to the file I want (as they're all named appropriately) rather than scrolling hundreds of lines down a file.

# ¿ Jun 19, 2014 22:10

Heskie: Aug 10, 2002

caiman posted:

It doesn't cause an error, it just doesn't trigger the media query.

I don't if it helps, but I nest my media queries in the following way and never have any issues and find it much simpler way to modularise stuff:

code:

$tablet-portrait: 700px;
$widescreen: 1152px;

.parent-class {
  .child-class {
    @include breakpoint($tablet-portrait) {
      font-size: 11px;
    }

    @include breakpoint($widescreen) {
      font-size: 12px;
    }

    font-size: 10px;
  }
}

Breakpoint being my sass mixin for media queries. The breakpoint mixin if you're interested:

code:

// Media query breakpoints
@mixin breakpoint($point) {
  @media (min-width: $point) {
    @content;
  }
}

e: Beaten by kedo as usual :argh:

Heskie fucked around with this message at 16:47 on Jun 27, 2014

# ¿ Jun 27, 2014 16:43

Heskie: Aug 10, 2002

a shameful boehner posted:

Just reposting from last page, since I didn't see anyone comment. Can someone more experienced take a peek at the curricula and let me know if it makes sense for someone just getting familiar with web design & development?

Spent the last few hours reading through this as I'm a freelancer/contractor looking to go full-time, applying directly to agencies in the next few weeks. Looks pretty good and I'll be referring back to it once I've rebuilt my portfolio etc.

Thanks for the link.

# ¿ Jul 11, 2014 23:56

Heskie: Aug 10, 2002

v1nce posted:

I've read a few posts which advocate instead applying the JavaScript "class" by using a data attribute, effectively:
code:
<button data-js="magic-button"></button>
$('[data-js="magic-button"]').on('click', function() { doMagicShit(); });

This is how I did it on a recent project, while it worked for simple things like buttons I had issues with larger widgets. The problem I had was when a child element of was important to the JS. For example, a div wrapper on an accordion widget, where data-js is added to clickable titles. Do I mark all them up with data-js, making GBS threads up the markup? How do you make it clear?

I suppose some form of BEM naming convention could work in this instance?

I'd be interested in how others solve this too

Pollyanna posted:

should I put them in a <ul></ul> instead?

This isn't specific to Foundation, but have a read of this CSS Tricks article, Navigation in Lists: To Be or Not To Be

Pollyanna posted:

I had a part where it was a sort-of listlike <h2><p>Section 1</p></h2> <h2><p>Section 2</p></h2> etc.,

Please don't do this!

# ¿ Jul 15, 2014 09:45

Heskie: Aug 10, 2002

The Merkinman posted:

But hamburger menus are evil, and you should just do what iOS does. Sorry if you don't want it to look like an iOS app or have more than 5 items though.

That's an interesting article, I'd noticed that Facebook had ditched the 'hamburger' and I'll probably do the same on the e-commerce store I'm redesigning at the moment.

One of the big pros of 'mobile first' was having to make decisions on content hierarchy and UX, i.e. which links absolutely must be in the main navigation and which are just filler. Off-canvas menus aren't quite mega dropdowns yet, but I've seen a few sites now with 2 tiers of off-canvas navigation already.

# ¿ Jul 15, 2014 19:53

Heskie: Aug 10, 2002

Pollyanna posted:

I'm having trouble getting SCSS's "image-height" and "image-width" helpers to work in Rails 4. According to the sass_rails documentation, I don't need the image- prefix to use them. However, none of those compile correctly:
code:
height: image-height(url("path/to/image.jpg"));
height: image-height("path/to/image.jpg");

height: height(url("path/to/image.jpg"));
height: height("path/to/image.jpg");
Is there a particular way to get the height of an image in sass_rails? The SCSS/Compass documentation says the helpers are image-height and image-width, but it doesn't work in my css.scss file. However, it does work in an online compiler I found (sort of, it said it compiled in "undefineds"). I don't understand why it wouldn't work for me, but works elsewhere.

Is Compass (compass-sass, I think?) loaded too? It looks like its a Compass specific mixin? http://compass-style.org/reference/compass/helpers/image-dimensions/

I've done very little Rails work so don't know if Compass is part of the default.

# ¿ Jul 22, 2014 16:29

Heskie: Aug 10, 2002

Pollyanna posted:

It's not, and I don't think it works with Foundation, anyway...I think I'll figure out a different approach instead, or just forget about trying to make the background image fully visible all the time. I'll come back to it later. Thanks!

You may want to check out the regular CSS property: "background-size: cover" (http://css-tricks.com/perfect-full-page-background-image/). That may give the functionality you're after?

If you need < IE8 support theres a jquery polyfill too (Support info: http://caniuse.com/background-img-opts)

# ¿ Jul 22, 2014 16:50

Heskie: Aug 10, 2002

fuf posted:

Are any of those cool project management sites / software geared towards one-man operations?

I'd love to consolidate my calendar, todos, documentation and maybe git repos into one place but I've never found something that felt quite right.

Would like this too. The ones I've found aimed at freelancers etc seem to be more focused on billing etc.

I might just have to see how far I can get with Google Apps.

# ¿ Jul 31, 2014 10:47

Heskie: Aug 10, 2002

Also it looks like Chrome's Dev tools are getting even better mobile emulation, you'll be able to throttle network speeds like 3G. Its in Canary at the moment so won't be long.

There's a post on it here: http://www.elijahmanor.com/enhanced-chrome-emulation-tools/

# ¿ Aug 1, 2014 18:41

Heskie: Aug 10, 2002

Maluco Marinero posted:

This is a pretty good article about writing CSS for the long term. It has plenty of rationale for the resulting guidelines too, well worth a look even if you don't agree with every point.

http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/

Thanks for this, he also has a bunch of other posts that look really useful. Definitely going into my RSS feed.

Heskie fucked around with this message at 10:54 on Aug 9, 2014

# ¿ Aug 9, 2014 10:49

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

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

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

Heskie: Aug 10, 2002

might have to go look into Django some more then.

# ¿ Sep 5, 2014 17:42

Heskie: Aug 10, 2002

fuf posted:

Does google crawl elements if they're set to display:none?

I have some paragraphs of text that I want to fade in nicely but I wanna make sure google can read them. Should I hide them off-screen or set height:0 or something instead?

I'm fairly certain it does, yeah.

You can double check though using Webmaster Tools and using 'Fetch as Google' https://support.google.com/webmasters/answer/6066468?hl=en&ref_topic=6066464

# ¿ Sep 10, 2014 16:15

Heskie: Aug 10, 2002

Lumpy posted:

I did for about three days, then somebody made Gulp, and I dropped Grunt like a hot potato.

I got into Gulp recently and really like it.

Is there something for deployments with Gulp that you use? I've seen gulp-sftp but I'm thinking something more like Capistrano that handles rollbacks and shared directories etc.

# ¿ Sep 11, 2014 23:25

Heskie: Aug 10, 2002

Lumpy posted:

For deployments I use a Makefile which runs an rsync command. One could use a shell task to have gulp or grunt do the same. If possible, favor rsync over (s)FTP where possible, as it is easier and faster in my experience.

That makes sense. The reason I ask about Gulp specifically is because I'm using it for everything else and I'd rather not bury my projects under a dozen tools with their own dependencies and config files.

I've been living under a rock with regards to web tools so when I finally decided to look into Grunt it had already been 'replaced' by Gulp.

I guess I could always set up a git hook on my master branch to deploy to production? I've been using Gitflow which is super easy with Sourcetree, so this could work?

# ¿ Sep 12, 2014 12:58

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 10:11

Heskie: Aug 10, 2002

This line of thinking brought us scrolljacking and sIFR :suicide:

# ¿ Oct 28, 2014 21:44

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

«‹›2 »