Preamble
- Course Title: Web Advanced using JavaScript (PGTE 5505-A)
- Location: 6 East 16th St, Rm D600
- Day and Time: Thursdays, 7:00 PM – 9:40 PM
- Dates: 28 January – 12 May 2016
-
Instructor: Roy Vanegas (vanegasr at newschool dot edu)
- Office Hour: By appointment
-
Tutor: Umi Syam (umi at newschool dot edu)
- Office Hour: Tuesdays and Thursdays, 4:00 PM – 5:30 PM; Room D12
Prerequisite
Bootcamp (PGTE 5410) is the pre-requisite for this course. If you haven’t taken Bootcamp, you’ll have to demonstrate a strong knowledge of HTML and CSS.
Description
The modern web development stack has changed significantly since the mid 2000s. CSS pre-processors, work flow automation tools, and server-side JavaScript have all played crucial roles in how modern web developers create web sites. In addition, the increased popularity of mobile devices have forced web developers to place a strong focus on performance. This course will emphasize best practices for creating efficient web sites by employing the JavaScript-based Gulp task runner to automate our work flow; Sass for pre-processing CSS in order to approach the language from a programmatic standpoint; pure JavaScript for the most popular interactions in order to avoid the overhead of using libraries, such as jQuery; Node on the server-side in order to employ event-driven, asynchronous input/output using JavaScript; and, finally, MySQL as the database required for data-driven projects.
The description provided by Parsons is here.
Learning Outcomes
By course’s end, you will understand…
- how to properly work with modular grids in web design layout.
- how to automate your web-based work flow.
- how to author CSS programmatically.
- how and when to implement advanced search and sorting JavaScript algorithms.
- how to maintain JavaScript web applications.
- how to author the most popular JavaScript interactions in order to avoid using an external library.
- how to optimize web sites for performance.
- how to manage your projects using Git as your source code management system (SCMS).
- how to use JavaScript as a server-side language via Node.
Class Schedule
- Where: 6 East 16th St, Rm D600
- Day: Thursday
- Dates: 28 January – 12 May 2016
- Time: 7:00 PM – 9:40 PM
Note: the schedule below is somewhat tentative. Covering all the topics depends on the rhythm of the class.
| Week | Topics | Homework |
|---|---|---|
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
|
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
Assignments
Assignment 1
The first assignment is available to view at here. However, to keep abreast of development, you should clone the repo: git clone git@github.com:code-warrior/web-advanced-using-javascript.git.
Assignment 2
Pending
Assignment 3
Pending
Software Requirements
Whether you use Windows or Mac, all the necessary software for this course is listed below. It’s all free and downloadable from their respective links.
Browsers
Download all the browsers available at Browse Happy.
Enabling The Root User
The super, or root, user is a special account included with Macs and Linuxes. On Macs, this user is disabled by default. You must enable this user for the work you’ll do in this class. Follow these instructions to do so.
A Command Line Interface
Mac and Linux users do not have to install a CLI, because these operating systems already have The Terminal installed. Windows users, however, need to install Cygwin.
Mac users must install this set of environment files.
Sass
You’ll need to install Sass from The Terminal: gem install sass. The latest version is 3.4.19 (Selective Steve). Type sass --version to which version you installed.
Grids
You’ll need a grid for your work. We’ll use this modular web-based grid in class and for your projects. Many links to other grids are available from The Grid System.
Node and Gulp
Download the latest stable release of Node from nodejs.org and follow the default instructions. Note: installing Node also installs NPM, which is needed to install Gulp.
With Node installed, type npm install --global gulp in your CLI, which, on a Mac, is The Terminal. If you get a write access error, precede the command with sudo by typing sudo npm install --global gulp. You’ll be asked for the current admin’s password.
ESLint
ESLint is a JavaScript code linter that will help to make sure your code is free of errors and bad practices. Note: Before proceeding, you must have installed Node and NPM.
Once installed, launch The Terminal and initiate the configuration process: eslint --init. Configure ESLint according to the following settings:
Text Editor
The code you write will require a text editor. Sublime Text (available for Mac, Windows, and Linux) is this course’s supported editor. We’ll use this tool to create a detailed preferences file for you to use with Sublime Text in order to increase your web development efficiency.
Integrated Development Environment (IDE)
JetBrains makes WebStorm for front-end work (HTML, CSS, JavaScript) and PhpStorm for full-stack projects (HTML, CSS, JavaScript, PHP, and MySQL). For the duration of your student status, you’re eligible for a free license.Fonts
As designers, you’ll likely want to program using a beautiful font instead of the banal fixed width fonts that are stock issue in Mac OS X and Windows. Here are a few options:
A Link Checker
The W3’s Link Checker isn’t software you download, but a utility that verifies links on a web page so you don’t have to. Bookmark it.
Grading Standards
Grading Formula
Your grade for this course will be computed entirely on the following formula:
- Assignment 1 (25%)
- Assignment 2 (25%)
- Assignment 3 (25%)
- Attendance (25%)
The A Range
A (“Work of exceptional quality”)
Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might — or should — share their knowledge with their classmates, and they are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices, and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.
A- (“Work of high quality”)
In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed too many classes, showed up to class late too often, or submitted an assignment/homework that was not “A”-level.
The B Range
B+ (“Very good work”)
Students earning grades of “B+” produce very good work, which is close with that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, they are under control and do not impede user experience or content.
B (“Good work; satisfies course requirements”)
Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.
B- (“Below-average work”)
Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”
The C Range
C+ (“Less than adequate work”)
“These are average assignments. They will demonstrate some success in engaging with the assigned material. The document will show that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, the assignment will demonstrate effort in the areas of user experience, interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering, however, the assignments still work and an effort to debug and fix errors is present.”
C (“Well below average work”)
In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.
C- (“Poor work; lowest possible passing grade”)
A student who earns a grade of “C-” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended.
F (“Failure”)
Failing grades are earned by students who do not submit required work, produce incomplete work, and/or do not take examinations (without prior notification and approval). Grades of “F” are also earned by students who show no comprehension of the topics discussed in class and no forthcomingness to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.
W (“Withdraw”)
The grade of W may be issued by the Office of the Registrar to a student who officially withdraws from a course within the applicable deadline. There is no academic penalty, but the grade will appear on the student transcript.
WF (“Withdraw Fail”)
The grade of WF is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade. The WF is equivalent to an F in calculating the grade point average (zero grade points), and no credit is awarded.
I (“Incomplete”)
The grade of I, or temporary incomplete, may be granted to a student under unusual and extenuating circumstances, such as when the student’s academic life is interrupted by a medical or personal emergency. This mark is not given automatically but only upon the student’s request and at the discretion of the instructor. A Request for Incomplete form must be completed and signed by student and instructor. The time allowed for completion of the work and removal of the “I” mark will be set by the instructor with the following limitations:
Undergraduate Students: Work must be completed no later than the seventh week of the following fall semester for spring or summer term incompletes and no later than the seventh week of the following spring semester for fall term incompletes. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “WF” by the Office of the Registrar.
Graduate Students: Work must be completed no later than one year following the end of the class. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “WF”.
Important Note
Please, please do not try to negotiate a grade with me — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers.
Divisional, Program, and Class Policies
- Responsibility: Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize your successful completion of this course.
- Participation: Class participation is an essential part of class and includes: keeping up with reading, assignments, projects, contributing meaningfully to class discussions, active participation in group work, and coming to class regularly and on time.
- Attendance: Faculty members may fail any student who is absent for a significant portion of class time. A significant portion of class time is defined as three absences for classes that meet once per week and four absences for classes that meet two or more times per week. During intensive summer sessions a significant portion of class time is defined as two absences. Lateness or early departure from class may also translate into one full absence.
- Blackboard or Canvas: Use of Blackboard may be an important resource for this class. Students should check it for announcements before coming to class each week.
- Delays: In rare instances, I may be delayed arriving to class. If I have not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for my arrival. In the event that I will miss class entirely, a sign will be posted at the classroom indicating your assignment for the next class meeting.
- Electronic Devices: Use of electronic devices (phones, tablets, laptops) is permitted when the device is being used in relation to the course’s work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
- Academic Honesty and Integrity: The New School views “academic honesty and integrity” as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this “accurate use”. The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. Please see the complete policy in the Parsons Catalog. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from the university, or dismissal from the university.
- Student Disability Services (SDS): In keeping with the University’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations will be kept confidential. Students requesting any accommodations will also need to meet with Jason Luchs in the Office of Student Disability Services, who will conduct an intake, and if appropriate, provide an academic accommodation notification letter to you to bring to me. SDS assists students with disabilities in need of academic and programmatic accommodations as required by the Americans with Disabilities Act of 1990 (ADA) and Section 504 of the Federal Rehabilitation Act of 1973. http://www.newschool.edu/studentservices/disability/.
Resources
HTML
- The Sitepoint HTML Reference is a reference mainly for HTML4.01, but is very helpful, nonetheless.
- HTML5 Doctor is a tutorials/blog about HTML5.
- HTML5 Rocks is also a tutorials/blog about HTML5.
- The HTML5 Boilerplate provides users with a generic template for web projects, and is configurable online.
CSS
- Eric Meyer’s base/reset CSS is a reliable way of cancelling out browser styles.
- Chris Coyier’s CSS-Tricks provides CSS-based tutorials and — of course — tricks.
- Sitepoint’s CSS Reference provides useful explanations of CSS2.1 concepts (and some early CSS3, also).
- Can I Use a CSS, HTML, JavaScript, or other web-based syntax in new code?
- A CSS3 gradient generator that helps with the unwieldy CSS3 gradient syntax.
- A specificity calculator that is useful in reinforcing the concepts of specificity.
JavaScript
- The JavaScript reference at the Mozilla Developer Network, or MDN
- The JavaScript DOM API reference at MDN
Validators and Linters
- The HTML Validation Tool validates your HTML as valid HTML5 code.
- The CSS Validation Service validates your CSS source.
- Keeping in the tradition of C’s lint tool, JSLint is a strict JavaScript syntax linter (checker).
- JSHint is a more lenient JavaScript linter.
Sublime Text
Help
You have four options for help:
- The Google Group
- The Internet (including Stack Overflow and the like)
- Your Tutor
- Me
The Google Group
Posting your questions to the Group is equivalent to doing so in class: everyone is exposed to your question and my or Niki’s answer. In general, if you’d ask a question during class, then its appropriate for the Group.
The Internet
Google your questions, error messages, and the like. It’s highly likely that many others have asked your same question or gotten the same error, and that one or more people have posted answers. The Q&A web site Stack Overflow will prove especially helpful. Read about how it works here.
Our Tutor
The tutor for this class has her schedule and email listed in the Preamble section above.
Me
There will be myriad opportunities for you to ask me questions: during, before, or after class and during breaks.