My background is back-end server development. Very back-end. Now I work in a pos

Question

My background is back-end server development. Very back-end.

Now I work in a position where I need to also take care of front-end. Nothing fancy but I need to be able to code for front-end as well. As I said no fancy stuff as I am not a designer.

I know some very basic stuff about html/css/js but most of the time I spend googling when I need to do something. So I am wasting time.

To give an example I needed to upload a file from the web page but I was not aware that there is an input tag specifically for file-upload. So I spend quite a while googling to figure out how to do it. So I am not sure if for example this should be something I should have known and it is a gap that I have or not.

So what I am interested in is in what should I invest time to "master" so that what I daily need to do, I will be able to do, without spending too much time searching my way.
In a nutshell I am interested to understanding on what are the core "fundamentals" I should focus.

To give an example:
In CSS I think I should invest time in attribute selectors or positioning but spending time learning fonts is a waste of time for my needs. Am I wrong?

So with this is mind I am interested in the what to must know to survive in html/css/javascript?

Explanation / Answer

I know some very basic stuff about html/css/js but most of the time I spend googling when I need to do something. So I am wasting time.

No, you're not. You're spending time on research and self-directed training, which is the choice you or your employer made when they assigned you to do something you hadn't done before in lieu of hiring someone specifically for the front-end. Instructor-led training may be worthwhile, especially if your organization has an existing training program.

But that's basic professionalism. On to your question:

"What are the core fundamentals' of client-side development I should focus on?"
(In order:)

0: Whatever your organization has already done. If most of the rest of your pages are built on Prototype, use that. If the site you're working on is drupal-based, learn drupal.

1: XMLHttpRequest, along with XML and JSON, and how they communicate with the sever-side of the application. <input type="file" /> is neat, but it winds up as an HTTP request of some kind in the end anyway.

2: JavaScript Events / Asynchronous Programming. Unless your client-side is absolutely trivial, knowing how to properly attach events to the DOM and user interaction is essential. If your client-side app grows in complexity, knowing how to raise events can keep your code DRY.

3: <a>, <form>, <input> elements: The basic set of widgets you have for user interaction are here. Virtually everything else in the HTML standard can be ignored as "design", until you get to complex solutions involving the <iframe> and <object> elements.

4: DOM manipulation. You'll get a lot of mileage from knowing how the client can load or change part of a page. createElement, appendChild, setAttribute, and insertBefore are methods that have utility in client-side programming and XML manipulation. (Reading part of a page can help, too.)

5: CSS selectors. Not the attributes that make up a rule, but the portion of the spec that allows you to select the set of elements that will be rules will be applied to. Every framework I've seen uses a variation of these as its basic syntax, and, as with most of the HTML elements, the specifics of the rules can be ignored as "design"

If your organization doesn't have an existing framework choice, and you've familiarizing yourself with the five items above, then and only then should you take a look at frameworks. jQuery is popular and mostly worth the overhead (especially if it's a public website and you have to deal with cross-browser compatibility), but like any other framework it's far more useful as a tool than a crutch.

(And if you find yourself worrying about fonts, tables, colors, or document flow, stop what you're doing and find your "designer" hat, because you've crossed the rubicon and you're doing design.)

Related Questions

Navigate

• Browse (All)
• Browse M
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.