|
Definitely go the prefixed class names route. Better chance you won't accidentally override things if it's a widget to be embedded elsewhere/a thing people are not supposed to touch, plus it way better conforms to best practices.
|
# ? Mar 5, 2014 00:45 |
|
|
# ? May 15, 2024 02:57 |
|
Can anyone give me an idea to make the menu look better on this website I'm building for a friend? Especially on the front page which is laid out exactly as the person wants it to look. It really blends into the picture of the woman. Also, any critiques would be good. The background grey is just filler for now until I find a background image. http://www.letusdoit.us/
|
# ? Mar 7, 2014 02:21 |
|
Here are a few things that caught my eye:
|
# ? Mar 7, 2014 03:14 |
|
Give the menu a different treatment than the rest of the text on the page. It looks like body copy. Ideas: make it bold, put some sort of divider between it and the content or place it in its own box. Also give all your text some space from the woman, that layout feels really claustrophobic. Might be worth considering doing more with the text than just plopping it on the page. No one is going to read all that. Break it out into short, snappy and targeted sections of ~10-20 words a piece and give each section its own design treatment. The lady standing there pointing at text feels lazy. (apologies in advance, this is not meant to be rude, critiques aren't always fun!) Give the user a call to action. After I read all this text, what do you want me to do? Don't make things that aren't links look like links. e: Less text everywhere, not just the homepage. If you're going to have that much, at least make it interesting. This isn't an information driven site like Wikipedia or something... you're selling a product so your pages need to visually sell the product. e2: Of course, this all assumes you have the time and budget. But considering you're doing it for a friend, somehow I doubt that. Fix your navigation at least. e3: Also add some sort of footer so people know they've reached the end of the page, potentially in the form of your call to action (ie. "Like what you see? Call us at ###-###-#### or email us at foo@example.com") kedo fucked around with this message at 03:31 on Mar 7, 2014 |
# ? Mar 7, 2014 03:16 |
|
Oh My Science posted:Here are a few things that caught my eye: Moving the nav to the top makes alot of sense. That will work well. I'll keep it below the header on the mobile version because that works better. Good call on the margin reset on mobile. The green on white is what they want, so that'll probably stay. They want that exact pantone colour. Maybe add a border to the text to differentiate it a little? kedo posted:(apologies in advance, this is not meant to be rude, critiques aren't always fun!) It's all good to me. I've spent the last bunch of years doing web apps, so anything I get back on actual page design is all good. kedo posted:Give the menu a different treatment than the rest of the text on the page. It looks like body copy. Ideas: make it bold, put some sort of divider between it and the content or place it in its own box. I bolded the menu, and moved it up - I think it works there better on the home page. I'll see what I can do to cut down on the wordiness. They wanted some photos so maybe I can put those in to kind of break up the sections. I'm worried photos are getting or are way out of date though. The woman will have to stay - at least on the home page. That's what they really want to use for their branding. The colouring of their name is because they want it to stand out. Should I maybe remove the colouring and just italicize it? I do really like the footer idea. I'll work that into it asap.
|
# ? Mar 7, 2014 14:26 |
|
Can we ask angularJS questions here? I had an issue where I have a ng-dialog modal box opening and its set button is disabled based on if there are any invalid ng-patterns in the modal. The issue is there are fields that show/hide based on what you select before you open the modal. So these fields might be hidden and ng-disabled, but they are still registering as being ng-invalid so they invalidate the whole form, disabling the "set" button. Hope this makes sense-- I'm a bit amateur so I appreciate any help I get.
|
# ? Mar 7, 2014 18:38 |
|
an skeleton posted:Can we ask angularJS questions here? I had an issue where I have a ng-dialog modal box opening and its set button is disabled based on if there are any invalid ng-patterns in the modal. The issue is there are fields that show/hide based on what you select before you open the modal. So these fields might be hidden and ng-disabled, but they are still registering as being ng-invalid so they invalidate the whole form, disabling the "set" button. Hope this makes sense-- I'm a bit amateur so I appreciate any help I get. I'm sure you could ask this here but this thread exists too and may be more helpful: http://forums.somethingawful.com/showthread.php?threadid=3571035
|
# ? Mar 7, 2014 20:43 |
|
an skeleton posted:Can we ask angularJS questions here? I had an issue where I have a ng-dialog modal box opening and its set button is disabled based on if there are any invalid ng-patterns in the modal. The issue is there are fields that show/hide based on what you select before you open the modal. So these fields might be hidden and ng-disabled, but they are still registering as being ng-invalid so they invalidate the whole form, disabling the "set" button. Hope this makes sense-- I'm a bit amateur so I appreciate any help I get. I don't think there's a built in way to do what you want. However, a quick google suggests it's a simple enough directive to build: http://stackoverflow.com/questions/21575051/implementing-a-directive-to-exclude-a-hidden-input-element-from-validation-add
|
# ? Mar 7, 2014 21:14 |
|
Edit: Got my Atom invite.
Robot Arms fucked around with this message at 07:19 on Mar 18, 2014 |
# ? Mar 7, 2014 22:01 |
|
an skeleton posted:Can we ask angularJS questions here? I had an issue where I have a ng-dialog modal box opening and its set button is disabled based on if there are any invalid ng-patterns in the modal. The issue is there are fields that show/hide based on what you select before you open the modal. So these fields might be hidden and ng-disabled, but they are still registering as being ng-invalid so they invalidate the whole form, disabling the "set" button. Hope this makes sense-- I'm a bit amateur so I appreciate any help I get. You may want to cross post this in the modern front-end thread. http://forums.somethingawful.com/showthread.php?threadid=3571035
|
# ? Mar 7, 2014 23:02 |
I need to create a contact form that visitors to my site can fill out and send emails to 1 email address. The site is hosted on AWS and I think I can do this through SES using PHP. I just need to be pointed in the right direction. Every form I'm finding online seems to have the user fill out a contact form but just generates an email after they press submit. I'd like it to just send an email to the specified email address after they press submit so that they don't see where it goes and they don't have to even have an email client. If I'm in the wrong spot please let me know. Thanks in advance. e: The site is written in in HTML and CSS. e2: am I going to need to use something like PHPMailer? Red Robin Hood fucked around with this message at 01:32 on Mar 8, 2014 |
|
# ? Mar 8, 2014 01:22 |
|
You could always use an external service for this. I believe http://www.wufoo.com/examples/#contactform was mentioned before, although there are others.
|
# ? Mar 8, 2014 01:39 |
|
samglover posted:I'd love an atom.io invite, if anyone has one to give. Email is sam@samglover.net Same here - I'd love one! email: pancakes@waffles.io
|
# ? Mar 8, 2014 02:53 |
|
Red Robin Hood posted:I need to create a contact form that visitors to my site can fill out and send emails to 1 email address. The site is hosted on AWS and I think I can do this through SES using PHP. Does AWS give you access to PHP? Generally what you'd do is set the form to POST data to another PHP page which would do verification and the mailing, and then redirect to a nicer landing page if all went well. The PHP code for sending mail is pretty simple if you just want straight up text.
|
# ? Mar 8, 2014 05:28 |
|
Red Robin Hood posted:I just need to be pointed in the right direction. Every form I'm finding online seems to have the user fill out a contact form but just generates an email after they press submit. I'd like it to just send an email to the specified email address after they press submit so that they don't see where it goes and they don't have to even have an email client. Unfortunately I can't find the reference I used to build the code I'm using for validation.
|
# ? Mar 9, 2014 23:03 |
|
Something random I was wondering about and I'm assuming this is the right thread to ask about it - I read that <p> and <ol> (and <ul>) are block level elements, and as such they appear in sequence in their container with some amount of gap between them. But sometimes when content includes a list it might be standalone, whereas sometimes it might be "affiliated to" a paragraph that came before or after, or both. So sometimes you have something likecode:
code:
NB. I have generally created pages as HTML 4.01 Transitional in the past, and will likely continue to do so absent some major impetus to use something else.
|
# ? Mar 10, 2014 00:42 |
|
Since you only want it sometimes rather than every time and you have existing margin/paddings on the <p>, I'd say your best bet is either a paragraph class like <p class="ultofollow"> removing the bottom margin/padding and then something like p.ultofollow+ul to remove the ul's upper margin/padding; or, a ul class with a negative top margin to fudge it by overlapping the blocks.
|
# ? Mar 10, 2014 02:46 |
|
Ghostlight posted:Since you only want it sometimes rather than every time and you have existing margin/paddings on the <p>, I'd say your best bet is either a paragraph class like <p class="ultofollow"> removing the bottom margin/padding and then something like p.ultofollow+ul to remove the ul's upper margin/padding; or, a ul class with a negative top margin to fudge it by overlapping the blocks. Alternately, when they are associated, wrap them in a semantic container, like a figure to relate them. The you have a rule for figure p + ul and don't have to worry about adding class names.
|
# ? Mar 10, 2014 04:10 |
|
Lumpy posted:Alternately, when they are associated, wrap them in a semantic container, like a figure to relate them. The you have a rule for figure p + ul and don't have to worry about adding class names. I see the importance of semantically (as well as visually) indicating that the associated items are related, but I read on different sites (here and here) that it is assumed of <figure> that it may be moved to a different location without affecting the integrity of the document. Let us suppose that I have a sequence of block elements. Some of them are paragraphs, and some of them are lists (<ul> or <ol>). The order of the elements is important, and it is important that they be presented in one place and in sequence. Two items adjacent in the list may be "related" or "unrelated", and they should have a gap between them when they are unrelated, but even when unrelated it is still important that they are adjacent and that they occur in that order ("unrelated" is being used in a relative sense). Paragraphs adjacent in the list are always unrelated. However a paragraph and a list that are adjacent may be related or unrelated. Let us assume that two lists (of whatever types) cannot be adjacent, though perhaps there might be nested sub-lists. It occurred to me while I was writing this that I might make the whole thing a list, in which the list items are precisely the subsequences (of the main sequence of block elements) (in the obviously inherited order) in which all adjacent elements are "related".
|
# ? Mar 10, 2014 17:34 |
|
Hammerite posted:I see the importance of semantically (as well as visually) indicating that the associated items are related, but I read on different sites (here and here) that it is assumed of <figure> that it may be moved to a different location without affecting the integrity of the document. Right; figure is probably not the best element, it was just the first "related things" tag that came to mind last night. You would likely use section for your use case. Or so you said, if the elements are actually part of a list, then what you suggest makes sense: Your related block elements are just children on the same LI then.
|
# ? Mar 10, 2014 17:45 |
|
Lumpy posted:Right; figure is probably not the best element, it was just the first "related things" tag that came to mind last night. You would likely use section for your use case. Or so you said, if the elements are actually part of a list, then what you suggest makes sense: Your related block elements are just children on the same LI then. They might not be what we would think of as naturally constituting a list (it would look silly if they were presented with bullet points, for example), but they are a sequence of things that have to occur together and in a set order, and in that sense they are a list. I would thus have to suppress any visual indication that they were (logically) a list. Would this be an abuse of the list element? Also, am I correct to assume that <ol> should always be used when order matters? i.e. if I would deem it wrong (for whatever reason) to change the order of the list items, then I should use <ol> instead of <ul>, even if I'm not presenting the items with labels, or I'm presenting them with non-sequential labels?
|
# ? Mar 10, 2014 17:59 |
|
Hammerite posted:They might not be what we would think of as naturally constituting a list (it would look silly if they were presented with bullet points, for example), but they are a sequence of things that have to occur together and in a set order, and in that sense they are a list. I would thus have to suppress any visual indication that they were (logically) a list. Would this be an abuse of the list element? <ol> is what you want for this task because by your description, that's exactly what it is. Changing the visual style is totally fine. It's good that you're thinking about this, but in all honesty you're giving this 1000% more thought than the vast majority of developers do. Most lists I see these days are all <dl> because whatever dev did the markup couldn't be assed to spend ten seconds thinking about and styling more than one type of list element. I have quite literally seen <dl class="ordered"> used on big, impressive projects to reproduce what would otherwise be a generic ordered list. But anyways, generally an <ol> should be used when order matters, <ul> when it doesn't. kedo fucked around with this message at 18:23 on Mar 10, 2014 |
# ? Mar 10, 2014 18:19 |
|
Does anyone have recent experience using self-hosted fonts from myfonts.com? I'm currently working on a project where load time is crucial, and Typekit occasionally slows things down to a crawl when their server (licensing server, I believe) is overloaded. I'm thinking that switching over to MyFonts, which allows self-hosting, is going to be our solution but I'm curious if there will be similar hangups. They license by and track page views so there must be some sort of tracking code. They don't go into detail about this on their site, of course.
|
# ? Mar 10, 2014 19:55 |
|
kedo posted:Does anyone have recent experience using self-hosted fonts from myfonts.com? The key is whether the font delivery is tied to that tracking. Typekit fronts with JavaScript that blocks the pageload, all to avoid the flash of unstyled text. Can't stand it personally, but it's the cheapest way to get webfonts. If you are self hosting then I imagine the license is simply you get the font files and deliver them yourself. In that case, you own the show. If they are adding a tracking code, you should just be able to put that in the footer to stop it blocking. Oh, also, typekit has an asynch embed that I haven't had a chance to work with yet http://blog.typekit.com/2012/07/19/new-improved-embed-code/ maybe that would do the trick? Maluco Marinero fucked around with this message at 08:54 on Mar 11, 2014 |
# ? Mar 11, 2014 08:48 |
|
Maluco Marinero posted:Typekit fronts with JavaScript that blocks the pageload, all to avoid the flash of unstyled text. Can't stand it personally, but it's the cheapest way to get webfonts. Yeah, the blocking of page load is hugely annoying. We implemented asynchronous loading to see how big of gains we could make and a six second page load jumped down to three. However then you either get FOUT or no text at all while it loads, which is lame. Sort of defeats the purpose when the page loads quickly but you can't actually do anything with it because all the text is invisible. Seems like we're going to need to just buy a small license from myfonts so we can see what they actually deliver/require.
|
# ? Mar 11, 2014 14:40 |
|
Have you played around with triggering a transition effect when assets like fonts load? It won't prevent FOUT, but it'll make it look a little less harsh.
|
# ? Mar 11, 2014 15:41 |
|
pipes! posted:Have you played around with triggering a transition effect when assets like fonts load? It won't prevent FOUT, but it'll make it look a little less harsh. Nope, but that's a good idea. Fading the text in would make it look a bit more intentional, at least.
|
# ? Mar 11, 2014 16:08 |
|
I was handed a site to fix where they have a slider on their front page that is displaying all the divs on page load but hides em and it's good from there. I have been trying a combination of CSS and jQuery to display: none it initially and .show in a document.ready setup. That doesn't seem to be working. It just stays hidden. Anyone know a good way around it? Ive tried "everything" I could via various searches on Google. It only shows em for a split second but it's enough to make the client not like it.
|
# ? Mar 11, 2014 19:44 |
|
Load them off screen with absolute positioning?
|
# ? Mar 11, 2014 20:07 |
|
Hmm, that is a good option. With further digging this is a jQuery UI module for their tabs. I'll try fiddling.
|
# ? Mar 11, 2014 20:10 |
|
Vintersorg posted:I was handed a site to fix where they have a slider on their front page that is displaying all the divs on page load but hides em and it's good from there. I have been trying a combination of CSS and jQuery to display: none it initially and .show in a document.ready setup. That doesn't seem to be working. It just stays hidden. If you're doing display: none in your CSS they shouldn't show up for a split second. Sounds like your javascript might be conflicting with your CSS. If you post your code or a link to the site it'd be easier to figure out what the problem is! Oh, and also look at your overflow setting. Most sliders I've seen will set it to hidden when they start running, so it's possible that all of your images are showing up because before the slider's JS executes there's a moment when it's set to the default of overflow: auto.
|
# ? Mar 11, 2014 20:25 |
|
Well the site itself is http://www.mfnpo.org/ As mentioned, when you load that up it's fine. But if you go to any of the tabs up top and click back home, you'll see the stacked divs loading up.
|
# ? Mar 11, 2014 20:33 |
|
Yeah, it's your JS. The non-active slides are getting the class ui-tabs-hide when the script starts, which hides them. When you go back you're reloading from cache, so you're seeing a flash of content because there's a split second before the document is ready and your JS executes. Try something like this? CSS code:
|
# ? Mar 11, 2014 21:06 |
|
Ah, ok wicked - that's something to go on. Thank you! I popped in that CSS and it worked on page load but switching tabs flashed em all. I'll keep fiddling.
|
# ? Mar 11, 2014 21:14 |
|
I'd like to remind everyone about a new Web Animations API peculating through development. It is generally about providing an enhanced timeline supporting integration of GPU (CSS-based) and CPU (Javascript-based) animations. There is what is called a "polyfill" implementation in Javascript for browsers without native support, basically it emulates native support but at some level of performance cost: https://github.com/web-animations/web-animations-js Chromium has native support currently in development, I'm watching commits for EffectCallback this week. I picked this up this weekend to implement a basic news ticker proof of concept, I need GPU acceleration because it's across 8 monitors and rather blows on CPU shoving out an effective 4K screen in software, however I also need CPU support for pulling in and processing new headlines asynchronously. The docs and specification aren't exactly overly useful but there are oodles of test cases for the polyfill which are useful. MrMoo fucked around with this message at 19:09 on Mar 17, 2014 |
# ? Mar 17, 2014 02:22 |
|
Anybody have any experience with Shopify? Specifically "line item properties"? Should I be scared? From a distance Shopify looked great; now that I'm actually using it I want to kill myself.
|
# ? Mar 17, 2014 16:18 |
|
jackpot posted:From a distance Shopify looked great; now that I'm actually using it I want to kill myself. This is of interest to me, can you expand? I'm currently looking into ecommerce platforms for an upcoming project and Shopify is at the top of my list. It'd be good to know if I'm setting myself up for a miserable experience.
|
# ? Mar 17, 2014 17:13 |
|
I've developed a few apps for it and I've set up a few stores in it, and it has been pretty painless / their support is always crazy helpful if you need a hand.
|
# ? Mar 17, 2014 17:30 |
|
You'll probably be fine, because it gets great reviews, but holy poo poo leave yourself time to gently caress around, just in case. Case in point: the shop I'm building sells signs. Each sign comes in a multitude of sizes, usually around 2 or 3. Each sign can have a choice of 30 background colors, and 30 text colors. Immediately, this is impossible with the default Shopify setup. Why? Because each product is allowed 100 "variants." A variant is every possible option for sale, so it's like this: Product A: Two sizes, 5x7, and 8x12 Two colors: Green and blue. That's four variants: 5x7 blue, 5x7 green, 8x12 blue, 8x12 green. Get it? So do the math on my average product: 3 sizes, 30 background colors, 30 text colors. That's 2,700 variants. What I've found out, though, is that there are add-ons you can buy (of course there are!) that'll help you get around this. The cheapest one runs $4 a month (I'm building this for a client - I gave them a very firm monthly price, I can't go changing it now). Orrrr...you can use a built in feature called "line item properties," which will let me do what I need to do, but which seems to be extremely complicated, and is100% not covered by the shopify support staff.
|
# ? Mar 17, 2014 17:35 |
|
|
# ? May 15, 2024 02:57 |
|
EAT THE EGGS RICOLA posted:I've developed a few apps for it and I've set up a few stores in it, and it has been pretty painless / their support is always crazy helpful if you need a hand.
|
# ? Mar 17, 2014 17:37 |