Website Developers Thread

[Revy ~ Two Hands 862]

This is the official thread to share any knowledge, links, articles, YouTube videos and or any other form of media showing others how to develop websites in coding languages such as HTML5, CSS3, JavaScript, php, MySql and more. 

 

If possible mark you're post with the Power level of expertise in web development you believe

is required to have in order to understand the post:

 

*Beginner  

*Intermediate 

*Advanced  

*Expert

 

 

Here is an example post talking about how to customise a website navigation bar using CSS3 (and some HTML of course) since I consider myself a '*beginner' for web development I would say this particular article should be marked at '*beginner' level

 

http://www.noupe.com/css/building-an-interactive-navigation-bar-with-htmlcss-78732.html

 

Also feel free post any random tidbits of knowledge, and discuss web development in general, I'm not going to set any specific rules here. The aim I'd like is for people to learn, because knowing is half the battle  

[Twilight Sparkle ✨ 8,526]

*Beginner

 

While I'm tagging this one as "beginner" because it goes over some basic aspects of web development on a very conceptual level, I am assuming that you understand the following basic premises of web dev:

• The browser renders a page from HTML and CSS.
• A web app is an interactive website.
• Browsers "ask" a server for the pages and data they display.
• You know what a URL is.
• Browsers are capable of executing JavaScript code within a page to, among other things, interact with and manipulate its HTML structure (known as the Document-Object Model, or DOM for short).

 

Frameworks are usually built by really experienced developers. And that's great!

 

If there's a single tip I could give to new web developers, it's to start with a framework. It's extremely tempting to either be overconfident in your abilities or underestimate how much time can be saved by building on top of already-solved problems. It can be an ego-booster to be able to claim you built something "from scratch", but (in a best-case scenario) you'll inevitably wind up spending a lot more time doing low-level manipulation of this and that rather than putting that time into designing and bringing your vision for a new tool to life. Mature frameworks typically come with tons of tools and community support ready for you to use and abuse, and it's really nice to be able to trust that your URL routing is going to just work when there's so much else to think about.

 

Don't know what URL routing is yet? Good luck implementing it yourself without leaving a vulnerability you don't even know about if this stuff is still all new to you.

 

Some great frameworks worth checking out in various languages:

• Ruby on Rails (Ruby) - often credited for kicking off the "framework craze"
• Laravel (PHP) - Pony.fm and Poniverse.net are built on it
• Sails.js (JavaScript)
• Django (Python

 

Web development does not mean knowing PHP

 

The other things I'd recommend for new developers is to start with a higher-level language than PHP. That's widely considered the defacto web dev language for many reasons, but most of that can be attributed to a combination of commoditized dirt-cheap PHP hosting and a proliferation of readily available software that runs on it like WordPress, phpBB, and others. Modern hosting is available nowadays at similar prices to classic "PHP hosting" from providers like DigitalOcean that allow you to set up any language(s) you want, so PHP is much less attractive these days as a language to build your own stuff in.

 

I'll let you in on a little secret... PHP is not a well-designed language. While it's relatively performant and good at what it does, it's a clashing hodgepodge of different methodologies, quirks, and WTF moments that'll have you scratching your head when you encounter a "white screen of death" (you'll run across one in your web dev career eventually). Ruby or Python would be better places to start, in my opinion, if only because they have many of PHP's advantages (garbage collection, dynamic typing, community support, availability of tooling & libraries) but actually have an overarching design philosophy that you can comfortably settle into as well.

 

If I could go back in time and do it all over, there's a great chance Pony.fm might have ended up happening in Ruby+Rails rather than PHP+Laravel. If you're lost and wondering where to start, you can't go wrong starting with Ruby+Rails.

 

 

 

Learn front-end engineering

 

For the vast majority of modern web apps, building forms and tables that accept and display data isn't enough anymore. They're becoming vastly more interactive than they've ever been before, to the point that some web apps are even beginning to compete with bona-fide desktop apps!

 

You want in on this new paradigm. Believe me, you do.

 

The classic way of implementing additional interactivity within a web app is to throw jQuery (a JavaScript library that hooks you up with a bunch of useful tools for manipulating and working with HTML in real time, among other things) into your pages and start attaching code to the HTML tags rendered by the server-side framework (you are using a server-side framework, yes?). While this is a perfectly acceptable way of handling simple on-page interactivity, there's an evolving paradigm known as single-page applications, which is just a fancy way of saying that the server doesn't render your app's HTML at all!

 

Single-page apps can go above and beyond anything that requires the browser to load a new page from the server and replace everything on your screen with it, because you can put all the logic for rendering HTML together with whatever in-browser interactivity you have. When a user navigates to another area of the app, you don't reload everything on the screen; rather, the "single page" just brings the new content into the appropriate place in the HTML structure that the browser already has loaded.

 

With a single-page app, you get to keep the server focused wholly on storing, serving, and securing your app's underlying data. The "client-side" code, meanwhile, is JavaScript running in the browser which contains all the logic for rendering HTML, and asks the server for the data it needs to present to the user.

 

Single-page apps are here to stay, and being able to separate your data from its presentation is really liberating once you get used to developing that way. You can build the client- and server-side components of your app (which is a fancy way of saying "presentation" and "data handling") separately, and they'll still work when you put them together because the server will provide data in a standardized format. The implications of this become clear the day that the receiving end of the server's data is no longer just a web browser - perhaps you'll be building a mobile app for your site, or another site may wish to integrate your data with theirs. Whatever is built in the future, your server will already be set up to accept and serve data in a standard format, and it's going to work, because your own "website" depends on it as much as any other application will.

 

Just like server-side development, the front-end world has plenty of great frameworks that exist to make your life easier. For single-page apps specifically, Angular.js is a fantastic way to go. Try the tutorial and google around for various podcasts, videos, and how-to articles that show you its power. You'll be left asking yourself why people ever did so much stuff by asking servers for new pages.

[Revy ~ Two Hands 862]

*Beginner

 

While I'm tagging this one as "beginner" because it goes over some basic aspects of web development on a very conceptual level, I am assuming that you understand the following basic premises of web dev:

...

I've yet to come onto a fair bit of that in the web dev course I'm taking, I'm only 6 weeks in. So far we've covered some HTML, CSS. (I take classes in database design, computer systems, and Software Design and development as well). As for the angular.Js thing. I took at look at that whilst there is still a lot more I need to learn to understand that, and a lot else of what you've mentioned. I can see the code is certainly cleaner, and more logical than JQuery. I'll refer back to this thread over time as I learn more, and start to implement some of that.

 

I would agree that the posting is *beginner, but I would class myself at the very bottom of beginner since I have literally 6 weeks experience in web design which equates to really not that much time practising.

 

Thanks for posting, I think it likely I'll be understanding all this soon enough.

Edited November 12, 2013 by Gamer Twilight