The Web Design & Development Megathread

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

«‹›361 »

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

SVGs can be slower to render than PNGs, especially on mobile, so keep that in mind. Otherwise, reminder that vector isn't a panacea. Be aware of the tradeoffs involved and you should be OK.

# ? May 16, 2014 16:15

Adbot: ADBOT LOVES YOU

# ? May 14, 2024 10:32

kedo: Nov 27, 2007

/\/\ That's a good read. Obvious, but a good summary nonetheless.

The only good reason not to use SVGs is because IE 8 doesn't support them. If you don't care about IE 8, then definitely use the SVG. They're way better in pretty much every way where logos are concerned imo.

# ? May 16, 2014 16:18

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

fullroundaction posted:

We're changing our (custom code, no framework PHP) web-based customer service software to let our users upload (and crop) a picture to be associated with their account. I know how to upload and link files, etc, but what's the easiest way to achieve a minimal level of control for the user to manipulate the image and then save it?

e: Not opposed to using a third party service if it comes to that.

https://www.google.com/search?q=jquery+php+crop+image&ie=utf-8&oe=utf-8&aq=t

# ? May 16, 2014 17:07

Literally Elvis: Oct 21, 2013

Suspicious Dish posted:

SVGs can be slower to render than PNGs, especially on mobile, so keep that in mind. Otherwise, reminder that vector isn't a panacea. Be aware of the tradeoffs involved and you should be OK.

Thanks for the read. I follow Kirill on Google+, I've never seen him mention SVG though.

kedo posted:

The only good reason not to use SVGs is because IE 8 doesn't support them. If you don't care about IE 8, then definitely use the SVG. They're way better in pretty much every way where logos are concerned imo.

lol IE8

# ? May 16, 2014 17:12

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

kedo posted:

The only good reason not to use SVGs is because IE 8 doesn't support them. If you don't care about IE 8, then definitely use the SVG. They're way better in pretty much every way where logos are concerned imo.

Make a VML version of the logo as well and serve that up for the IE8 peasants

# ? May 16, 2014 19:57

Literally Elvis: Oct 21, 2013

fletcher posted:

Make a VML version of the logo as well and serve that up for the IE8 peasants

they deserve nothing more than a heavily compressed .JPEG

# ? May 16, 2014 20:00

pipebomb: May 12, 2001; Dear God, what is it like in your funny little brains?
It must be so boring.

Jesus, never mind. I forgot how Goony some of you can be.

pipebomb fucked around with this message at 04:24 on May 17, 2014

# ? May 17, 2014 02:21

EAT THE EGGS RICOLA: May 29, 2008

i'm the dumb referral poo poo in a thread about web design and development

# ? May 17, 2014 03:14

MrMoo: Sep 14, 2000

Suspicious Dish posted:

SVGs can be slower to render than PNGs, especially on mobile, so keep that in mind.

SVGs are drawn in hardware on modern devices and are actually faster than PNG when the file size is smaller. Unfortunately for complex images SVGs can mushroom in size quite quickly.

Biggest problem is Firefox and MSIE are usually terrible at rendering sized SVGs. If you are targeting Chrome and Safari only then it is no problem, you can problem even use the new responsive image or picture tags to provide both.

# ? May 18, 2014 01:20

Mister Chief: Jun 6, 2011

Does anyone know how to force the scroll bars on IOS to stay visible? I have a horizontally scrollable element and the scroll bar only really appears once you start scrolling and it isn't immediately obvious you're able to do that on the element.

EDIT: Turns out they only work when -webkit-overflow-scrolling is set to auto. :thumbsup:

Mister Chief fucked around with this message at 13:52 on May 18, 2014

# ? May 18, 2014 13:07

Ravendas: Sep 29, 2001

Trying out that Ruby and Sinatra bit. I'm on Windows, and I found the Ruby 64bit version and installed it. Then used that gem sinatra command to get Sinatra.

Put the test 'hello world' code into a textpad document, saved it as .rb, and ran it. Used Firefox to connect to the localhost address, and it showed up. Yay!

Then I put the code Pokeyman kindly provided, did all the same, and it would run, but I couldn't connect to localhost. It just kept loading endlessly. The .exe it was running has a fileout bit in it, and it was creating the text document in the folder, so the executable it's linked to was running, I just couldn't view the 'website'.

It has this in the console, so it's running fine:

quote:

[2014-05-18 09:27:19] INFO WEBrick 1.3.1
[2014-05-18 09:27:19] INFO ruby 2.0.0 (2014-05-08) [x64-mingw32]
== Sinatra/1.4.5 has taken the stage on 4567 for development with backup from WE
Brick
[2014-05-18 09:27:19] INFO WEBrick::HTTPServer#start: pid=1220 port=4567

But it never gets that 'connected' lines that happen when I run Hello World or any other simple starter program.

And this is the code I was using, provided by Pokeymans on the previous page:

code:

require 'sinatra'

get '/' do
  output = IO.popen('../CCrap/RavsNameGenerator.exe').read
  [200, {'Content-Type' => 'text/plain'}, output]
end

It finds, and seemingly runs, the exe just fine, it just hangs on actually displaying it. With my zero knowledge of Ruby, reading the Ruby docs from the getgo is rather confusing in how it's all laid out. Sinatra docs, need Ruby knowledge that I don't have, is even more foreign. I'll be reading a ton about it, I'd just like this little thing to work for the moment.

# ? May 18, 2014 14:37

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

Ravendas posted:

Then I put the code Pokeyman kindly provided, did all the same, and it would run, but I couldn't connect to localhost. It just kept loading endlessly. The .exe it was running has a fileout bit in it, and it was creating the text document in the folder, so the executable it's linked to was running, I just couldn't view the 'website'.

It has this in the console, so it's running fine:

But it never gets that 'connected' lines that happen when I run Hello World or any other simple starter program.

And this is the code I was using, provided by Pokeymans on the previous page:
code:
require 'sinatra'

get '/' do
  output = IO.popen('../CCrap/RavsNameGenerator.exe').read
  [200, {'Content-Type' => 'text/plain'}, output]
end
It finds, and seemingly runs, the exe just fine, it just hangs on actually displaying it. With my zero knowledge of Ruby, reading the Ruby docs from the getgo is rather confusing in how it's all laid out. Sinatra docs, need Ruby knowledge that I don't have, is even more foreign. I'll be reading a ton about it, I'd just like this little thing to work for the moment.

I'm guessing it's waiting for more output to come from RavsNameGenerator and it never comes. I have a couple suggestions:

1. Try backticks:

Ruby code:


output = `../CCrap/RavsNameGenerator.exe`

2. Try launching irb and seeing if you can get something working. It's a read-eval-print loop for Ruby. If you type the line I suggested above into irb you should get something out of it. Once you try something that seems to work, paste it back in to your sinatra app.

Finally, I'll add that I don't use Windows and am not all that good with Ruby so you may have better luck wandering by the Ruby and Rails thread. I don't know if we're veering off topic for this thread yet.

# ? May 19, 2014 00:06

Jeherrin: Jun 7, 2012

Would this be the thread to ask about SharePoint? Backstory: a client is using Office365's SharePoint to host his public website. I am designing and developing it. I am familiar with HTML/CSS, not really a problem there. The design is done, and now I'm onto the development.

Does anyone have any advice on using the web-dev side of SharePoint? It seems so pointlessly... complicated. I don't understand half of how it works or what the hierarchy of master pages/themes/pages/etc is.

I don't know why he couldn't just use a normal CMS like everyone else...

# ? May 20, 2014 17:43

kedo: Nov 27, 2007

Can anyone recommend a form system similar to Gravity Forms that doesn't require WordPress to function? I have a legacy client who needs a form with an administrative backend attached, but they have an ancient static site.

# ? May 20, 2014 18:16

Boosh!: Apr 12, 2002; Oven Wrangler

Is there a reason why Google Fonts look awful in Chrome? They look fantastic when I use them on FireFox and IE.

EDIT: VVV Thanks you two, appreciate it.

Boosh! fucked around with this message at 18:54 on May 20, 2014

# ? May 20, 2014 18:17

Jeherrin: Jun 7, 2012

Boosh! posted:

Is there a reason why Google Fonts look awful in Chrome? They look fantastic when I use them on FireFox and IE.

Chrome's rendering engine. It's to do with the anti-aliasing, as I recall...

# ? May 20, 2014 18:19

kedo: Nov 27, 2007

Boosh! posted:

Is there a reason why Google Fonts look awful in Chrome? They look fantastic when I use them on FireFox and IE.

Check out this post I made a few pages ago, should point you in the right direction.

# ? May 20, 2014 18:29

The Dave: Sep 9, 2003

kedo posted:

Can anyone recommend a form system similar to Gravity Forms that doesn't require WordPress to function? I have a legacy client who needs a form with an administrative backend attached, but they have an ancient static site.

My buddy really loves to use Wufoo forms.

# ? May 20, 2014 18:33

kedo: Nov 27, 2007

Oh, I forgot to mention that I'd prefer a self-hosted solution. I've used Wufoo and Formstack previously and while they're fine and dandy, this sort of cheap client tends to balk at the monthly fee.

# ? May 20, 2014 18:38

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

How do I vertically center something inside inline-block?

http://jsfiddle.net/hbp3K/3/

# ? May 20, 2014 22:44

pipes!: Jul 10, 2001; Nap Ghost

fletcher posted:

How do I vertically center something inside inline-block?

http://jsfiddle.net/hbp3K/3/

CSS code:

.button-container, .my-form {
    display: inline-block;
    width: 250px;
    height: 250px;
    border: 1px dashed red;
    text-align: center;
    -webkit-transform-style: preserve-3d;
}

.button-container button, .my-form input {
    vertical-align: middle;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Vendor prefix as needed, `-webkit-transform-style: preserve-3d` helps mitigate blurry half pixel rounding issues. Won't work with IE8, though.

# ? May 20, 2014 23:18

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

Just use flexbox instead.

# ? May 20, 2014 23:33

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

Wow that's way more complicated than I was thinking it had to be. Thanks for the solution, and the extra tip about setting the transform style.

# ? May 20, 2014 23:34

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

You could also do it this dumb way. It's the least dumb way I've found that works in all browsers back to IE8.

# ? May 20, 2014 23:45

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

Thanks for the additional suggestions!

Out of curiosity, why does pipes! solution break when you change height to min-height?

http://jsfiddle.net/hbp3K/7/

# ? May 21, 2014 01:00

pipes!: Jul 10, 2001; Nap Ghost

fletcher posted:

Out of curiosity, why does pipes! solution break when you change height to min-height?

With the technique I posted I believe without a specific height declared the browser can't calculate 50% of it for vertical positioning. `min-height` only declares to the browser at what point something stops getting shrunk, not how tall it is.

Suspicious Dish posted:

Just use flexbox instead.

Flexbox-shmexbox. Let's just use Grid Stylesheets.

# ? May 21, 2014 01:55

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

pipes! posted:

Flexbox-shmexbox. Let's just use Grid Stylesheets.

This is cool.

# ? May 21, 2014 03:22

cbirdsong: Sep 8, 2004; Commodore of the Apocalypso; Lipstick Apathy

Suspicious Dish posted:

This is cool.

It seems super-interesting, but I can't imagine shifting stuff this fundamental onto a weird Javascript dependency.

# ? May 21, 2014 05:33

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

cbirdsong posted:

It seems super-interesting, but I can't imagine shifting stuff this fundamental onto a weird Javascript dependency.

Yeah, I'm just saying that the idea solves a lot of problems. Perhaps the implementation isn't great.

# ? May 21, 2014 05:40

Ghostlight: Sep 25, 2009; maybe for one second you can pause; try to step into another person's perspective, and understand that a watermelon is cursing me

Jeherrin posted:

Would this be the thread to ask about SharePoint? Backstory: a client is using Office365's SharePoint to host his public website. I am designing and developing it. I am familiar with HTML/CSS, not really a problem there. The design is done, and now I'm onto the development.

Does anyone have any advice on using the web-dev side of SharePoint? It seems so pointlessly... complicated. I don't understand half of how it works or what the hierarchy of master pages/themes/pages/etc is.

I'm having to start to do the same thing in a couple of months and I can't even get the vendor to tell me what the advantages of it are other than us having already paid for it.

And I just finished porting the entire thing to Wordpress :sigh:

# ? May 21, 2014 06:58

Mister Chief: Jun 6, 2011

I have a div with overflow-x set to auto. Inside that div I have another element that sits on the right hand side and I would like it to scroll with its parent. Currently this is what happens:

It stays in the position it was originally ruining the fade effect I'm going for. Anyone know how to achieve what I want?

# ? May 21, 2014 13:16

pipes!: Jul 10, 2001; Nap Ghost

Suspicious Dish posted:

Yeah, I'm just saying that the idea solves a lot of problems. Perhaps the implementation isn't great.

Positioning in CSS is a huge loving pile of hacks built on top of another, older, worse pile of hacks, so I'm always happy to see things like this, even if it's just a proof of concept.

# ? May 21, 2014 14:19

Literally Elvis: Oct 21, 2013

So I'm working on my first site ever, and I have a database populated. I have a basic design for the site, and the server is up and running. My domain name is registered and the DNS entries on my host are set up. I'm more or less ready to go, only...

I don't know what to do now. Are there any helpful guides on how query that database and present the user with that information? I know the very first thing about what GET/POST requests are, but I'm not sure how to work with them. Do I set my submit button to send the user to a page that POSTS, or do I have the page present different formatting if there is a GET request in the URL? I feel pretty lost.

edit: I'd like to clarify that I'm not looking for hand-holding, rather some kind of online learning course or article series in this particular topic. I'm not sure what to search for when looking for this sort of information, and I don't want to have to sift through a textbook to filter out the stuff I already know, if possible.

Literally Elvis fucked around with this message at 17:21 on May 21, 2014

# ? May 21, 2014 16:42

Cawd Rud: Mar 12, 2009; Salad Prong

Mister Chief posted:

I have a div with overflow-x set to auto. Inside that div I have another element that sits on the right hand side and I would like it to scroll with its parent. Currently this is what happens:

http://i.imgur.com/ObR0MlO.png

It stays in the position it was originally ruining the fade effect I'm going for. Anyone know how to achieve what I want?

Something like

code:

.fade { position: fixed; right: 0; }

Edit: Actually never mind, that won't work with the fade inside the div, position:fixed takes it out of flow completely. You'll probably have to move the fade to the outside of the div and overlap it.

Cawd Rud fucked around with this message at 20:16 on May 21, 2014

# ? May 21, 2014 20:11

sim: Sep 24, 2003

Literally Elvis posted:

...Are there any helpful guides on how query that database and present the user with that information? I know the very first thing about what GET/POST requests are, but I'm not sure how to work with them. Do I set my submit button to send the user to a page that POSTS, or do I have the page present different formatting if there is a GET request in the URL? I feel pretty lost...

What language are you working in? What kind of DB are you using? That will help to point you in the right direction. If you want to learn SQL, you can certainly do that, but it's a good idea to use an ORM: http://en.wikipedia.org/wiki/List_of_object-relational_mapping_software

Generally, you can use GET requests if you're just requesting public data. However if you want to insert new data, you should use POST. But, let's say you want to let the user search by string. You can create a form that submits a get request to yourwebsite.com/search?q=user_query where user_query is the string (make sure to escape this so the user can't enter SQL commands --- ORMs typically handle this). When the search page is hit with a q parameter, you do a DB query with the value and display the results. That's the basics, but to get more specific I would need to know the language.

# ? May 21, 2014 20:13

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

Literally Elvis posted:

So I'm working on my first site ever,

I don't know, at the point you are at a book is an amazing resource. If you are really opposed to the idea of capitalism, you might find something to help you on the way in this post in the first page of this thread.

# ? May 21, 2014 20:14

kedo: Nov 27, 2007

Mister Chief posted:

I have a div with overflow-x set to auto. Inside that div I have another element that sits on the right hand side and I would like it to scroll with its parent. Currently this is what happens:

It stays in the position it was originally ruining the fade effect I'm going for. Anyone know how to achieve what I want?

Post a jsfiddle.

# ? May 21, 2014 20:15