This document summarizes Nicholas C. Zakas's presentation on maintainable JavaScript. The presentation discusses why maintainability is important, as most time is spent maintaining code. It defines maintainable code as code that works for five years without major changes and is intuitive, understandable, adaptable, extendable, debuggable and testable. The presentation covers code style guidelines, programming practices, code organization techniques and automation tools to help write maintainable JavaScript.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
The first part of a three part beginner track, this talk is for the designer/developer that is just starting out with jQuery. Perhaps you’ve heard of jQuery or you’ve used it occasion- ally, this talk will help you understand the core jQuery library.
We will:
•Cover jQuery’s history
•Introduce you to the core team
•Explain how jQuery works
•Demonstrate how to set-up jQuery
•Explore core jQuery methods and structure • Look through a couple of real-world examples
Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bear in mind. In this talk, we're going to take a look at some of the best practices, tips and tricks for improving the performance of your jQuery code in 2011 with some quick wins and a few new surprises along the way.
jQuery Performance Tips and Tricks (2011)Addy Osmani
Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.
Starting from Constructor Function and Object.create() as methods for creating objects in Javascript, we analize a couple of way to bootstrap a jQuery Plugin.
Best Practices in Plugin Development (WordCamp Seattle)andrewnacin
My talk -- officially named "Y U NO CODE WELL" -- at WordCamp Seattle 2011 on best practices during plugin development. Find the video, as it provides some good context and conversation.
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
Slides apresentados no 16 EDTED, edição Rio de Janeiro, em 21 de Maio de 2011.
Aqui não tem vídeos, animações e códigos apresentados, mas tem os links. Logo passo o link completo.
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
The first part of a three part beginner track, this talk is for the designer/developer that is just starting out with jQuery. Perhaps you’ve heard of jQuery or you’ve used it occasion- ally, this talk will help you understand the core jQuery library.
We will:
•Cover jQuery’s history
•Introduce you to the core team
•Explain how jQuery works
•Demonstrate how to set-up jQuery
•Explore core jQuery methods and structure • Look through a couple of real-world examples
Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bear in mind. In this talk, we're going to take a look at some of the best practices, tips and tricks for improving the performance of your jQuery code in 2011 with some quick wins and a few new surprises along the way.
jQuery Performance Tips and Tricks (2011)Addy Osmani
Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.
Starting from Constructor Function and Object.create() as methods for creating objects in Javascript, we analize a couple of way to bootstrap a jQuery Plugin.
Best Practices in Plugin Development (WordCamp Seattle)andrewnacin
My talk -- officially named "Y U NO CODE WELL" -- at WordCamp Seattle 2011 on best practices during plugin development. Find the video, as it provides some good context and conversation.
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
An update to the Scalable JavaScript presentation of 2009. Describes how to piece together a JavaScript application framework designed for maintainability.
Writing JavaScript as a hobby and writing JavaScript as a job are two very different things. Learn some common practices for making your JavaScript friendly to a team environment.
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
High Performance JavaScript - WebDirections USA 2010Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, “this script is taking too long”? Inside of the browser, JavaScript and the page’s UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn’t about geek cred, it’s about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you’ll learn what’s going on inside the browser that can slow JavaScript down and how that can end up creating a “slow page”. You’ll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there’s still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
Slides from a three hour tutorial presented at XTech 2008 on the 6th of May. See also <a href="http://simonwillison.net/static/2008/xtech/">the supporting notes</a>.
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
Ever wonder why the page appears frozen or why you get a dialog saying, "this script is taking too long"? Inside of the browser, JavaScript and the page's UI are very intertwined, which means they can affect each other and, in turn, affect overall page performance. Ensuring the fastest execution time of JavaScript code isn't about geek cred, it's about ensuring that the user experience is as fast and responsive as possible. In a world where an extra second can cost you a visitor, sluggishness due to poor JavaScript code is a big problem. In this talk, you'll learn what's going on inside the browser that can slow JavaScript down and how that can end up creating a "slow page". You'll also learn how to overcome the conspiracy against your code by eliminating performance bottlenecks.
High Performance JavaScript - Fronteers 2010Nicholas Zakas
For much of its existence, JavaScript has been slow. No one complained until developers created complex web applications with thousands of lines of JavaScript code. Although newer JavaScript engines have improved the situation, there's still a lot to understand about what makes JavaScript slow and what you can do to speed up your code.
Anything that can be written in JavaScript, will eventually be written in JavaScript. First client side web apps, then server side programs and now you can control hardware, embedded devices and even flying robots with JavaScript.
We'll look at how you can get started writing JavaScript for Ardunio and Raspberry Pi to read sensors and control servos and build your own JavaScript powered robots.
Presented at http://2013.full-frontal.org/
These are the slides for this presentation http://www.meetup.com/HardCoreJS/events/133346272/
The goal is to influence the thought process of developers and make them into rockstar engineers by showing how to form the habit of abstraction into one's coding.
jQuery Data Manipulate API - A source code dissecting journeyHuiyi Yan
Represent major data manipulate API in jQuery 1.6; such as .data(), removeData(), index(), globalEval() and so no. Also, HTML5 data-* attributes. I will walk you through with diving into jQuery source code and find out the killing techniques used in jQuery.
Everything is Permitted: Extending Built-insAndrew Dupont
Adding methods to built-in objects: it’s one of JavaScript’s most powerful features. It’s also a great way to offend the sensibilities of your colleagues. We all hear that it’s irresponsible, that it’s sloppy, that it’s flat-out bad practice and should be avoided.
I’m tired of this one-sided battle. In this talk, I’m going to push back against whatever blog post you read that told you that extending built-ins was unconditionally and universally bad. I’m gonna go all Howard Beale on your asses.
How Google AppEngine deals with digital art? how about music? a few case studies developed by Stinkdigital with Google Creative Lab and how App Engine dealt with a considerable amount of visits
Adding a modern twist to legacy web applicationsJeff Durta
Avoid misery of working with legacy code
We will see how you can add independent and isolated components to existing pages; pages that may be difficult to change
React and Flux allow you to make self-contained additions that handle their own data access/persistence
After consulting with several companies on performance related issues, it became clear that one of the biggest performance issues facing websites today is the sheer amount of JavaScript needed to power the page. The demand for more interactive and responsive applications has driven JavaScript usage through the roof. It’s quite common for large sites to end up with over 1 MB of JavaScript code on their page even after minification. But do today’s web applications really need that much JavaScript?
Believe it or not, accessibility is more than just screen readers. There's a whole group of users who only use a keyboard (without a mouse). Learn how to make the web a friendly place for all kinds of people by ensuring keyboard accessibility.
As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
JavaScript testing has grown by leaps and bounds over the past few years. When YUI Test was first introduced in 2007, it was just the first step in a long process of bringing test-driven development to the front end. YUI Test evolved with the release of YUI 3 to introduce mock objects as feedback indicated a need. As feedback continued to come in, YUI Test continued to evolve. Learn about the next version of YUI Test, how it makes testing any JavaScript code easier, and the brand new tools that allow you to integrate your testing into a continuous integration environment.
Overhauling one of the most visited web sites in the world is a major task, and add on top of it the pressure of keeping performance the same while adding a ton of new features, and you have quite a task. Learn how the Yahoo! homepage team achieved performance parity with the previous version even while adding a ton of new features.
My talk at the January 21, 2009 Mountain View JavaScript Meetup about the performance of JavaScript variables relative to their position in the scope chain.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
12. Maintainable code works for
five years without major
changes
• Intuitive
• Understandable
• Adaptable
• Extendable
• Debuggable
• Testable
http://flickr.com/photos/simax/3390895249/
13. Be kind to your future
self.
Chris Eppstein,
Creator of Compass
16. Programs are meant to be
read by humans and
only incidentally for
computers to execute.
H. Abelson and G. Sussman,
The Structure and Interpretation
of Computer Programs
24. if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if (s.hasOwnProperty(p)) { if (merge && type
== 'object') {
Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
}
25. if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if (s.hasOwnProperty(p)) {
if (merge && type == 'object') {
Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
}
31. /**
* Returns a new object containing all of the properties of
* all the supplied objects. The properties from later objects
* will overwrite those in earlier objects. Passing in a
* single object will create a shallow copy of it. For a deep
* copy, use clone.
* @method merge
* @for YUI
* @param arguments {Object*} the objects to merge.
* @return {object} the new merged object.
*/
Y.merge = function() {
var a = arguments, o = {}, i, l = a.length;
for (i = 0; i < l; i = i + 1) {
Y.mix(o, a[i], true);
}
return o;
};
Every method
32. if (mode) {
switch (mode) {
case 1: // proto to proto
return Y.mix(r.prototype, s.prototype, ov, wl, 0,
merge);
case 2: // object to object and proto to proto
Y.mix(r.prototype, s.prototype, ov, wl, 0, merge);
break; // pass through
case 3: // proto to static
return Y.mix(r, s.prototype, ov, wl, 0, merge);
case 4: // static to proto
return Y.mix(r.prototype, s, ov, wl, 0, merge);
default: // object to object is what happens below
}
}
Difficult-to-understand code
33. while (element &&(element = element[axis])){ //NOTE: assignment
if ( (all || element[TAG_NAME]) &&
(!fn || fn(element)) ) {
return element;
}
}
Code that might seem to be wrong
35. Naming
• Use logical names for variables and functions
– Don't worry about length
• Variable names should be nouns
• Function names should begin with a verb (i.e.
getName())
– Functions return booleans should begin with
"is" or "has", such as isValid() or hasItem()
• Avoid useless names such as foo and temp
36. if (wl && wl.length) {
for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]);
if (s.hasOwnProperty(p)) {
if (merge && type == 'object') {
Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
}
37. // Variables, functions, properties methods
var myName = "Nicholas";
function sayName() {
alert(myName);
}
var person = {
name: "Nicholas",
sayName: function() {
alert(this.name);
}
};
Camel Casing
39. var element = document.getElementById("my-div");
element.innerHTML = "Hello world!"; WTF?
var xhr = new XMLHttpRequest();
No, seriously
WTF?
Camel Casing
40. // Constant-like variables
var HOVER_CLASS = "mouse-over";
// Constructors
function Person(name) {
this.name = name;
}
var me = new Person("Nicholas");
Camel Casing- Exceptions
42. There are two ways of
constructing a software
design: One way is to make it
so simple that there are
obviously no deficiencies and
the other way is to make it so
complicated that there are no
obvious deficiencies.
C.A.R. Hoare,
Quicksort Developer
46. var element = document.getElementById("container");
element.innerHTML = "<div class="popup"></div>";
Keep HTML out of JavaScript
47. .foo {
width: expression(document.offsetWidth + "px");
}
Keep JavaScript out of CSS
48. var element = document.getElementById("container");
element.style.color = "red";
element.style.cssText = "background:blue;border:1px solid red";
Keep CSS out of JavaScript
49. //the wrong way!!!
function handleClick(event){
var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
}
Event handlers should only handle events
50. //better, but still wrong
function handleClick(event){
showPopup(event);
}
function showPopup(event){
var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
}
Don't pass the event object around
51. //win!!
function handleClick(event){
showPopup(event.clientX, event.clientY);
}
function showPopup(x, y){
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
}
Properly separated event handling
52. //don't add new methods
Array.prototype.awYeah = function(){
alert("Aw yeah!");
};
//don't override methods
YUI.use = function(){
alert("Aw yeah!");
};
Don't modify objects you don't own
If you didn't define the object yourself, you don't own it
54. function handleClick(event){
showPopup(event.clientX, event.clientY);
}
function showPopup(x, y){
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
}
Avoid global functions and variables
55. var Controller = {
handleClick: function(event){
this.showPopup(event.clientX, event.clientY);
},
showPopup: function (x, y){
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
}
};
Avoid global functions and variables
Create a single global (if necessary) and attach everything to it
56. var Controller = {
addClass: function(element, className){
element.className += " " + className;
}
};
Throw your own errors
When you know a function will fail
57. var Controller = {
addClass: function(element, className){
if (!element) {
throw new Error("addClass: 1st argument missing.");
}
element.className += " " + className;
}
};
Throw your own errors
When you know a function will fail
59. var Controller = {
process: function(items){
if (items instanceof Array){
items.sort();
items.forEach(function(item){
//do something
});
}
}
};
Avoid null comparisons
Test for precisely what you want to know if it matters
60. Avoid null comparisons
• Use instanceof to test for specific object types
– object instanceof MyType
• Use typeof to test for primitive types
– typeof value == "string"
– BEWARE: typeof null == "object"
61. function validate(value) {
if (!value) {
alert("Invalid value");
location.href = "/errors/invalid.php";
}
}
Separate config data
62. var config = {
urls: {
invalid: "/errors/invalid.php"
},
strs: {
invalidmsg: "Invalid value"
}
};
function validate(value) {
if (!value) {
alert(config.strs.invalidmsg);
location.href = config.urls.invalid;
}
}
Separate config data
63. Separate Config Data
• All URLs needed by the JavaScript
• Any strings that are displayed to the user
• Any HTML that needs to be created from JavaScript
• Settings (i.e., items per page)
• Repeated unique values
• Any value that may change in the future
83. Remember
• Code style guidelines ensure everyone's speaking
the same language
• Loose coupling of layers make changes and
debugging easier
• Good programming practices allow for easier
debugging
• Code organization and automation help to bring
sanity to an otherwise crazy process
Over the past couple of years, we've seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there's unit testing for JavaScript, and so much more. One of the areas that I've seen a much slower than adoption that I'd like is in the area of error handling.How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end?Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what's going on, how often it's occurring, or how many people have been affected.
So what have we talked about? Maintainable JavaScript is made up of four components.First is Code Conventions that describe the format of the code you’re writing.Second is Loose Coupling – keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers.Third is Programming Practices that ensure your code is readable and easily debugged.Fourth is creating a Build Process