The Web Design & Development Megathread

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

«‹›361 »

daggerdragon: Jan 22, 2006; My titan engine can kick your titan engine's ass.

Pivo posted:

I don't understand why so few browsers support text/html in DOMParser. Like bro you're a browser, you had ONE loving JOB.

So we have people who are submitting HTML in forms, we want to validate that client-side (we do The Right Thing server-side too, but everything feels a bit nicer when we don't have the round-trip just to validate). Basically we just want to disallow certain tags. Or more accurately, only allow certain tags. We can use DOMParser to parse it as text/xml in all browsers we claim to support, but then people can't use ampersands or angle-brackets that don't form tags, which kinda sucks for like Black & Blue or Me > You. I've looked if anyone's implemented an HTML parser in JS, that would be heavy as poo poo but whatever, and it looks like there are various things out there in various stages of completion and I'm just thinking, you know what, THE BROWSER SHOULD BE ABLE TO PARSE HTML ITSELF. But only IE10, Chrome, FF will. Dunno about Opera. Safari doesn't.

So someone on Freenode suggested sticking it in a hidden element and then doing it that way. It's pretty clever but pretty hackish. Is that how you guys would do it?

I'm not a front-end guy, I loving hate this poo poo.

Do you *need* to allow HTML? Can you use Markdown or BBCode instead?

# ? Jul 19, 2014 01:04

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 10:31

Pivo: Aug 20, 2004

daggerdragon posted:

Do you *need* to allow HTML? Can you use Markdown or BBCode instead?

Yeah our users aren't terribly clever and don't adapt well to change

They write blog articles and poo poo, or just copy-paste stuff from the HTML view of a web-based rich text editor.

Plus we've already got literally thousands of people with HTML in the DB

I was going to suggest it but it just won't work, and we also really don't want to do the round trip to validate the html server-side every single time. It's dumb but that's why I don't like webdev, poo poo like this.

It's not like we're allowing too much poo poo right now, parsing it as XML works well enough, we'd just like to parse it as HTML. I think the hidden element thing will probably work, but I hate hacks.

Pivo fucked around with this message at 01:10 on Jul 19, 2014

# ? Jul 19, 2014 01:06

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Pivo posted:

I don't understand why so few browsers support text/html in DOMParser. Like bro you're a browser, you had ONE loving JOB.

So we have people who are submitting HTML in forms, we want to validate that client-side (we do The Right Thing server-side too, but everything feels a bit nicer when we don't have the round-trip just to validate). Basically we just want to disallow certain tags. Or more accurately, only allow certain tags. We can use DOMParser to parse it as text/xml in all browsers we claim to support, but then people can't use ampersands or angle-brackets that don't form tags, which kinda sucks for like Black & Blue or Me > You. I've looked if anyone's implemented an HTML parser in JS, that would be heavy as poo poo but whatever, and it looks like there are various things out there in various stages of completion and I'm just thinking, you know what, THE BROWSER SHOULD BE ABLE TO PARSE HTML ITSELF. But only IE10, Chrome, FF will. Dunno about Opera. Safari doesn't.

So someone on Freenode suggested sticking it in a hidden element and then doing it that way. It's pretty clever but pretty hackish. Is that how you guys would do it?

I'm not a front-end guy, I loving hate this poo poo.

Why not give them a WYSIWYG editor so it's more obvious what is allowed (and probably easier to use) and then only sanitize it server side (I use bleach for this)

# ? Jul 19, 2014 01:10

Pivo: Aug 20, 2004

fletcher posted:

Why not give them a WYSIWYG editor so it's more obvious what is allowed (and probably easier to use) and then only sanitize it server side (I use bleach for this)

Yeah we've got CKEditor for some of our bigger editors, but this is like, a title. That only accepts like i, u, a, br. I guess it's an idea, but I loving hate CKEditor.

Actually the list of things I don't hate is shorter.

We can already sanitize stuff serverside, we want to do it clientside first otherwise we'd do the round trip.

# ? Jul 19, 2014 01:15

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Pivo posted:

Yeah we've got CKEditor for some of our bigger editors, but this is like, a title. That only accepts like i, u, a, br. I guess it's an idea, but I loving hate CKEditor.

Actually the list of things I don't hate is shorter.

We can already sanitize stuff serverside, we want to do it clientside first otherwise we'd do the round trip.

Are you running the validation every keypress or something? Why do you need to do an extra round trip (outside of the one when they click the Save button or whatever).

# ? Jul 19, 2014 01:19

Pivo: Aug 20, 2004

fletcher posted:

Are you running the validation every keypress or something? Why do you need to do an extra round trip (outside of the one when they click the Save button or whatever).

Not every keypress, when a field is unfocused. So if they tab out of a field they get an IMMEDIATE response telling them they hosed up even if they're connecting over satellite from Tuvalu.

Honestly we could just do it all serverside, it's just not a popular idea. And my point was that we're literally running in an application whose primary job IS TO PARSE HTML.

# ? Jul 19, 2014 01:26

Mr. Meagles: Apr 30, 2004; Out here, everything hurts

kedo posted:

If I were in your place, I would use WordPress if only because you're "much less proficient with Drupal." Unless you need to secure medical records or something, I can't think of any good reason why you shouldn't use WordPress.

Bias warning: I like WordPress more than Drupal.

I do too. The debate stemmed from the other guy on the team who isn't on the project anymore being positively adamant about using Drupal. He knew as much about using it at the time as I did, his argument boiled down to Drupal is for pros and WP is for babies so we should learn it. My argument was that we don't have the time to waste going from beginners > pros right now and should use the system we know how to work with.

That's what I've got to do, with a third of my time at meetings and another third on the School. The new fiscal year started 18 days ago and they created two brand new six figure positions for Internal Communications Directors to push some corporate culture nonsense. Sure would've liked a designer at the very least.

# ? Jul 19, 2014 02:48

Pivo: Aug 20, 2004

whatever so I did the invisible element thing, replaced like a hundred lines of hackery that worked different on all browsers with something that is shorter and is more consistent on all browsers

let me know if something sucks here

code:

function isValidHtml(val, allowed){
    var notAllowed = (allowed !== undefined) ? ":not("+allowed+")" : "*";
    
    // so this is a hack becuase some browsers suck and won't let us parse HTML programmatically 
    // so we create an invisible container and make them do their job there.
    // without this we can't parse HTML in IE8, 9, Safari and possibly some others
    if ($j('#validationHtmlContainer').length === 0) {
        $j('body').append('<div id="validationHtmlContainer" style="display:none;" />');
    }
    
    if (val.search(/<.*script.*>/i) !== -1) {
        return false; // ugh if we stick a script tag in the DOM it'll get executed and disappear, then we won't match it
                        // and will save it. It's still safe to save it, but rather not have garbage in the database. 
                        // This isn't pretty, but as long as we never decide to accept script tags...
    }
    
    try { 
        $j('#validationHtmlContainer').html(val);
    } catch (e) {
        return false; // JavaScript exception? Shouldn't happen, maybe attribute calling JS
    }
    
    // See if there's any unwanted tags
    return $j('#validationHtmlContainer').find(notAllowed).length === 0;
}

# ? Jul 19, 2014 03:57

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

Pivo posted:

So someone on Freenode suggested sticking it in a hidden element and then doing it that way. It's pretty clever but pretty hackish. Is that how you guys would do it?

Pretty much, though I dunno what "hidden" has to do with anything. Make a div element in JavaScript, set its innerHTML, then walk through the div's child nodes and do away with whatever. Then grab the innerHTML when you're done and forget about the div you made.

The browser does a great job of parsing HTML, you just gotta feed it right!

edit: Didn't see your post there. You've got the right idea but I dunno why you need to use some element already added to the DOM. Just do

JavaScript code:

var div = document.createElement("div");
div.innerHTML = val;
// do stuff with div.childNodes

plus that does away with your script tag issue (among others that you have yet to find).

pokeyman fucked around with this message at 04:01 on Jul 19, 2014

# ? Jul 19, 2014 03:57

Pivo: Aug 20, 2004

The gently caress, that works? I'm NOT well-versed in JS. You can just DO that? Why the gently caress were we using DOMParser at all then

(and there was an issue: my stupid naive check for script tags would match I wrote a cool script)

edit:
lulz

code:

function isValidHtml(val, allowed){
    var notAllowed = (allowed !== undefined) ? ':not('+allowed+')' : '*';
    var validationDiv = document.createElement("div");
    validationDiv.innerHTML = val;
    
    // See if there's any unwanted tags
    return $j(validationDiv).find(notAllowed).length === 0;
}

today I learned

Pivo fucked around with this message at 04:23 on Jul 19, 2014

# ? Jul 19, 2014 04:16

FSMC: Apr 27, 2003; I love to live this lie

I need some help on how to start on a project. I don't want to spend weeks researching different tools, languages and frameworks to use, I just want to get started. I don't have much experience in webdev so it's going to be pretty much pointless for me to try and pick a tool, language or framework myself at this stage.

I've got an idea for a website, I don't know what it's design will be or how exactly it will work. I'll probably be playing around quite a bit to figure stuff out. It's going to be some kind of price comparison site with comments/forum. It might be structed something like say the Amazon site, where you have different section on the page, the product, details, similar products, and reviews.

Your Skill Level:
Pretty limited in web development. I have helped out friends in the past on their sites, so I have dabbled with the paypal api, php, mysql, html, css.

I mainly have c/c++ experience, but it means I can usually pick up other languages relatively quickly.

I'm using windows.

So how should I get started?

# ? Jul 19, 2014 11: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.<

I've got a chunk of text (my name) that I want to stretch 100% across the screen, or whatever container it's in. There's a jquery plugin for this, right? I just can't remember the name.

# ? Jul 19, 2014 21:15

lunar detritus: May 6, 2009

jackpot posted:

I've got a chunk of text (my name) that I want to stretch 100% across the screen, or whatever container it's in. There's a jquery plugin for this, right? I just can't remember the name.

http://www.zachleat.com/web/bigtext-makes-text-big/

# ? Jul 19, 2014 21:18

My Rhythmic Crotch: Jan 13, 2011

FSMC posted:

I don't want to spend weeks researching different tools, languages and frameworks to use, I just want to get started.
...
I don't know what it's design will be or how exactly it will work.
...
So how should I get started?

Webdev is pretty much a fustercluck of different "standards," technologies and languages, so getting started is kind of difficult if your concept is even a little bit fuzzy. If you're making a price comparison site, I would start with that as the core. So you'll probably need to write a scraping script to grab all the prices and stuff that info into a database. Python is a great language for doing things like that. Once you have the scraper and database working, you need a back end to serve it up. This can be done again in Python using something like Flask, or since you have a C/C++ background, you might find it easier to go with Java. If you have some php experience, you can go that route, though I personally hate it. Whatever languages you choose, I would want to the price scraping to be separate and distinct from the back end, so that if one part stops working, at least the other can continue.

Though you should absolutely expect to spend weeks trying different tools, languages and frameworks. Unless you want to write everything from scratch!

# ? Jul 19, 2014 21:43

FSMC: Apr 27, 2003; I love to live this lie

My Rhythmic Crotch posted:

Webdev is pretty much a fustercluck of different "standards," technologies and languages, so getting started is kind of difficult if your concept is even a little bit fuzzy. If you're making a price comparison site, I would start with that as the core. So you'll probably need to write a scraping script to grab all the prices and stuff that info into a database. Python is a great language for doing things like that. Once you have the scraper and database working, you need a back end to serve it up. This can be done again in Python using something like Flask, or since you have a C/C++ background, you might find it easier to go with Java. If you have some php experience, you can go that route, though I personally hate it. Whatever languages you choose, I would want to the price scraping to be separate and distinct from the back end, so that if one part stops working, at least the other can continue.

Though you should absolutely expect to spend weeks trying different tools, languages and frameworks. Unless you want to write everything from scratch!

I probably will spend weeks trying different tools, languages and frameworks at some point. At the moment I won't have a clue what is good and whats crap. I'm basically trying to figure out how my fuzzy concept may work. I'm mainly trying to figure out if the front end, the display and interface, etc. I think at this stage others might be drawing diagrams, using photoshop, etc. Since the concept is very fuzzy, I need to kind of play around with it.

I just need someone to tell me what tool, language and framework I need to use. Once I get started I'll start to understand how it all fits together and start looking at the right tools, languages and frameworks.

Edit: Re-reading your post, maybe you have explained what I need to do but I don't really understand.

# ? Jul 19, 2014 22:50

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

At a high level here's how your site would work:

1. You have a scraper of some sort scraping prices from websites and depositing that information in a database.
2. You have a framework of some sort which handles user authentication, mapping database information into HTML templates, abstracting the database, and a hundred other things.
3. You have a web server which the framework communicates with.

Using Django in the next few sentences as that's what I've been using a lot lately...

For step 1 you write python scripts which download websites and parse data from them. These scripts use Django's ORM to easily deposit the information into your database.

For step 2 you write views and templates which hook up your models of the data to HTML the webserver (step 3) can send to the clients.

Honestly, you're probably not going to get a good handle on this until you jump in and just do something. The official Django tutorial is good.

# ? Jul 20, 2014 03:53

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

gmq posted:

http://www.zachleat.com/web/bigtext-makes-text-big/

Thanks!

Say you're updating your portfolio site because you're looking for a new job (hypothetically speaking, of course :ninja:

). Is there a way to block that site from being viewed by anyone on your office network? You wouldn't want to block anyone more than that, obviously - just the occasional curious coworkers who you'd rather not know about it (and obviously this doesn't stop anyone from just picking up their phone and going there, or looking me up at home - that's fine). I know I can use the htaccess file to block a specific IP, but can I block a range of IPs that would represent my company network? Or am I just showing how little I know about all this?

# ? Jul 20, 2014 04:07

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

Yeah, if you just want to get runs on the board Django and Python is a good way to do it. The language is fairly easy to get a handle on and the framework has been around for years. Between the good tutorials out there, the wealth of Stack Overflow Q&A, and the amount of community add-ons and support available; you should be able to make good progress on the thing you want to build without reinventing the wheel or smashing your head against poorly documented/buggy dependencies.

That's not to say you won't have problems, but at least the odds will be stacked as best you can, and then once you've got a little more experience under your belt you can make a more informed decision regarding your technology.

# ? Jul 20, 2014 04:09

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

jackpot posted:

Thanks!

Say you're updating your portfolio site because you're looking for a new job (hypothetically speaking, of course ). Is there a way to block that site from being viewed by anyone on your office network? You wouldn't want to block anyone more than that, obviously - just the occasional curious coworkers who you'd rather not know about it (and obviously this doesn't stop anyone from just picking up their phone and going there, or looking me up at home - that's fine). I know I can use the htaccess file to block a specific IP, but can I block a range of IPs that would represent my company network? Or am I just showing how little I know about all this?

You can block ranges, http://stackoverflow.com/questions/18483068/how-to-block-an-ip-address-range-using-the-htaccess-file. You'll have to check what the outgoing IPs are going to be, hopefully they're static at your company.

# ? Jul 20, 2014 04:13

fuf: Sep 12, 2004; haha

If someone clicks a link to, eg, an .mp4 file, is there any way to force their browser to download it like any other file rather than trying to stream it?

# ? Jul 20, 2014 11:29

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

fuf posted:

If someone clicks a link to, eg, an .mp4 file, is there any way to force their browser to download it like any other file rather than trying to stream it?

http://stackoverflow.com/questions/13513420/headers-used-to-download-file-php

# ? Jul 20, 2014 12:02

fuf: Sep 12, 2004; haha

Thanks, that put me on the right track

# ? Jul 20, 2014 12:08

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Or just use <a download href="foo">

# ? Jul 20, 2014 13:48

fuf: Sep 12, 2004; haha

nice, even better.

# ? Jul 20, 2014 13:55

The Dave: Sep 9, 2003

jackpot posted:

Thanks!

Say you're updating your portfolio site because you're looking for a new job (hypothetically speaking, of course ). Is there a way to block that site from being viewed by anyone on your office network? You wouldn't want to block anyone more than that, obviously - just the occasional curious coworkers who you'd rather not know about it (and obviously this doesn't stop anyone from just picking up their phone and going there, or looking me up at home - that's fine). I know I can use the htaccess file to block a specific IP, but can I block a range of IPs that would represent my company network? Or am I just showing how little I know about all this?

If you're really worried and there's no benefit to people finding your site organically, I'd suggest just password protecting it and including the credentials on your resume / where ever you share it.

# ? Jul 20, 2014 14:33

spacebard: Jan 1, 2007; Football~

Suspicious Dish posted:

Or just use <a download href="foo">

IE11 and Safari don't support this yet so the only sure fire way is to some server-side handling. I ran into this making an app to play videos and offer a download link.

I think what I'm going to do is add an endpoint to my Restful service that delivers the file as a download for IE and Safari.

# ? Jul 20, 2014 17:03

lunar detritus: May 6, 2009

The Dave posted:

If you're really worried and there's no benefit to people finding your site organically, I'd suggest just password protecting it and including the credentials on your resume / where ever you share it.

I also suggest this. It's what I've been doing and have had no problems so far.

# ? Jul 20, 2014 17:24

Van Kraken: Feb 13, 2012

Is this the thread to ask Chrome extension development questions, or should that go in the Javascript thread?

# ? Jul 21, 2014 03:51

Webbeh: Dec 13, 2003; IF THIS IS A 'LOST' THREAD I'M PROBABLY WHINING ABOUT
STABBEY THE MEANY

Tom Gorman posted:

I do too. The debate stemmed from the other guy on the team who isn't on the project anymore being positively adamant about using Drupal. He knew as much about using it at the time as I did, his argument boiled down to Drupal is for pros and WP is for babies so we should learn it. My argument was that we don't have the time to waste going from beginners > pros right now and should use the system we know how to work with.

That's what I've got to do, with a third of my time at meetings and another third on the School. The new fiscal year started 18 days ago and they created two brand new six figure positions for Internal Communications Directors to push some corporate culture nonsense. Sure would've liked a designer at the very least.

This would be pretty easy to do with Drupal with very few 3rd party modules.

quote:

Drupal may not be a realistic option. I've only ever designed and built one Drupal theme from scratch and it was garbage. I've never developed a module. The selection of suitable themes isn't as great as what I've scouted for WP. I wouldn't be able to troubleshoot errors well. I have no clue how I would build the Find a Doctor feature. My users are almost entirely tech illiterate 70 year olds and administrative assistants. Drupal would almost certainly confuse the poo poo out of them. I love Drush though. I feel like Drupal would be a safer option. Nobody touches the Drupal sites I've done, but my WP sites are a bitch to fight off attacks and keep up to date. There would be no patient sensitive info on the site, it's goal is marketing and helping patients find providers. Server does not need to have HIPAA compliant levels of security.

I've made about a dozen WP themes, some great, some not so great. I'd still buy one and modify it, because I'm running out of time even though I just started. I think the users would actually be able to use WP. This is basically exactly what I need for Find a Doctor, except with people and profiles sorting by department. If I went this route, I could probably have the ball rolling within a week. I'm 10x more comfortable in WP but I don't know how appropriate it is to use that for this kind of project.

For themes, I'd first use a starter theme like Zen and develop a subtheme from there (like a child theme in Wordpress). Zen is the de facto starter theme for Drupal beginners.

Secondly, I don't think you would need to develop a module at all for this project. What you're looking for is a content type (or profile fields) with the various information on every doctor, a View with exposed filters to sort and navigate through the listing, and probably some small modules to add deep integrations to the metadata to each profile.

If you could wrap your mind around Drupal's quirks, this could be a project that, except for the theming section, would take under an hour to set up with dummy data.

# ? Jul 21, 2014 12:31

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

Came across this link while catching up on Sidebar.io, and it has a lot of very good things people who are into or want to learn about design to read: http://blog.invisionapp.com/reading-list-for-designers/

# ? Jul 21, 2014 14:52

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

I'm looking to do a little interactivity inside a page. Given a list of items, I'd like to display the 'available' and 'selected' items side by side. This stackexchange post gives the general idea, except that I don't necessarily plan to implement the text search. I'd like each item on the left to have a little arrow button which can be used to move it to the 'Selected' list, and I'd like the little 'x' boxes on the right hand side to remove them (and put them back in the 'Available' list).

The context here is an ASP.NET webforms page styled with Bootstrap. What I'd like is for the add/remove methods to trigger code-behind events so that I can modify the actual objects being represented, but I'd like the movement on the page itself to be done client side rather than requesting a new page for each move. I'm assuming that I probably want to go jQuery for the page interactivity, but I'm not sure whether the buttons that jQuery creates will be able to trigger code-behind events. Can someone confirm / deny / point me in a better direction?

One idea might be to have both lists there in full (as far as the WebForm is concerned) and use the javascript to hide/reveal them as necessary?

# ? Jul 21, 2014 17:44

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

Newf posted:

I'm looking to do a little interactivity inside a page. Given a list of items, I'd like to display the 'available' and 'selected' items side by side. This stackexchange post gives the general idea, except that I don't necessarily plan to implement the text search. I'd like each item on the left to have a little arrow button which can be used to move it to the 'Selected' list, and I'd like the little 'x' boxes on the right hand side to remove them (and put them back in the 'Available' list).

The context here is an ASP.NET webforms page styled with Bootstrap. What I'd like is for the add/remove methods to trigger code-behind events so that I can modify the actual objects being represented, but I'd like the movement on the page itself to be done client side rather than requesting a new page for each move. I'm assuming that I probably want to go jQuery for the page interactivity, but I'm not sure whether the buttons that jQuery creates will be able to trigger code-behind events. Can someone confirm / deny / point me in a better direction?

One idea might be to have both lists there in full (as far as the WebForm is concerned) and use the javascript to hide/reveal them as necessary?

There are a billion ways to handle this, so the best answer I can give you is "it depends". You certainly can do this just with jQuery, and if all you are updating is the "which list" property, you can do it pretty simply. If the only action for each list item, is moving it to the other list, from a UI perspective, have the whole item be the button, and you can not worry about the button / widgets handling clicks. You can then just toggle a class on the item based on which side it's on, and use :after to have a different widget in there. Or even use the ID of the list they are in for that, and skip classes altogether. (it depends!)

A jQuery way of doing this would be something along the lines of:

HTML code:

<h5>Active Things</h5>
<ul id="active" class="itemList">
  <li data-item-id="sadfa">Thing</li>
  <li data-item-id="casdf">Another Thing</li>
</ul>

<h5>Inactive Things</h5>
<ul id="inactive" class="itemList">
   <li data-item-id="htgaet" class="inactive">I'm not active</li>
</ul>

And then

JavaScript code:

$(function () {
    var active_list = $('#active');
    var inactive_list = $('#inactive');
   $('.itemList').on('click', 'li', function (e) {
       // do something with the item-id data to update
       // your model and send AJAX or whatever you need to do!
       var _el = $(this).detach();
       if (_el.hasClass('inactive')) {
           active_list.append(_el);
       } else {
           inactive_list.append(_el);
       }
       _el.toggleClass('inactive');
   });
});

Here's a Fiddle: http://jsfiddle.net/KrtrR/

# ? Jul 21, 2014 18:29

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

Lumpy posted:

Huge Help

Haha, you're a beast! Thanks so much. I've never written a line of jQuery and really have only a surface level understanding of css and dom-manipulation. This has saved me a boatload of time. I owe you a coke.

# ? Jul 21, 2014 18:52

Pollyanna: Mar 5, 2005; Milk's on them.

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.

# ? Jul 22, 2014 15:57

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

Pollyanna: Mar 5, 2005; Milk's on them.

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!

# ? Jul 22, 2014 16:44

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

Pollyanna: Mar 5, 2005; Milk's on them.

Heskie posted:

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?

That does more or less cover my needs, but the problem is that the bottom of the image gets cut off once it starts sizing up. Meaning, the height of the div doesn't change, but the image still expands. I need the div of the height to change as well, hence why I wanted to keep a div to a certain aspect ratio.

Which involves some sort of padding hackery which makes it look ugly in Foundation. For now, I'll keep it cut off, though. Thanks!

# ? Jul 22, 2014 16:53

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

Speaking of SASS, you know what's great, that I somehow only just recently discovered?

background: rgba($red, 0.85);

Where $red equals #d31245, which in rgb is 211 18 69, which I have loving hated having to look up every time in Photoshop until now. God, the variables alone are worth the price of admission, but doing dumbshit calculations like that is icing on the cake.

# ? Jul 23, 2014 15:30

Adbot: ADBOT LOVES YOU

# ? May 9, 2024 10:31

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

Gonna throw another one out there, just for fun. It's nothing anyone else can't figure out, but if you're new to it you might not be using it yet:

$eeny: 37.50em; //600px
$meeny: 43.750em; //700px
$miny: 50.000em; //800px
$mo: 56.250em; //900px
etc, etc.

Then:

$eenymin: "only screen and (min-width:" #{$eeny} ")";
$meenymin: "only screen and (min-width:" #{$meeny} ")";

and

$eenymax: "only screen and (max-width:" #{$eeny} ")";
$meenymax: "only screen and (max-width:" #{$meeny} ")";

So that then, to build your media queries all you have to do is:

@media #{$minymin} {

}

I'm sure there's smarter ways to do that, and depending on how you usually have to structure your queries you might want to build it differently (like leaving the "only screen and" out of your variable), but it's a start.

It's gotten to the point where if I fire up an old project and see it's not sass, I'm like "gently caress, I hate this."

# ? Jul 23, 2014 15:42

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

«‹›361 »