Web Dev Questions That Don't Need Their Own Thread v4 - Developers

I just learned HTML & CSS most basic syntax from Codecademy (I finished the course) I wanted to ask, how can I practice using HTML & CSS to correctly make pretty and user-friendly websites?

I'm doing something stupid again and I can't get it to work. I've got a regular container <div> wrapped around all my page content - it's got the regular width=whatever, margin: 0 auto, min-height: 100%, background+border stuff everyone's container div does. It's a bit more complex than normal because I'm doing media queries to set the width to one of several fixed amounts, but that's basically it, same as half the sites on the internet. That all works perfectly. I need to be able to make a <div> within that that will tell that fixed width to go fuck itself, and make the div however big it needs to be to fit the image inside it (which is usually a screenshot, so it's big), but only up to the width of the screen (so no horizontal scrollbars, ever). It should never scale the image up, only scale it down if it cannot fit onto the screen. The container div, however, should stay the same size. Closest I've found was based on [url=http://www.greywyvern.com/?post=323]this guide[/url], but that doesn't seem to mesh well with max-width instead of width. I also got close using position: absolute, but that messes up the stuff coming after the image. And I tried some stuff using margin-right: -100&; margin-left: -100%; but that didn't even work. This is the simplified version of the relevant HTML: [code] <div id="container"> <div class="override_width"> <img src="<? bunch of shit here ?>"> </div> </div> [/code] And the current CSS, which at least looks decent although it will shrink the image div if it's wider than the container: [code] #container { width: 1320px; margin: 0 auto; background: #111; min-height: 100%; } .override_width { max-width: 100%; }[/code] Once again, is this even a thing you can do in CSS? Or should I try to write some ugly Javascript thing to resize it all after it's loaded?

ok so. im trying to install node.js on my debian wheezy vps. following instructions from [URL="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager"]their github[/URL] work up until creating the package w/ checkinstall where it spits back this error: [code] g++: internal compiler error: Killed (program cc1plus) Please submit a full bug report, with preprocessed source if appropriate. See <file:///usr/share/doc/gcc-4.7/README.Bugs> for instructions. make[1]: *** [/tmp/tmp.akt2fd18w5/node-v0.10.29/out/Release/obj.target/v8_base/deps/v8/src/hydrogen.o] Error 4 make[1]: Leaving directory `/tmp/tmp.akt2fd18w5/node-v0.10.29/out' make: *** [node] Error 2 [/code] i am not really sure how to google this issue so you guys are all i've got. ty friends - (i also tried make instead of checkinstall, same result)

[QUOTE=ifaux;45403310]ok so. im trying to install node.js on my debian wheezy vps. following instructions from [URL="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager"]their github[/URL] work up until creating the package w/ checkinstall where it spits back this error: [code] g++: internal compiler error: Killed (program cc1plus) Please submit a full bug report, with preprocessed source if appropriate. See <file:///usr/share/doc/gcc-4.7/README.Bugs> for instructions. make[1]: *** [/tmp/tmp.akt2fd18w5/node-v0.10.29/out/Release/obj.target/v8_base/deps/v8/src/hydrogen.o] Error 4 make[1]: Leaving directory `/tmp/tmp.akt2fd18w5/node-v0.10.29/out' make: *** [node] Error 2 [/code] i am not really sure how to google this issue so you guys are all i've got. ty friends - (i also tried make instead of checkinstall, same result)[/QUOTE] why not just use a package manager to install it?

yeah just do `sudo apt-get install nodejs`

[QUOTE=jetboy;45403854]yeah just do `sudo apt-get install nodejs`[/QUOTE] it's not available on any of the default debian repositories unless i go w/ a newer unstable version (sid) and its apparently not recommended to mix versions like that

[QUOTE=ifaux;45404031]it's not available on any of the default debian repositories unless i go w/ a newer unstable version (sid) and its apparently not recommended to mix versions like that[/QUOTE] You can just download the .deb from [URL="https://packages.debian.org/wheezy-backports/nodejs"]packages.debian.org[/URL]

[QUOTE=supersnail11;45402880][url]http://fortawesome.github.io/Font-Awesome/[/url][/QUOTE] Thanks :smile:

[QUOTE=gman003-main;45403287]I need to be able to make a <div> within that that will tell that fixed width to go fuck itself, and make the div however big it needs to be to fit the image inside it (which is usually a screenshot, so it's big), but only up to the width of the screen (so no horizontal scrollbars, ever). It should never scale the image up, only scale it down if it cannot fit onto the screen. The container div, however, should stay the same size.[/QUOTE] been thinking about this, i don't think there's any purely css way to do this unless you restructured your html or know the height of the image. However, i don't think that the JS is that extreme, just get the width of the body (and make sure to recalculate on window resize) and set the max-width of images to that which should work fine and be quick. you could set the width by just editing the innerhtml of a style tag to be .override_width img{max-width: bodywidth; margin-left: -calculatedContainerMargin} rather than looping through all the images or whatever

[QUOTE=HarryG321;45406640]Thanks :smile:[/QUOTE] Or try [url]http://fontello.com/[/url], no need to have big font files hosted on your website when you only use 5 icons.

[QUOTE=Cyberuben;45411732]Or try [url]http://fontello.com/[/url], no need to have big font files hosted on your website when you only use 5 icons.[/QUOTE] All formats of fontawesome together are < 500KB. I wouldn't be worried about that unless you're still on dialup.

[QUOTE=supersnail11;45411769]All formats of fontawesome together are < 500KB. I wouldn't be worried about that unless you're still on dialup.[/QUOTE] Phones using GPRS will love you better if you use fontello.

[QUOTE=Cyberuben;45412022]Phones using GPRS will love you better if you use fontello.[/QUOTE] I doubt he's targeting phones that old.

[QUOTE=supersnail11;45412036]I doubt he's targeting phones that old.[/QUOTE] Excuse me? Old? All smartphones fall back to GPRS if there's no EDGE, 3G or 4G available. Meaning, if you are in the country side / in an area with general bad coverage, you will have trouble sending a single whatsapp message. Let alone loading a webpage having a 500kb font. As far as I know, some mobile browsers don't load the page until all content except images have been loaded.

[QUOTE=biodude94566;45369993]I'd like to start getting into web hosting that's more than just "drag-and-drop files to the server" - do you guys have any good tutorials and starting points and the like?[/QUOTE] [QUOTE=supersnail11;45370176]You can try out [URL="http://heroku.com/"]Heroku[/URL]. It supports most modern web languages (and also [URL="https://devcenter.heroku.com/articles/getting-started-with-php"]PHP[/URL]), and everything is handled through Git. Just run through their [URL="https://devcenter.heroku.com/articles/quickstart"]quickstart guide[/URL] and you'll figure it out pretty fast. Heroku's also awesome because you get 2TB of bandwidth free (and that's a soft limit) and an unlimited amount of free apps.[/QUOTE] Thank you! I'm looking through this and getting started with Node.JS, and I got to [url=https://devcenter.heroku.com/articles/getting-started-with-nodejs#write-your-app]this part of the tutorial[/url] and started getting lost. I've not taken a lot of programming courses, so I know syntax and how to write and lots of basic shit, but this stuff is already starting to get over my head. What would you guys say is the best way to learn this sort of stuff? I'm thinking of going out and finding textbooks and the like, but I know those can be kind of hit and miss.

[QUOTE=Cyberuben;45412059]Excuse me? Old? All smartphones fall back to GPRS if there's no EDGE, 3G or 4G available. Meaning, if you are in the country side / in an area with general bad coverage, you will have trouble sending a single whatsapp message. Let alone loading a webpage having a 500kb font. As far as I know, some mobile browsers don't load the page until all content except images have been loaded.[/QUOTE] Not every SIM card has the ability for GPRS, and sometimes you have to call your provider to enable it. Besides, that's all the files together. Your phone will only load one, probably the 44 KB WOFF file. Optimizing for GPRS users is like optimizing your site for IE6 these days. You should only do it if you really need to. [QUOTE=biodude94566;45412103]Thank you! I'm looking through this and getting started with Node.JS, and I got to [url=https://devcenter.heroku.com/articles/getting-started-with-nodejs#write-your-app]this part of the tutorial[/url] and started getting lost. I've not taken a lot of programming courses, so I know syntax and how to write and lots of basic shit, but this stuff is already starting to get over my head. What would you guys say is the best way to learn this sort of stuff? I'm thinking of going out and finding textbooks and the like, but I know those can be kind of hit and miss.[/QUOTE] Basically, you just need to understand [URL="http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/"]Javascript callbacks[/URL]. From there, you can just google the API. If you'd like a more in-depth tutorial, you can use [url=https://github.com/rvagg/learnyounode#learn-you-the-nodejs-for-much-win]this tutorial[/url], though I can't vouch for it myself.

[QUOTE=supersnail11;45412146]Not every SIM card has the ability for GPRS, and sometimes you have to call your provider to enable it. Besides, that's all the files together. Your phone will only load one, probably the 44 KB WOFF file. Optimizing for GPRS users is like optimizing your site for IE6 these days. You should only do it if you really need to. Basically, you just need to understand [URL="http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/"]Javascript callbacks[/URL]. From there, you can just google the API. If you'd like a more in-depth tutorial, you can use [url=https://github.com/rvagg/learnyounode#learn-you-the-nodejs-for-much-win]this tutorial[/url], though I can't vouch for it myself.[/QUOTE] Well I'm quite sure that mobile devices are getting bigger and bigger. Even though data plans increase in size and network speeds improve, there are plenty of areas on the world where people can not load websites fast enough. For example, I had a terrible connection all through the UK where I have been the last 2 weeks, and in 'larger towns' everything is fine. I couldn't even load up a site to view the time table for the bus. I think it is quite important to keep in mind there are mobile users.

[QUOTE=Cyberuben;45412352]Well I'm quite sure that mobile devices are getting bigger and bigger. Even though data plans increase in size and network speeds improve, there are plenty of areas on the world where people can not load websites fast enough. For example, I had a terrible connection all through the UK where I have been the last 2 weeks, and in 'larger towns' everything is fine. I couldn't even load up a site to view the time table for the bus. I think it is quite important to keep in mind there are mobile users.[/QUOTE] If an 80kb WOFF file is too big to load you have bigger problems

Ok I have a small conundrum with Socket.IO. So I'm trying to simulate multiple users connecting to my site (which works), however I only need Socket.IO to send this information one time per user, not each time that user connects to the page. So I figured creating a boolean variable would fix that, however Socket.IO then realizes it's all using one connection so it simplifies it and will work for one browser, but the other browser acts as if I'm actually logged into the other browser that worked. Here's an example to demonstrate: -I log in to two accounts: Account A and Account B -Account A connects to Socket.IO, causing the firstConnect var to switch to false. -Account B connects just afterwards, but Socket.IO realizes firstConnect is false so it just prints the persist message which displays for users who visit that page after the first time I've tried forcing a new connection using [code]var socket = io.connect('http://localhost:3000', { "force new connection" : true});[/code] Which works if I don't have the firstConnect var, but because it's a global variable I'm assuming Socket.IO doesn't reset those variables upon a forced new connection. So how should I handle it so that: Account A displays: "Account A has connected" and upon revisiting that page displays: "User persist." Account B also displays: "Account B has connected" and upon revisiting displays: "User persist." Instead of Account A displays: "Account A has connected" then displays: "User persist." And Account B displays: "User persist." [editline]Edited:[/editline] [del]I think I fixed it. I'm creating a new connection each time I connect to that page, so I might have to create the socket on the login page so it can't recreate it again. That seems like a shoddy workaround though, so any advice?[/del] Still not sure how to fix it. Any advice is appreciated.

[QUOTE=Goz3rr;45412441]If an 80kb WOFF file is too big to load you have bigger problems[/QUOTE] Either way, Fontello is an useful site where you can compile 1 file for all icons you want to use and leave all other icons out. Saves you at least a few requests.

[QUOTE=WitheredGryphon;45412509]Ok I have a small conundrum with Socket.IO. So I'm trying to simulate multiple users connecting to my site (which works), however I only need Socket.IO to send this information one time per user, not each time that user connects to the page. So I figured creating a boolean variable would fix that, however Socket.IO then realizes it's all using one connection so it simplifies it and will work for one browser, but the other browser acts as if I'm actually logged into the other browser that worked. Here's an example to demonstrate: -I log in to two accounts: Account A and Account B -Account A connects to Socket.IO, causing the firstConnect var to switch to false. -Account B connects just afterwards, but Socket.IO realizes firstConnect is false so it just prints the persist message which displays for users who visit that page after the first time I've tried forcing a new connection using [code]var socket = io.connect('http://localhost:3000', { "force new connection" : true});[/code] Which works if I don't have the firstConnect var, but because it's a global variable I'm assuming Socket.IO doesn't reset those variables upon a forced new connection. So how should I handle it so that: Account A displays: "Account A has connected" and upon revisiting that page displays: "User persist." Account B also displays: "Account B has connected" and upon revisiting displays: "User persist." Instead of Account A displays: "Account A has connected" then displays: "User persist." And Account B displays: "User persist." [editline]Edited:[/editline] [del]I think I fixed it. I'm creating a new connection each time I connect to that page, so I might have to create the socket on the login page so it can't recreate it again. That seems like a shoddy workaround though, so any advice?[/del] Still not sure how to fix it. Any advice is appreciated.[/QUOTE] Create an object where the key is the user ID and the value is whether they've connected. Or use a database.

[QUOTE=supersnail11;45412896]Create an object where the key is the user ID and the value is whether they've connected. Or use a database.[/QUOTE] I'm already using a MySQL database. Should I just add a value into the players' table with a Connected 0 : 1 value?

[QUOTE=WitheredGryphon;45412961]I'm already using a MySQL database. Should I just add a value into the players' table with a Connected 0 : 1 value?[/QUOTE] It depends on whether you're going for scalability or speed. If you want it to be scalable, putting it in an object will get out of hand with tons of users. But if you want speed, putting it in MySQL will be slower than an object. It's also less simple. So whichever works for you.

[QUOTE=supersnail11;45412993]It depends on whether you're going for scalability or speed. If you want it to be scalable, putting it in an object will get out of hand with tons of users. But if you want speed, putting it in MySQL will be slower than an object. It's also less simple. So whichever works for you.[/QUOTE] Going the MySQL route, I get how to switch between 0 to 1 on connection, but how do I get it so that even if the user doesn't officially log off it still resets to 0 when they close the window/tab?

[QUOTE=WitheredGryphon;45413114]Going the MySQL route, I get how to switch between 0 to 1 on connection, but how do I get it so that even if the user doesn't officially log off it still resets to 0 when they close the window/tab?[/QUOTE] You can catch socket.io's [URL="http://stackoverflow.com/questions/17287330/socket-io-handling-disconnect-event"]disconnect[/URL] event.

[QUOTE=supersnail11;45413194]You can catch socket.io's [URL="http://stackoverflow.com/questions/17287330/socket-io-handling-disconnect-event"]disconnect[/URL] event.[/QUOTE] Oh cool, thought it only proc'd after Node was shut down.

-never mind, it was the wrong argument index :downs:-

[QUOTE=ifaux;45401020]ok i am having issues w/ my vps. so i set up nginx and php and everything correctly (or at least i believe so), and i've made a /example.com/public_html/index.php and all but i get a 404 on the main page & when i go to /index.php it says no file input specified. what the fuck. should i just keep restarting fresh and installing everything again until it eventually works[/QUOTE] i had to restart and now im having this same problem. idgi. i dont even remember what i did.

[QUOTE=ifaux;45425749]i had to restart and now im having this same problem. idgi. i dont even remember what i did.[/QUOTE] Is FastCGI running?

[QUOTE=ifaux;45425749]i had to restart and now im having this same problem. idgi. i dont even remember what i did.[/QUOTE] In /etc/php5/fpm/pool.d/www.conf [code] listen = 127.0.0.1:9000 # change to listen = /var/run/php5-fpm.sock [/code] In the nginx site config, usually /etc/nginx/conf.d/default.conf or /etc/nginx/sites-available/default [code] fastcgi_pass 127.0.0.1:9000; # change to fastcgi_pass unix:/var/run/php5-fpm.sock; [/code] Or did you do that already?