Web Development - WAYWO - #8 - Developers

[QUOTE=Svenskunganka;45865325]Glad it worked out! The reason this is happening is because the paragraph is already centered inside its element size, as the element size depends on the amount of characters and the font-size/font-weight. (In fact, it takes up 100% of its element width) Here's what I mean: [IMG]http://svenskunganka.com/share/2014-09-01_23-05-33.png[/IMG] [IMG]http://svenskunganka.com/share/2014-09-01_23-06-54.png[/IMG][/QUOTE] I think I understand. So since I was trying to center each child, it doesn't work because it only takes up the exact amount of space in pixels it needs and not the whole line? Where as the parent div takes up the whole line, and by centering this all of the children inline are centered as well?

[QUOTE=DerpHurr;45865405]I think I understand. So since I was trying to center each child, it doesn't work because it only takes up the exact amount of space in pixels it needs and not the whole line? Where as the parent div takes up the whole line, and by centering this all of the children inline are centered as well?[/QUOTE] You are completely right, whereas display:block; makes the element take up 100% of the available width, like so: [IMG]http://svenskunganka.com/share/2014-09-01_23-17-59.png[/IMG] Once again, blue is available space in this picture. And the orange is margin. Green is padding (not present here though). Something that [URL="http://facepunch.com/member.php?u=286493"]Moofy[/URL] taught me while I was learning is that margin is "air outside the element" and padding is "air inside the element". Pretty simple to understand when he put it that way, so I'm passing it along to you and hopefully it helps you understand.

[QUOTE=Svenskunganka;45865465]You are completely right, whereas display:block; makes the element take up 100% of the available width, like so: [IMG]http://svenskunganka.com/share/2014-09-01_23-17-59.png[/IMG] Once again, blue is available space in this picture. And the orange is margin. Green is padding (not present here though). Something that [URL="http://facepunch.com/member.php?u=286493"]Moofy[/URL] taught me while I was learning is that margin is "air outside the element" and padding is "air inside the element". Pretty simple to understand when he put it that way, so I'm passing it along to you and hopefully it helps you understand.[/QUOTE] That helped me quite a bit, thank you. I appreciate the time you took to create those images too. This will come in handy because I'm working on the buttons and stuff for the website now. I feel that that comparison does simplify it a lot.

[QUOTE=DerpHurr;45865494]That helped me quite a bit, thank you. I appreciate the time you took to create those images too. This will come in handy because I'm working on the buttons and stuff for the website now. I feel that that comparison does simplify it a lot.[/QUOTE] I didn't make the images, they're simply screenshots from Chrome. Press F12 and go to the Elements tab, hover above an element and you should see that it's being highlighted the same way my screenshots is. Keep that window open at all times when you're doing front-end design, it's amazing how easier it is to debug why something isn't lining properly or takes up too much/little space than what you intended the element to do. [t]http://svenskunganka.com/share/2014-09-01_23-27-41.png[/t]

[QUOTE=Svenskunganka;45865528]I didn't make the images, they're simply screenshots from Chrome. Press F12 and go to the Elements tab, hover above an element and you should see that it's being highlighted the same way my screenshots is. Keep that window open at all times when you're doing front-end design, it's amazing how easier it is to debug why something isn't lining properly or takes up too much/little space than what you intended the element to do. [t]http://svenskunganka.com/share/2014-09-01_23-27-41.png[/t][/QUOTE] I didn't know I could do that. I can easily see positioning and height/width of things in the code, but a visual representation is a lot more helpful. I like how it shows the padding/margins/etc. I like front-end design a lot, but I'm a little worried when I have to do the backend. I have a feeling it won't be simple fixes such as these.

[QUOTE=DerpHurr;45865823]I didn't know I could do that. I can easily see positioning and height/width of things in the code, but a visual representation is a lot more helpful. I like how it shows the padding/margins/etc. I like front-end design a lot, but I'm a little worried when I have to do the backend. I have a feeling it won't be simple fixes such as these.[/QUOTE] When it comes to back-end, just make sure you [U]dump variables as often as you can[/U]. I know it's a hassle, but it's trivial to debug the code and see where things go wrong. As always when developing, make sure you have all error reporting turned on. What language will you write your back-end in?

[QUOTE=Svenskunganka;45865902]When it comes to back-end, just make sure you [U]dump variables as often as you can[/U]. I know it's a hassle, but it's trivial to debug the code and see where things go wrong. As always when developing, make sure you have all error reporting turned on. What language will you write your back-end in?[/QUOTE] I have no idea. I'm a CS student who only really has experience with C++ and Python. Right now I'm just sort of doing it for fun. Before I do any back-end work I'd have to read a lot about it. Maybe the back-end would be best to work on first, in fact. Something came up recently where I found out I'd be maintaining a website, so I thought I'd learn some stuff.

The thing with back-end is that there are so many different good languages to learn. I just posted about PHP and Node [URL="http://facepunch.com/showthread.php?t=1250244&p=45865693&viewfull=1#post45865693"]here[/URL] which I really think you should read through. The PHP and Python syntax is almost identical, so PHP would be a good entry-point for you. But as stated in that post, don't spend too much time with it. After awhile, move towards Javascript, play around with jQuery and when the time comes, step it up to AngularJS and NodeJS. Javascript is front-end, but NodeJS is Javascript syntax and functionality but back-end and is very popular right now. There are other back-end languages such as Ruby which standalone doesn't support web development but the framework Ruby on Rails does. There's a few really bright fellas here that has done alot of things using it. GitHub is written in Ruby on Rails aswell, but my suggestion is to learn Javascript. The syntax isn't a whole different fron Python either, so you have a good entry-point there aswell. Just note that client-side javascript is open for anyone to view, so don't try to hash a password with it or alike, leave that to the real back-end such as PHP, Ruby on Rails or NodeJS. Not to mention that both NodeJS and Ruby on Rails docs leads you onto a good path, with Git as version control and dependency building packages such as npm for Node.

[QUOTE=Svenskunganka;45866110]The thing with back-end is that there are so many different good languages to learn. I just posted about PHP and Node [URL="http://facepunch.com/showthread.php?t=1250244&p=45865693&viewfull=1#post45865693"]here[/URL] which I really think you should read through. The PHP and Python syntax is almost identical, so PHP would be a good entry-point for you. But as stated in that post, don't spend too much time with it. After awhile, move towards Javascript, play around with jQuery and when the time comes, step it up to AngularJS and NodeJS. Javascript is front-end, but NodeJS is Javascript syntax and functionality but back-end and is very popular right now. There are other back-end languages such as Ruby which standalone doesn't support web development but the framework Ruby on Rails does. There's a few really bright fellas here that has done alot of things using it. GitHub is written in Ruby on Rails aswell, but my suggestion is to learn Javascript. The syntax isn't a whole different fron Python either, so you have a good entry-point there aswell. Just note that client-side javascript is open for anyone to view, so don't try to hash a password with it or alike, leave that to the real back-end such as PHP, Ruby on Rails or NodeJS. Not to mention that both NodeJS and Ruby on Rails docs leads you onto a good path, with Git as version control and dependency building packages such as npm for Node.[/QUOTE] Thank you, I'll read through your post. PHP I heard was one of the most common back-end languages, so I think I was going to start with that. Unfortunately I have no experience whatsoever with storing data entered from forms on the website and other things like that. But to be honest with you, I'm not sure if I can build a back-end with my current ability. Javascript is a viable option for me though, as I could go through the CodeAcademy courses just to start off. This is the first project where I've wanted to follow it all the way through, because I'm creating a website based around something I enjoy and I'd like to run it on the side someday. I also see Ruby and the Ruby on Rails framework are talked about quite a bit. I heard Reddit was coded in Python too, but I'm not sure how much of it. I just picked up something like this as a side-project, but it also kind of worries me because I want to be a software-engineer and I'm not sure if this would be impressive to a recruiter (well the back-end would be I think). I'll also have to learn Git, haha. Lots to learn! EDIT: Javascript seems a lot more suited towards my ability if it means we have to write less back-end stuff. Since you already have a lot of experience I think I'm leaning more towards Javascript. That post was really helpful, thank you. Also, NodeJS sounds pretty rad.

You should do what you feel is right for you. Back-end often includes so much more than just the back-end syntax. It'll give you a heads up on SQL, XML, JSON and many other things, which actually is why PHP is such a good entry-point; it simplifies those things alot. CodeAcademy is a good place to learn the very basics, but it will only take you that far. The fact that you have a project that you wish to develop is what's trivial for you. That alone will be enough to take you a long way into Web Development. The thing with PHP though, is that you are not labeled "fairly good" at it unless you know Object Oriented PHP, and it usually takes awhile to get there. Most of the employments out there for PHP is because the company in fact just needs someone to maintain their Wordpress or current system installation or is a guru at the Symfony Framework. There's not much else than that in the PHP business, and that's the cold, hard truth. You want to learn however, so let's not take this too far, but I just advice you not to stay with PHP for too long, you'll just suffer from it in the end. Git is amazing, it really is, so that's a must learn. It's really not that hard, just picture yourself that Git literally is a tree, and you'll get the hang of it in no time. I have one last advice for you when learning back-end; when you google something, make sure the how-to/post was made late 2012/2013 to present, the rest is just outdated and contains loopholes and flaws. In case you don't have a good editor yet, I highly suggest [URL="https://atom.io/"]Atom[/URL] or [URL="http://www.sublimetext.com/3"]Sublime Text 3[/URL]. They're both amazing editors, I've used both but my personal preference is Atom. Either one is great.

[QUOTE=Svenskunganka;45866446]You should do what you feel is right for you. Back-end often includes so much more than just the back-end syntax. It'll give you a heads up on SQL, XML, JSON and many other things, which actually is why PHP is such a good entry-point; it simplifies those things alot. CodeAcademy is a good place to learn the very basics, but it will only take you that far. The fact that you have a project that you wish to develop is what's trivial for you. That alone will be enough to take you a long way into Web Development. The thing with PHP though, is that you are not labeled "fairly good" at it unless you know Object Oriented PHP, and it usually takes awhile to get there. Most of the employments out there for PHP is because the company in fact just needs someone to maintain their Wordpress or current system installation or is a guru at the Symfony Framework. There's not much else than that in the PHP business, and that's the cold, hard truth. You want to learn however, so let's not take this too far, but I just advice you not to stay with PHP for too long, you'll just suffer from it in the end. Git is amazing, it really is, so that's a must learn. It's really not that hard, just picture yourself that Git literally is a tree, and you'll get the hang of it in no time. I have one last advice for you when learning back-end; when you google something, make sure the how-to/post was made late 2012/2013 to present, the rest is just outdated and contains loopholes and flaws. In case you don't have a good editor yet, I highly suggest [URL="https://atom.io/"]Atom[/URL] or [URL="http://www.sublimetext.com/3"]Sublime Text 3[/URL]. They're both amazing editors, I've used both but my personal preference is Atom. Either one is great.[/QUOTE] Thank you for all the help. I'm mostly enjoying the front-end design thing, I wonder if I could use a platform like wordpress and just edit the html/css to my liking and have the back-end done for me. Not sure how far I will take this, but it is mostly just a personal project. SQL, XML, and JSON I am actually interested in learning. SQL especially, because I love databases. Also thank you for the advice on what time frame to use when searching, outdated info would have surely made me frustrated. I have Sublime Text, but I am currently using Notepad++. Never heard of Atom, so I'll check it out. You took a lot of time to help me, thank you. :)

[QUOTE=Svenskunganka;45865465] Once again, blue is available space in this picture. And the orange is margin. Green is padding (not present here though). Something that [URL="http://facepunch.com/member.php?u=286493"]Moofy[/URL] taught me while I was learning is that margin is "air outside the element" and padding is "air inside the element". Pretty simple to understand when he put it that way, so I'm passing it along to you and hopefully it helps you understand.[/QUOTE] For a more detailed explanation of this, just look up the [URL="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model"]CSS box-model[/URL]. (Mozilla MDN is awesome when it comes to learning this type of stuff) Also, was the menu thing solved DerpHurr? I am not sure I understood it completely, you wanted your menu items centered or was it just that they took up a full line each? [URL="http://jsfiddle.net/hod3jtrh/"]Here's an example of both however just to be sure everything is clear [/URL](I did not fully make the centered menu myself, I just slightly customised it to remove some unnecessary code.) [editline]2nd September 2014[/editline] Also, I prefer to use float than display-inline. I generally only use display-inline when I [B]have[/B] to

[QUOTE=KmartSqrl;45805674]Been making some good progress on [URL]http://sublimaterecords.com[/URL] Almost done adding a blog to it. Store comes next once that's done.[/QUOTE] At first I thought "why does it say 'Sublimate is an collective' with weird spacing?". Well it turns out I can't see the words "art&music" with their current colouring on that background. That said, I am colourblind and this would not be the first time that happened. [QUOTE=Svenskunganka;45866110]The thing with back-end is that there are so many different good languages to learn. I just posted about PHP and Node [URL="http://facepunch.com/showthread.php?t=1250244&p=45865693&viewfull=1#post45865693"]here[/URL] which I really think you should read through. The PHP and Python syntax is almost identical, so PHP would be a good entry-point for you. But as stated in that post, don't spend too much time with it. After awhile, move towards Javascript, play around with jQuery and when the time comes, step it up to AngularJS and NodeJS. Javascript is front-end, but NodeJS is Javascript syntax and functionality but back-end and is very popular right now. There are other back-end languages such as Ruby which standalone doesn't support web development but the framework Ruby on Rails does. There's a few really bright fellas here that has done alot of things using it. GitHub is written in Ruby on Rails aswell, but my suggestion is to learn Javascript. The syntax isn't a whole different fron Python either, so you have a good entry-point there aswell. Just note that client-side javascript is open for anyone to view, so don't try to hash a password with it or alike, leave that to the real back-end such as PHP, Ruby on Rails or NodeJS. Not to mention that both NodeJS and Ruby on Rails docs leads you onto a good path, with Git as version control and dependency building packages such as npm for Node.[/QUOTE] Is there any way we can give this guy a medal for being awesome? So as for my story: I finished the core material of the Ruby on Rails Tutorial, I'll be working on the suggested add-ons soon. What a great tutorial. Anyway I'm poor now so I've been spending much of my free time busting my ass for pennies at a sandwich place... so I said fuck it and sent a resume off to Shopify. In the meantime I'm doing what I can to advance my skills, really just want to get some real work and create things that aren't sandwiches. Job market here is shit and I can't readily move, so... any advice for a guy who might be going it alone into web development? Lots of people sent me one off website jobs when I posted an ad for myself but at the time I hadn't even done an internship. It's clear there is a demand for these skills but I have no experience turning this into a business. I should note that I am actually really well versed in running web servers, networking, and the like: grew up with an ISP running out of our basement. Instead of chores I kept 300 concurrent users online. When my wife blames me for not putting the clothes away I blame my parents. It doesn't work but it's fun to do.

CC? [t]http://i.imgur.com/U0g57MI.png[/t] (Ignore the repeated navigation)

[QUOTE=Dorkslayz;45869695]CC? [t]http://i.imgur.com/U0g57MI.png[/t] (Ignore the repeated navigation)[/QUOTE] Between the "Web Application/Cache Cluster" paragraphs and the repeated navbar above them, there is this really hard to see header that says "Use Cases". Once again not sure if intentional due to being colourblind.

I decided to do a dumb benchmark of SQLite3 request handling in a single thread, to see where each language is. Now, this is probably not useful to a lot of you, but I didn't really know what languages to do this with, or how to implement it with all languages. If you have any recommendations (such as "sTOP POstING WRONG DATA"), feel free to let me know. My results are the following, running only tests of Shell, PHP, Lua, and a optimized compiled binary written in C (to test results against: the binary C version is the fastests, and hence makes it easy to compare other systems to what is 'native speed') [IMG]http://i.imgur.com/mKdoJRN.png[/IMG] And for those who want to know HOW the tests were carried out: [IMG]http://i.imgur.com/SaHGdxT.png[/IMG] [editline]2nd September 2014[/editline] Please note that the tests are NOT - despite running tup - running alongside eachother. The tests were performed sequentially, with one job at a time running, to prevent further CPU thread interruption. [editline]2nd September 2014[/editline] Oh, and obviously it might make sense to state what the actual "benchmarks" are doing. I called it a dumb benchmark for a reason, and all the files do is the SIMPLEST (ie perhaps not the fastest) execution of sqlite.open();, sqlite.exec(); with three random numbers being generated and inserted, and sqlite.close();.

[QUOTE=FlakAttack;45869734]Between the "Web Application/Cache Cluster" paragraphs and the repeated navbar above them, there is this really hard to see header that says "Use Cases". Once again not sure if intentional due to being colourblind.[/QUOTE] That doesn't actually happen on the live site, it's just the background of the repeated header that makes it look grey.

[QUOTE=Dorkslayz;45869695] (Ignore the repeated navigation)[/QUOTE] [url=https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl]This might help you![/url]

Nearly finished with the project now: [url]http://rbmedia.se/gfx/avesina/[/url] What do you guys think? I am presenting it to them in an hour to see if they have some inputs on improvements/changes.

[QUOTE=Cyberuben;45870259][url=https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl]This might help you![/url][/QUOTE] Ah, there we go. Thanks :) [t]http://puu.sh/biiHR.png[/t]

[QUOTE=Dorkslayz;45870831]Ah, there we go. Thanks :) [t]http://puu.sh/biiHR.png[/t][/QUOTE] I think it's really weird that the color red is only used in the logo, and nowhere else on the site. It just makes it seem really disjointed.

[QUOTE=Dorkslayz;45870831][t]http://puu.sh/biiHR.png[/t][/QUOTE] Overall, it's really nice. But I don't like that at the top of the bottom you have [CODE]text-align:center;[/CODE] but not during the middle sections. I think that the lines are too long to be aligned to center.

Not sure if anyone does it here, or knows anyone that does, but could anyone do PSD -> HTML (Bootstrap) for two PSD's I have? If you're interested feel free to PM, it will be paid of course. :)

[QUOTE=Svenskunganka;45870408]Nearly finished with the project now: [url]http://rbmedia.se/gfx/avesina/[/url] What do you guys think? I am presenting it to them in an hour to see if they have some inputs on improvements/changes.[/QUOTE] Could use some more padding at the sides in the big green parts, feels like the text is hugging the edge of my screen

[QUOTE=FlakAttack;45869657]At first I thought "why does it say 'Sublimate is an collective' with weird spacing?". Well it turns out I can't see the words "art&music" with their current colouring on that background. That said, I am colourblind and this would not be the first time that happened.[/QUOTE] Yeah I can barely read that right now too and I'm not even colorblind haha. Been toying with some solutions but nothing has quite hit all the nails I want it to hit.

Decided I'd build more of my website while sitting in the doctor's office on my phone. Accidentally overwrite index.php...

[QUOTE=Cakebatyr;45872825]Decided I'd build more of my website while sitting in the doctor's office on my phone. Accidentally overwrite index.php...[/QUOTE] Source control..?

[QUOTE=Dorkslayz;45870831]Ah, there we go. Thanks :) [t]http://puu.sh/biiHR.png[/t][/QUOTE] Pretty sexy font.

How does data collection from forms work on websites? I'm going to be putting a few forms on a website to collect information, but I'm not sure whether it would save it to an existing database or save it in a text file. I'm currently working on the form page now, but I have no experience doing the back-end stuff with this. I think I'm going to need to learn PHP/Javascript or something.

[QUOTE=KmartSqrl;45873429]Source control..?[/QUOTE] Nah, the landing page is [url=limonene.net]currently nothing special[/URL], just three divs: one picture, one string, and one random-line-on-page-load string. Was very simple to rebuild.