|
huhu posted:Could I please get some help on making this image aligned vertically, and responsive? It also gets squished in the vertical if I reduce the window size. I've been trying for an hour now and I feel like there's some simple fix I'm missing. Taking the height and width attributes off of the img tag should fix the vertical squishing problem.
|
#
?
Sep 1, 2015 21:30
|
|
|
|
| # ? May 12, 2024 08:41 |
|
|
huhu posted:Could I please get some help on making this image aligned vertically, and responsive? It also gets squished in the vertical if I reduce the window size. I've been trying for an hour now and I feel like there's some simple fix I'm missing. Thanks to your image map (I forgot those were even a thing!) you have HEIGHT and WIDTH set on your IMG tag. You have lots of crazy max and min width rules for IMG tags in a bunch of places. You have lots and lots of other conflicting stuff going on as well. All this is causing your woes. To do a full width "responsive" image: code:
|
|
#
?
Sep 1, 2015 21:35
|
|
|
How would I go about keeping the image from going off the page?
|
|
#
?
Sep 1, 2015 22:24
|
|
|
huhu posted:How would I go about keeping the image from going off the page? Don't do it with one big image. If you want the image to maintain its correct ratio and still fill up 100% of the browser height and width, you are attempting to achieve the impossible.
|
|
#
?
Sep 1, 2015 22:45
|
|
|
kedo posted:Don't do it with one big image. If you want the image to maintain its correct ratio and still fill up 100% of the browser height and width, you are attempting to achieve the impossible.
|
|
#
?
Sep 1, 2015 23:07
|
|
|
I'm on mobile so cant view source to verify what youre asking for, but you just reminded me of the very awesome vw, vh, vmin, vmax units: https://css-tricks.com/viewport-sized-typography/ Those might help achieve what you want because they go off of the size of the viewport. 100vw = 100% viewport width vh = same w/ height vmin and vmax check both width and height a quick google only led to font size based articles on css tricks, but i swear I've seen them used to great effect with widths and heights and such e: apologies if this is irrelevant to your question :]
|
|
#
?
Sep 1, 2015 23:35
|
|
|
huhu posted:I want it inside the window, aligned vertically and horizontally. I don't want it filling up 100% in both directions. http://jsfiddle.net/hysbs5r2/ Something like that'll work. The image go outside the window unless you use some really weird size, in which case you can add some responsive styles – I didn't add any but gave you a head start with a media query. You could also favor width over height for image sizing if you'd prefer, where you would set a max-width and leave height set to auto, but that's really a matter of preference. For educational purposes: code:
|
|
#
?
Sep 2, 2015 00:25
|
|
|
huhu posted:How would I go about keeping the image from going off the page? Make it a background and use background-size: contain; and it will as big as it can be w/o any cropping. See the MDN example page for an example: http://whereswalden.com/files/mozilla/background-size/page-contain.html EDIT: you can use background positioning to center it in both directions as well. That said, think very deeply about *why* you are doing what you are doing as it relates to user experience. Lumpy fucked around with this message at 00:29 on Sep 2, 2015 |
|
#
?
Sep 2, 2015 00:27
|
|
|
Also, make the inside of the green circle match up with the inside of the red gear b/c that poo poo is driving me crazy.
|
|
#
?
Sep 2, 2015 00:28
|
|
|
huhu posted:I want it inside the window, aligned vertically and horizontally. I don't want it filling up 100% in both directions. Here's as close as I can get you to what it is I think you want: https://jsfiddle.net/cmkcph3d/2/ .splash-img creates a second "layer" (absolute, 80%*100%) above all the other background stuff you've got going on. This will scale to the viewport. It text-align:center's the image, to align it in the middle with your background divider. .myImage uses max-width and max-height to ensure the image never goes larger than its container; .slash-img. Don't set an actual width or height, or this breaks. Now, the problem I couldn't solve was trying to get that line of text at the bottom of the viewport. You want to have the image as 100%, except for a ~12px line of text. I couldn't find a way to actually achieve that, so I cheated and made the .spash-img 80% height, so it leaves some space for that text. The bigger the viewport, the more retarded that looks. Fake edit: now with even more working links, by making them also absolutely positioned foreground/background elements. fwiw; splash screens are a bad idea. Making the user download a large image because it needs to look good at scale is a bad idea. kedo posted:Also, make the inside of the green circle match up with the inside of the red gear b/c that poo poo is driving me crazy. v1nce fucked around with this message at 00:44 on Sep 2, 2015 |
|
#
?
Sep 2, 2015 00:41
|
|
|
v1nce posted:But the red-on-grey is fine? It makes me nostalgic for early 2000s gaming site web design.
|
|
#
?
Sep 2, 2015 03:37
|
|
|
wrong thread. oops.
|
|
#
?
Sep 2, 2015 20:13
|
|
|
v1nce posted:fwiw; splash screens are a bad idea. Making the user download a large image because it needs to look good at scale is a bad idea.
|
|
#
?
Sep 3, 2015 21:15
|
|
|
A project I've been working on was intended to become a SaaS product, and as such the current product is capable of supporting multiple companies within a single instance. Unfortunately, my boss has decided this product will also be a candidate for in-house instances (if customers want to run things on their own hardware). Now I have to figure out how to maintain a codebase that will (almost definitely) include customizations specific to individual clients. How should I handle this situation? Am I going to need to fork my current codebase per company and deal with merging changes in to the forks from the master? The current product is capable of being run as a standalone instance, but I'm just not sure how to handle versioning for customizations to individual deployments in the context of a central codebase from which every instance descends. Edit: You know what, can anyone recommend a good intro/tutorial to proper versioning? All of my repos to date have been straight lines because I've been working solo and I've never had to deal with merging anything in 
IAmKale fucked around with this message at 21:39 on Sep 3, 2015 |
|
#
?
Sep 3, 2015 21:30
|
|
|
huhu posted:The image is also only 68kb... that's not considered big, right? It's still not brilliant because things like retina displays need 2x the resolution you're supplying with the current image, or they tend to look fuzzy. huhu posted:How else should I link to two separate portfolios and WordPress installations? Splash screens are accepted as a generally bad idea because they hide your real content behind a "gateway" page that serves no purpose other than navigation. That's lovely, because the site should have its own navigation anyway. It's also crap for SEO as your landing page is usually better ranked, and if it has no actual content it's going to get poo poo on by google, and the result will look like complete arse. Once you're off the splash page, how do you get to the other portfolio? How do you know it even exists? If you have to go back through the splash page, your navigation is failing your visitors. Why only two sites? Are these the only aspects of your life? What about a blog? What about programming? Let's pretend I haven't seen your site and I'm doing this from scratch. For whatever reason (theme?) you want to divide up the aspects of your interests into several different wordpress instances, but in reality they form a whole, which is you. Your domain, travisbumgarner.com, is a link to you. I'd park each wordpress instance in its own subdomain, like photography.travisbumgarner.com, engineering.travisbumgarner.com. Each site would have its own navigation, and either as part of that navigation, or as a nav bar at the top of the site, I would provide links to each of the other portfolio sites in your domain, making navigation between them far, far easier. "Oh this engineer applicant does photography? programming? I wonder what sort of thing.. has has a blog? marvellous!" If this is a portfolio, who is your target audience? Prospective photography client? Prospective engineering employer? If you direct them to the homepage, you don't know, so you want the homepage to cater for everyone. A splash page caters for neither, and requires the user to specify exactly what they're interested in. It's a wasted page. Also people generally don't give a poo poo about you. As an employer I won't get to really know you until several weeks into the job, but what I immediately care about when I google you, or I visit the site in your resume, is what you can do for me, and what your opinions are. If you blog, I can get a feel for the kind of things you've worked on, and your contributions back to the knowledge-base of the internet. For the homepage (domain root), I would actually recommend a blog that ties it all together. Don't want to blog? Well ok, this is a portfolio right? Have a page that's about what you can do, rather than about yourself. From the homepage, link through to the individual sites giving more detail on each aspect of your interests. Those pages can have their own "About" if you want to wax lyrical about your individual experiences and love for abstract expressionism observed in the stresses of dynamic loading or whatever. Make the homepage clean, but give the visitor a reason to stay. A reason to look deeper. A snazzy menu that makes people go "ooh, nifty" can really help gather interest. Here's a bullshit example of a menu idea that could be cool in D3.js I whipped up in 5 minuites. If maybe it didn't look like poo poo, and actually worked like a menu, people might be attracted to its floaty, bouncy nature. Karthe posted:Edit: You know what, can anyone recommend a good intro/tutorial to proper versioning? All of my repos to date have been straight lines because I've been working solo and I've never had to deal with merging anything in To address your other point; don't branch code/repo to handle client requirements. Make one piece of software that does everything. If you have separate code for each client, each little snowflake is going to be a unique maintenance nightmare. Anything client-specific should be managed by configuration. If you have to attach features willy-nilly, learn to use something like an event-based system to plug-in features. \/\/\/\/\/\/ Nope. v1nce fucked around with this message at 05:00 on Sep 4, 2015 |
|
#
?
Sep 4, 2015 01:31
|
|
|
Years ago, subdomains were bad for SEO. Not true anymore?
|
|
#
?
Sep 4, 2015 02:27
|
|
|
Thanks for the awesome help v1nce. I'm going to leave it as a splash page for now since I'm traveling and don't have a lot of time but when I get a chance I'll put some more work into the home page and getting rid of the splash screen.
|
|
#
?
Sep 7, 2015 16:49
|
|
|
I'm desperately looking to change jobs. Can anyone share some useful resources to help with resumes/CVs? I'm interested in anything - advice, examples, guidelines, best practices and so on.
|
|
#
?
Sep 8, 2015 12:22
|
|
|
neurotech posted:I'm desperately looking to change jobs. Can anyone share some useful resources to help with resumes/CVs? I'm interested in anything - advice, examples, guidelines, best practices and so on. I think the OP for the Newbie Programming thread has some stuff in there, it def. has some sample resumes that I've read over and over to make mine. Also check out this http://www.careercup.com/resume Follow the advice, read the other good resumes, maybe post it in here for critique, and don't worry too much about it past that I would say.
|
|
#
?
Sep 8, 2015 13:52
|
|
|
Can someone tell me where I hosed this up? The first bq is fine, but subsequent show a single. All tags are closed appropriately.code:
|
|
#
?
Sep 8, 2015 15:52
|
|
|
blockquote { quotes: "“" "”"; background: #fff; border-left: 5px solid #ccc; margin: 1.5em 5px; padding: 0.5em 5px; }
|
|
#
?
Sep 8, 2015 16:10
|
|
|
neurotech posted:I'm desperately looking to change jobs. Can anyone share some useful resources to help with resumes/CVs? I'm interested in anything - advice, examples, guidelines, best practices and so on. What kind of job are you trying to get?
|
|
#
?
Sep 8, 2015 16:17
|
|
|
kedo posted:What kind of job are you trying to get? Anything where I can work with JS (node specifically) and also be able to do front end design if I can swing it. I'm not sure what that means with regards to what you call a job like that, but there you go. I'm in Sydney, Australia if that's relevant.
|
|
#
?
Sep 9, 2015 02:30
|
|
|
neurotech posted:Anything where I can work with JS (node specifically) and also be able to do front end design if I can swing it. I'm not sure what that means with regards to what you call a job like that, but there you go. What kind of experience do you have with web development?
|
|
#
?
Sep 9, 2015 08:16
|
|
|
The Wizard of Poz posted:What kind of experience do you have with web development? For the past 7 years I've been working at a high school, where the latter 3 years of my time there was spent writing a lot of SQL queries for a DB2 database and building OpenOffice templates to render the data that came from said queries. Since I started this work, I have always checked everything I've done into a GitHub repo. While this is valuable knowledge and started me thinking about programming in a serious way, it wasn't scratching the creative itch that I had. After a few years of working with DB2 and OpenOffice, I was soon driven to want to do web development in my own time. This lead me to have a false start learning Ruby, then running at it again and learning JS, specifically writing node.js modules and applications. Since then I've published two modules on npm (node-edumate and canvas-api) and written a HTTP-based API for Edumate (a school administration system) to enable the high school that I'm currently employed at to work with the data in that system that was previously locked away behind a less that satisfying front-end. I've also written a node application that takes data from Edumate and POSTs it to a Canvas (learning management system) install to enable synching of students, staff, courses, enrolments, etc. I'm at the point now where I want to move on and work somewhere that I can focus on this kind of work exclusively, rather than having to squeeze it in after hours and on weekends. Before I can posture myself to make a move, I need to dust off my resume and turn it into something that communicates all of this in a memorable way.
|
|
#
?
Sep 9, 2015 09:42
|
|
|
Can I get a lil insight on CSS selector efficiency? With SCSS nesting it's super tempting to not use any IDs or classes so the html stays really clean. Like if I wanted to select: code:code:code:code:code:Is there some threshold beyond which nesting becomes prohibitively inefficient? fuf fucked around with this message at 16:12 on Sep 9, 2015 |
|
#
?
Sep 9, 2015 16:10
|
|
|
fuf posted:Can I get a lil insight on CSS selector efficiency? With SCSS nesting it's super tempting to not use any IDs or classes so the html stays really clean. Nesting is worse than not nesting... but you probably don't need to care too much about it. Class rules are faster than tag rules ( the "best to worst" list in order: IDs, classes, tags, universal (*)) so giving them a class is "preferred". Again, you may not / probably don't need to worry about it. Use page speed: https://developers.google.com/speed/pagespeed/insights/ or some other tool to see what's slow, and optimize if you need to, not before. The *real* reason to avoid nesting is because it makes your code a mess and makes things hard to reuse. Why do links inside a DIV inside a HEADER need to be styled differently than other links? What if you want to also use that style on links inside a P inside a HEADER. Now you have to write another long selector chain. Just use classes. Lumpy fucked around with this message at 16:57 on Sep 9, 2015 |
|
#
?
Sep 9, 2015 16:54
|
|
|
What's a good way to "capture" a static copy of a generated Angular page? I need to submit some markup for a Chromium bug I found but unfortunately I discovered it while developing an internal SPA. Ideally I'd just make an account for them to log in with but I only want Chromium admins to know the credentials and I don't really think bugtrackers are designed for that. I'm hoping it's possible to take a moment-in-time snapshot of the page and send it to them so they can experiment with the markup.
IAmKale fucked around with this message at 17:57 on Sep 9, 2015 |
|
#
?
Sep 9, 2015 17:46
|
|
|
Lumpy posted:Nesting is worse than not nesting... but you probably don't need to care too much about it. Class rules are faster than tag rules ( the "best to worst" list in order: IDs, classes, tags, universal (*)) so giving them a class is "preferred". Again, you may not / probably don't need to worry about it. Use page speed: https://developers.google.com/speed/pagespeed/insights/ or some other tool to see what's slow, and optimize if you need to, not before. Thanks, that's reassuring. Lumpy posted:The *real* reason to avoid nesting is because it makes your code a mess and makes things hard to reuse. Why do links inside a DIV inside a HEADER need to be styled differently than other links? What if you want to also use that style on links inside a P inside a HEADER. Now you have to write another long selector chain. Just use classes. That makes sense. Isn't this the problem mixins are supposed to solve though? Basically I just want to built a site without any IDs or classes in the html because I think it would look badass haha 
|
|
#
?
Sep 9, 2015 17:57
|
|
|
Karthe posted:What's a good way to "capture" a static copy of a generated Angular page? I need to submit some markup for a Chromium bug I found but unfortunately I discovered it while developing an internal SPA. Ideally I'd just make an account for them to log in with but I only want Chromium admins to know the credentials and I don't really think bugtrackers are designed for that. I'm hoping it's possible to take a moment-in-time snapshot of the page and send it to them so they can experiment with the markup. A headless web browser like phantomjs would do it. With angular or another front end framework, you need to make sure the page has completely loaded. There's a simple phantom crawler that should work for a spa: webcrawler.js . There is a node package for it now called js-crawler but I haven't used that. grunt-crawl seems to support angular but requires an attribute on the body element.
|
|
#
?
Sep 9, 2015 18:42
|
|
|
Karthe posted:What's a good way to "capture" a static copy of a generated Angular page? I need to submit some markup for a Chromium bug I found but unfortunately I discovered it while developing an internal SPA. Ideally I'd just make an account for them to log in with but I only want Chromium admins to know the credentials and I don't really think bugtrackers are designed for that. I'm hoping it's possible to take a moment-in-time snapshot of the page and send it to them so they can experiment with the markup. If you just save the page in Chrome it should contain any generated HTML.
|
|
#
?
Sep 9, 2015 19:11
|
|
|
Munkeymon posted:If you just save the page in Chrome it should contain any generated HTML.
|
|
#
?
Sep 9, 2015 19:29
|
|
|
Lumpy posted:The *real* reason to avoid nesting is because it makes your code a mess and makes things hard to reuse. Why do links inside a DIV inside a HEADER need to be styled differently than other links? What if you want to also use that style on links inside a P inside a HEADER. Now you have to write another long selector chain. Just use classes. Conversely, when you declare that links inside DIVs inside HEADERs are blue, you're stating that all links inside DIVs inside HEADERS should be blue. And that's probably not what you intended. The goal is to think hard about your intent. If you just want that specific link to be blue, targeting it via its HTML context doesn't make sense.
|
|
#
?
Sep 9, 2015 20:18
|
|
|
fuf posted:Can I get a lil insight on CSS selector efficiency? With SCSS nesting it's super tempting to not use any IDs or classes so the html stays really clean. Selecting on elements is not really a good idea, because if the markup needs to change, so does the CSS. Whereas, selecting on classes seperates things and makes it reusable. Second problem with your selecting of elements is that it's very specific - you want to try and select as generically as you can so that you have the ability to be more specific in the future, with minimal selectors. If you select deeply, you find yourself running into all kinds of trouble with !importants when you come to maintain it a year later. Classes again help solve this problem. Thirdly, lots of nesting inside SCSS quickly makes things complicated and hard to parse, IMO. I use nesting sparingly, and take advantage of the better side of SCSS like variables and mixins. Things get even MORE out of control if you aren't using classes to target stuff.
|
|
#
?
Sep 9, 2015 20:50
|
|
|
CSS selectors are resolved right to left, so the specificity of your right-most selector is critical to the overall efficiency of your CSS. Deliberately using a tag selector just so you don't have to use classes/IDs in your HTML is incredibly stupid for this reason and many many others. I just can't even fathom why you want to do this.fuf posted:Basically I just want to built a site without any IDs or classes in the html because I think it would look badass haha It would look like you don't know what you're doing. putin is a cunt fucked around with this message at 07:49 on Sep 11, 2015 |
|
#
?
Sep 11, 2015 07:46
|
|
|
I have done that and it loving sucks. Use more classes, not less. Read SMACSS if you wanna learn how to take advantage of classes and IDs in an efficient manner.
|
|
#
?
Sep 11, 2015 14:26
|
|
|
I'm having trouble getting a responsive site to work on a mobile app. If I resize the browser, it looks responsive. But if I load it up on a mobile page, its zoomed out. And I triple checked that I have this tag:code:EDIT - looking at the source in chrome im not NOT seeing that tag.. I wonder if the JS is removing it for some reason, I'm going to look at that. FateFree fucked around with this message at 14:57 on Sep 11, 2015 |
|
#
?
Sep 11, 2015 14:52
|
|
|
code:e: Hint, it's not your viewport.
|
|
#
?
Sep 11, 2015 14:57
|
|
|
Is that something due to domain forwarding in a URL? Edit - yes I see. Thats what I get for using Inspect Element instead of view source. I'll have to transfer the DNS to my host instead of the URL forward. Thanks guys FateFree fucked around with this message at 15:12 on Sep 11, 2015 |
|
#
?
Sep 11, 2015 15:00
|
|
|
|
| # ? May 12, 2024 08:41 |
|
|
FateFree posted:Is that something due to domain forwarding in a URL? Hint:   Yes, your "domain forwarding" is just sticking your entire site in a frame which is bad.
|
|
#
?
Sep 11, 2015 15:13
|
|