• Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.

Web Design and Development |OT| Pixel perfect is dead, long live responsive design

B

Blunoise

Member
Yeoman said:
Complete beginner question here, but as someone that hasn't done a huge amount of web design, what's the best way to centre 3 divs on a page?
Basically this:
https://jsfiddle.net/a4e6wauh/
But with all three divs right in the middle of the page.
Click to expand...
Yea exactly what Haly said is correct. I had the same issue but make that 6 pics with text with 2 rows with 3 pis on each lol. I had to literally wrap a dub around each pic and float them both left while using a clear fix to align them horizontal. It literally took me a week to get it fml
 
K

Kinitari

Black Canada Mafia
Yeoman said:
Complete beginner question here, but as someone that hasn't done a huge amount of web design, what's the best way to centre 3 divs on a page?
Basically this:
https://jsfiddle.net/a4e6wauh/
But with all three divs right in the middle of the page.
Click to expand...

There are a few different ways - I generally would do this in flexbox - but the way you structure your HTML here isn't going to work well with flexbox - here's a mild change:

https://jsfiddle.net/ts6agke6/

A few things to note:

you use ids multiple times in your page, you want to avoid that and use classes for anything you will have multiples of.

With flexbox, the parent can dictate the layout of it's children - so in this case I told the parent of the boxes that all it's children need to be centered.

Finally with flexbox, you can also center align font really easy - so you can see the element class items also center their text vertically and horizontally.
 
Y

Yeoman

Member
Haly said:
Keep in mind flexbox has some bugs and issues (particularly with IE11). If you're self-learning, it doesn't hurt to look over the other techniques. If you have no need for cross browser compatability whatsoever, flexbox is great.
Click to expand...
Will do, thanks for the advice!

Kinitari said:
There are a few different ways - I generally would do this in flexbox - but the way you structure your HTML here isn't going to work well with flexbox - here's a mild change:

https://jsfiddle.net/ts6agke6/

A few things to note:

you use ids multiple times in your page, you want to avoid that and use classes for anything you will have multiples of.

With flexbox, the parent can dictate the layout of it's children - so in this case I told the parent of the boxes that all it's children need to be centered.

Finally with flexbox, you can also center align font really easy - so you can see the element class items also center their text vertically and horizontally.
Click to expand...
Thanks very much, I'll look further into this. The way I'm hoping to get working is that the boxes would drop down below each other as the page got narrower.

Blunoise said:
Yea exactly what Haly said is correct. I had the same issue but make that 6 pics with text with 2 rows with 3 pis on each lol. I had to literally wrap a dub around each pic and float them both left while using a clear fix to align them horizontal. It literally took me a week to get it fml
Click to expand...
I know I feel like a complete idiot but I'm surprised how "difficult" this is to do properly - at least for a beginner like me lol.
 
B

Blunoise

Member
Haha I'm in the same boat as you, I'm taking online classes. I sometimes think I'm dumb when I can't get something to work right, but when something finally clicks! I feel like the smartest person ever. I look back from when I first learn how to code and boy have I learned so much in such short time. I can't wait to have the portfolio to start applying to jobs and start my career!
 
K

Kinitari

Black Canada Mafia
Yeah, ya'll just need to keep at it. Shit is a constant battle, but it's really rewarding. That feeling of not knowing anything sort of goes away, but it turns into not knowing enough - and I'm not sure that ever goes away.
 
R

runningjoke

Member
Syphon Filter said:
by fluid you mean using mainly percentages right? right now I was using tables since it's an email that I was coding.
Click to expand...

Yes a 100% width layout. You only really need tables for outlook, and you can use special tags around your table definitions so only outlook uses your tables. So now you can wrap the mail in a div with style="width:100%;max-width:600px" and it'll be fluid without media queries.
 
AquaticSquirrel

AquaticSquirrel

Member
Ikuu said:
Add 'flex-wrap: wrap;' to #enclosure. Good video on Flexbox.
Click to expand...

My god....mind blown!

I mean I'm very new to CSS but I was getting the hang of the basics and learning Bootstrap as well but this is incredible. I had heard of flex boxes but never really looked into them. Thanks for posting, really great vid!
 
B

Blunoise

Member
I'm almost done with my updated fixes to project I sent on the last page. I'll send it again when I'm done to see if u guys think it has improved
 
T

The Albatross

Member
Suggestion:

Stop doing any work on emails.

There's a handful of times a year that I have to work on some email template, and it's the most painful web-related development ever.

Fucking desktop Outlook uses Microsoft Word as its email rendering engine.

Reading that hybrid approach it's just a great example of why email development sucks so hard.
"Use media queries"
... "Except for Gmail app where media queries don't work, so use max-width and min-width"
... ... "Except on Outlook which doesn't work so you need to use conditional statements to work around this"
... ... ... "Except in Outlook 2007 which will break with conditional statements, so add another conditional"
... ... ... ... "Except in iOS where you need a third embedded conditional."
... ... ... ... ... "Except in BonziBuddy Mail where 3 levels of conditionals crash your computer..."

It's just horrible and it'll never get better.

As web developers, we should conspire that if we have to work on ANY email templates ever that we all charge $800/hr, with a minimum of $12,000 for email development. It's the only way out.
 
R

runningjoke

Member
The Albatross said:
Suggestion:

Stop doing any work on emails.

There's a handful of times a year that I have to work on some email template, and it's the most painful web-related development ever.

Fucking desktop Outlook uses Microsoft Word as its email rendering engine.
Click to expand...

As does the Windows 10 mail app (including Mobile). Actually you don't know true email hell until you've had to make one pixel-perfect in Lotus Notes 6.5.

As web developers, we should conspire that if we have to work on ANY email templates ever that we all charge $800/hr, with a minimum of $12,000 for email development. It's the only way out.
Click to expand...
I work for an ESP so building emails is kinda all I did for a few years. Working on our own software now
 
W

WanderingWind

Mecklemore Is My Favorite Wrapper
Safari is the new Internet Explorer. Why does a float: right just center the SVG on the page? Because Apple is the devil, that's why.

EDIT: Please amend this to "Why is FF the only one rendering the float correctly?"
 
P

PetriP-TNT

Member
The Albatross said:
Suggestion:

Stop doing any work on emails.

There's a handful of times a year that I have to work on some email template, and it's the most painful web-related development ever.

Fucking desktop Outlook uses Microsoft Word as its email rendering engine.

Reading that hybrid approach it's just a great example of why email development sucks so hard.
"Use media queries"
... "Except for Gmail app where media queries don't work, so use max-width and min-width"
... ... "Except on Outlook which doesn't work so you need to use conditional statements to work around this"
... ... ... "Except in Outlook 2007 which will break with conditional statements, so add another conditional"
... ... ... ... "Except in iOS where you need a third embedded conditional."
... ... ... ... ... "Except in BonziBuddy Mail where 3 levels of conditionals crash your computer..."

It's just horrible and it'll never get better.

As web developers, we should conspire that if we have to work on ANY email templates ever that we all charge $800/hr, with a minimum of $12,000 for email development. It's the only way out.
Click to expand...

Last time I did email templates (few months ago) I did them with React and rendered them into static documents on server side. Debugging them was a pain in the ass still, but at least I didn't have to write them like it was 1998
 
F

ferr

Member
So working on a photo of the day type thing and I have sort of a title/description area at the bottom, overlaying the image. The descriptions are too long and can cover up too much of the image, so by default I want it hidden and for the user to optionally view the description. I originally went with hovering over the title area to have the description area slide up, which looks and feels great.

But I was thinking that this doesn't really follow Krug's philosophy of users shouldn't have to think / question how something works. How can a new user look at this widget and think "OK, if I hover over the title, it will display the rest of the description"? There isn't really a clean way to describe "hover here to view more".

So, for now I'm just adding a clickable chevron-up to the far-right of that area. Are there any good solutions for emphasizing that something is hoverable?
 
H

Haly

One day I realized that sadness is just another word for not enough coffee.
Whenever I see truncated captions to photos there's usually a "(show more)"/"View rest of post" element appended somewhere that extends the captions to show the full contents on click.

I would put it next to the title just as prompt, use a different color to highlight, but the whole blurb responds to hover so the user can quickly learn how it works.
 
K

KiKaL

Member
-edit nm Figured it out. Needed to make use of promises.

Working in ReactNative and pretty stumped on how to return the duration.

Basically, I need getDuration() to return duration but I can't figure out how.

Code: 
getDuration: function() {
        RNAudioPlayer.getDuration(
            (duration) => {
                return duration;
            });
    }

The Java method it's calling:

Code: 
@ReactMethod
    public void getDuration(Callback cb) {
        if (mp != null) {
            try {
                cb.invoke(mp.getDuration());
            } catch (IllegalViewOperationException e) {
                cb.invoke(e.getMessage());
            }
        }
    }

mp is a MediaPlayer object in Android.

If I switch the return to alert(duration) it has the correct data. I just don't know how to make pass the information so that getDuration() returns it.

Any ideas?
 
S

Syphon Filter

Member
runningjoke said:
Yes a 100% width layout. You only really need tables for outlook, and you can use special tags around your table definitions so only outlook uses your tables. So now you can wrap the mail in a div with style="width:100%;max-width:600px" and it'll be fluid without media queries.
Click to expand...

yea but i heard divs don't work well with emails? Also I use the zurb foundation templates.
 
J

jokkir

Member
Where and what's the best way to learn ReactJS? I need to learn it but this thing is just going over my head at the moment.
 
S

ShadiWulf

Member
kevm3 said:
Is it safe to use flexbox in production code?
Click to expand...

much like any relatively new feature, depends what browsers you have to support

http://caniuse.com/#feat=flexbox

I know people who use flexbox in production code, and it works most of the time. It's supported in IE10 and 11 and seems to work fine for basic things, flexbox does apparently have bugs in those browsers though. If you have to support IE9 or older flexbox probably isn't something you want to be using.
 
A

Afrocious

Member
anyone got any good guides for learning ruby to make applications? I'm a software engineer and I figure learning ruby would be fun.
 
S

smuf

Member
The Albatross said:
Suggestion:

Stop doing any work on emails.

There's a handful of times a year that I have to work on some email template, and it's the most painful web-related development ever.

Fucking desktop Outlook uses Microsoft Word as its email rendering engine.

Reading that hybrid approach it's just a great example of why email development sucks so hard.
"Use media queries"
... "Except for Gmail app where media queries don't work, so use max-width and min-width"
... ... "Except on Outlook which doesn't work so you need to use conditional statements to work around this"
... ... ... "Except in Outlook 2007 which will break with conditional statements, so add another conditional"
... ... ... ... "Except in iOS where you need a third embedded conditional."
... ... ... ... ... "Except in BonziBuddy Mail where 3 levels of conditionals crash your computer..."

It's just horrible and it'll never get better.

As web developers, we should conspire that if we have to work on ANY email templates ever that we all charge $800/hr, with a minimum of $12,000 for email development. It's the only way out.
Click to expand...

I don't ever bother making them responsive. I just use tables like it's 1997 and inline all my css properties through a Gulp plugin. Still a major PITA to get it to look right in most mailclients.
 
G

grmlin

Member
A question for the React and Redux using developers in here:

Anyone ever used redux-saga? redux action-creators tend to be really messy when building a real app with an API connected to it.
To this day I pretty much ignored the ES6 generator syntax but it looks really promising if you have to deal with a lot of async code.

Thanks!
 
Z

Zakalwe

Banned
I'm just starting out in web development. Took a Udemy course in HTML/CSS at the start of February, moving onto JS and JQuery now. My goal is to find work as a front-end developer.

I made a simple site to start with to act as a platform for my development that I'll update as I learn more.

I have two questions for webdesigngaf:

1. I built the site using almost pure CSS/HTML. I learnt how to code CSS grids, animate elements using transitions, etc... I made sure to code it all from the editor and not cut and paste anything so I know I'll remember it and actually know/understand the code. I've used a little JQuery to emulate hover on touch devices, but otherwise I wanted to make all the fancy stuff with CSS.

My question is, is this good practise or should I transition to making the same elements using JQuery or another language?

2. I've had some offers of work, basic stuff like Wordpress redesign and a couple of simple sites with very little back-end functionality. I can build them no problem, but I'm not sure what to charge. I've been asked what my rates are, but I have no idea.

Any advice on this?

-

Also comments/critiques on my build would be appreciated.

The site is here.

Thanks!
 
S

Syphon Filter

Member
runningjoke said:
Divs and CSS positioning doesn't work in Outlook, but thats why you wrap it in a table that only Outlook uses. Something like

Code: 
<!--[if mso]>
<table width="600" cellpadding="0" cellspacing="0" border="0"><tr><td>
<![endif]-->
Click to expand...

so divs is the best way to approach email coding? even over templates like zurb? just trying to make sure as I am new to it and the easiest way possible would be beneficial.
 
R

runningjoke

Member
Syphon Filter said:
so divs is the best way to approach email coding? even over templates like zurb? just trying to make sure as I am new to it and the easiest way possible would be beneficial.
Click to expand...

Divs are gaining popularity for email coding, not sure if I'd call it THE way yet. Also depends on your target audience. If everyone is using iOS I'd say go nuts, if everyone uses Outlook 2007 just slice your PSD with Photoshop and send the HTML it generates.
 
Zoe

Zoe

Member
What's the popular PDF library for C# these days? Been using the original iTextSharp, but it's probably time to move on.
 
N

Nelo Ice

Banned
Anyone happen to know to fix this styling error?. I'm working on expanding the angular app I learned how to build and I tried starting simple by adding form validation to another part of the app that needs it. In this case it's a directive.

The validation works fine though I should note it's not checking for an actual phone number input yet since I haven't learned that. So the phone input will validate once anything is typed in.

Anyway the styling on the button breaks when i submit an empty form and the last input field breaks when I try to add a number. For reference this is a restaurant waiting list app that alerts you when your table is ready. So this last input field is referring to party size.
t8Q9Ej2.jpg
 
W

WanderingWind

Mecklemore Is My Favorite Wrapper
I wanted to thank Daffy Duck for the book recommendation, but he got banned for suggesting somebody learn Python. A bit overboard, but what do I know?

On a separate note, is there a map making program? I make maps literally every month out of Google's API but now I need to be making static maps into SVGs. I know how to do all the stuff I need at this point, generating a web-friendly SVG, styling it, getting popovers to work...all the technical stuff.

But how the holy hell do I just make a map of say, the US? There has got to be a program out there that does that. Right?
 
S

Syphon Filter

Member
runningjoke said:
Divs are gaining popularity for email coding, not sure if I'd call it THE way yet. Also depends on your target audience. If everyone is using iOS I'd say go nuts, if everyone uses Outlook 2007 just slice your PSD with Photoshop and send the HTML it generates.
Click to expand...

I use litmus to test my emails so it's like 20-30 different clients and devices. In that case I just need a mix of techniques correct?
 
P

PetriP-TNT

Member
WanderingWind said:
I wanted to thank Daffy Duck for the book recommendation, but he got banned for suggesting somebody learn Python. A bit overboard, but what do I know?

On a separate note, is there a map making program? I make maps literally every month out of Google's API but now I need to be making static maps into SVGs. I know how to do all the stuff I need at this point, generating a web-friendly SVG, styling it, getting popovers to work...all the technical stuff.

But how the holy hell do I just make a map of say, the US? There has got to be a program out there that does that. Right?
Click to expand...

Depends on what you are looking for. In JavaScript side d3 is the go-to library for geographic data visualizations (https://github.com/mbostock/d3/wiki/Geo-Paths) and there's tons of libraries built on d3 to get a jumpstart on that (http://datamaps.github.io/).
 
W

WanderingWind

Mecklemore Is My Favorite Wrapper
PetriP-TNT said:
Depends on what you are looking for. In JavaScript side d3 is the go-to library for geographic data visualizations (https://github.com/mbostock/d3/wiki/Geo-Paths) and there's tons of libraries built on d3 to get a jumpstart on that (http://datamaps.github.io/).
Click to expand...

Do either of these make more than a basic, non-topographical, non-detailed map? I'm far from a graphic designer, so I'm hoping something can make something more detailed than just a basic one-colored outline. I can always embed something with leaflet or Google, but that constrained things like popovers.
 
L

Linkhero1

Member
Are there any good and easy to follow Angular JS tutorials online? My work started to use Angular and I have zero experience with it.
 
G

Griegite

still a junior
WanderingWind said:
I wanted to thank Daffy Duck for the book recommendation, but he got banned for suggesting somebody learn Python. A bit overboard, but what do I know?

On a separate note, is there a map making program? I make maps literally every month out of Google's API but now I need to be making static maps into SVGs. I know how to do all the stuff I need at this point, generating a web-friendly SVG, styling it, getting popovers to work...all the technical stuff.

But how the holy hell do I just make a map of say, the US? There has got to be a program out there that does that. Right?
Click to expand...

I don't know much about it right now but have you heard of Mapbox? It might be worth a shot, but you did mention leaflet in the next post so I'm not sure because the APIs are similiar. WebMapping seems to be the future for GIS so I'll be learning whatever I can of those while also attempting to learn Web Development.
 
T

The Albatross

Member
Linkhero1 said:
Are there any good and easy to follow Angular JS tutorials online? My work started to use Angular and I have zero experience with it.
Click to expand...

CodeSchool.com has two great Angular courses, Shaping Up with Angular and Staying Sharp with Angular:

https://www.codeschool.com/courses/shaping-up-with-angular-js

Code School is, IMO, the best of the interactive learn coding websites. It's normally $30/mo, but there's coupons all around for $15/mos and this weekend they're running a free weekend for all courses and materials.

The site is great. Don't be turned off by the lame musical intros, the courses are great and the challenges are much, much better than CodeAcademy.
 
S

Somnid

Member
Finally got to work on my first angular project and uh, wow.

Monolithic? Check.
DOM pollution? Check.
Special Syntax strings? Triple Check. Yet verbose? Also check.
Logic in templates? Check.
Easily confused dirty checks? Check.
Polyfills that don't match modern specs? Check.
Breaking updates? Check.
Functionality that breaks with minification? Check.
Internal use of eval? Check.
4 ways to do that same thing? Check.

Why do people like this again?
 
L

Linkhero1

Member
The Albatross said:
CodeSchool.com has two great Angular courses, Shaping Up with Angular and Staying Sharp with Angular:

https://www.codeschool.com/courses/shaping-up-with-angular-js

Code School is, IMO, the best of the interactive learn coding websites. It's normally $30/mo, but there's coupons all around for $15/mos and this weekend they're running a free weekend for all courses and materials.

The site is great. Don't be turned off by the lame musical intros, the courses are great and the challenges are much, much better than CodeAcademy.
Click to expand...

Nelo Ice said:
I learned angular via this course. It's pretty awesome. And full discretion it is my friend's course but I really did enjoy it and I'm still learning coding in general.
http://watchandcode.com/
Click to expand...

Thanks! I'll be sure to check both sources out. I think I stumbled upon Code School a while back but was turned off by the pricing at the time ha!
 
You must log in or register to reply here.

Similar threads

Do game developers still want to publish on Xbox? A survey of independents and small studios
39
3K
SNG32 replied
The State of Xbox Game Studios and Bethesda Softworks: A breakdown of all the Confirmed Projects, Leaks, and Rumors
Opinion News Rumor 2
84
11K
Ozriel replied
As translation technology improves, game localizations are getting worse
2
65
7K
Cyberpunkd replied
An Introduction To Japanese Adventure Games pt.1 - What They Are and The Different Types
Analysis
47
13K
SlimeGooGoo replied
GAFs big house of Linux |OT| for gamers, ricers, newbs and greybeards - because it's free as in freedom!
|OT| 2 3 4 5
201
17K
Bitmap Frogs replied
Top Bottom