Search results

We already saw a similar thing… How can we make a better pattern? We can use more careful matching.… First, the hours: If the first digit is 0 or 1, then the next digit can be any: [01]\d.… Otherwise, if the first digit is 2, then the next must be [0-3].… The alternation | now happens to be between [01]\d and 2[0-3]:[0-5]\d.

If we enter something into the input and then try to use Tab or click away from the <input>, then… If it is reinserted later, then the focus doesn’t return.… The list varies a bit between browsers, but one thing is always correct: focus/blur support is guaranteed… The switch order is: elements with tabindex from 1 and above go first (in the tabindex order), and then… Use tabindex to make anything focusable.

So it becomes easy to fix one thing and break another one.… BDD is three things in one: tests AND documentation AND examples.… We write the spec, implement it, make sure tests pass, then write more tests, make sure they work etc… Making tests separate is useful to get more information about what’s going on, so the second variant… One test checks one thing.

Writing lexical analyzers is a special area, with its own tools and algorithms, so we don’t go deep in… And, if it finds a match, then sets regexp.lastIndex to the index immediately after the match.… Let’s go back to our task.… The flag y makes regexp.exec to search exactly at position lastIndex, not “starting from” it.… Then a search with flag g will go till the end of the text and find nothing, and this will take significantly

When we develop something, we often need our own error classes to reflect specific things that may go… If it receives malformed json, then it throws SyntaxError.… Many things may go wrong.… And then inherit all our custom errors from it. Let’s call it MyError.… Then name property can be used for such checks.

Will it start slowly and then go fast, or vice versa.… A Bezier curve can make the animation exceed its range.… Then the Bezier curve would also extend very low or high, making the animation go beyond its normal range… Then it goes forward, a little bit farther than 400px. And then back again – to 400px.… Limitations of CSS animations compared to JavaScript animations: MeritsSimple things done

By the way, using event delegation here makes our menu very flexible.… Just make sure to check for event.defaultPrevented in each contextmenu handler.… event.stopPropagation() and event.preventDefault() (also known as return false) are two different things… Besides being “just a good thing”, that makes your HTML better in terms of accessibility.… But if we make a button behave as a link using JavaScript and even look like a link using CSS, then &

Promise handlers .then/.catch/.finally are always asynchronous.… Why did the .then trigger afterwards? What’s going on?… If there’s a chain with multiple .then/catch/finally, then every one of them is executed asynchronously… first and then caught.… a chained .then call.

You will quite likely make errors… Oh, what am I talking about?… You are absolutely going to make errors, at least if you’re a human, not a robot.… Press F12 or, if you’re on Mac, then Cmd+Opt+J.… Multi-line input Usually, when we put a line of code into the console, and then press Enter… Open Preferences and go to the “Advanced” pane.

…And this thing flies, keeps humans alive in space! How are such complex devices created?… Which principles could we borrow to make our development same-level reliable and scalable?… A good architect is the one who can make the complex simple.… Once again, the whole “component” thing is nothing special.… Event retargeting and other minor stuff to make custom components better fit the development.

Bad comments.Novices tend to use comments to explain “what is going on in the code”.… There’s a great rule about that: “if the code is so unclear that it requires a comment, then maybe it… have a long “code sheet” like this: Then… But what’s not written may be even more important to understand what’s going on.… You think: “How stupid I was then, and how much smarter I’m now”, and rewrite using the “more obvious

Parentheses group characters together, so (go)+ means go, gogo, gogogo and so on.… Then in result[2] goes the group from the second opening paren ([a-z]+) – tag name, then in result[3]… Then the engine won’t spend time finding other 95 matches.… For instance, if we want to find (go)+, but don’t want the parentheses contents (go) as a separate array… :go)+.

In this chapter we first cover theoretical details about how things work, and then see practical applications… Sleep until a task appears, then go to 1.… The notable thing is that both variants – with and without splitting the job by setTimeout – are comparable… To make them closer, let’s make an improvement.… An important thing, right?

How to make sure that it will be called in the right context?… Now it works, because it receives user from the outer lexical environment, and then… The next solution guarantees that such thing won’t happen.… Going partial without context.What if we’d like to fix some arguments, but not the context this?… gives it ...argsBound – arguments from the partial call ("10:00") Then gives it ...args –

Let’s see an example first, to better understand what we’re talking about, and then practical applications… Then this wrapper is called with 2 as an argument, and it passes the call to the original sum.… We can go further and make a convenience function for current debug logs:… Then, if we call it, again, we’ll get either a new partial (if not enough arguments) or, finally, the… Summary.Currying is a transform that makes f(a,b,c) callable as f(a)(b)(c).

It also allows to trace the code step by step to see what exactly is going on.… Console.If we press Esc, then a console opens below.… The execution is then paused immediately after that function call.… Then we can analyze variables in the debugger to see what went wrong.… If we have enough logging in our code, then we can see what’s going on from the records, without the

Here the first two arguments go into variables and the rest go into titles array:… the end The rest parameters gather all remaining arguments, so the following does not make… So when we need these features, then rest parameters are preferred.… It is possible to do the same thing with the spread syntax.… Note that it is possible to do the same thing to make a copy of an object:

The same thing… The strict equality operator is a bit longer to write, but makes it obvious what’s going on and leaves… Now let’s see some funny things that happen when we apply these rules.… Avoid problems.Why did we go over these examples?… Actually, these tricky things will gradually become familiar over time, but there’s a solid way to avoid

The “capital letter first” is a common agreement, to make it clear that a function is to be run with… Probably not a good thing to use everywhere though, because omitting new makes it a bit less obvious… what’s going on.… But if there is a return statement, then the rule is simple: If return is called with an object, then… We can use constructor functions to make multiple similar objects.

properties in for..in: This call makes… As a result, the execution will go wrong in totally unexpected ways.… Unexpected things also may happen when assigning to obj.toString, as it’s a built-in object method.… First, we can just switch to using Map for storage instead of plain objects, then everything’s fine:… Normally, objects inherit built-in methods and __proto__ getter/setter from Object.prototype, making

And only the server can tell that, so we’ll make an additional request. Algorithm.… First, create a file id, to uniquely identify the file we’re going to upload:… If the name or the size or the last modification date changes, then there’ll be another fileId.… If the file doesn’t yet exist at the server, then the server response should be 0 Then, we can use… records, and if there was an upload of that file, and the current uploaded size is exactly X-Start-Byte, then

Seven of them are called “primitive”, because their values contain only a single thing (be it a string… So we must understand them first before going in-depth anywhere else.… shorthand to make it shorter.… This is a completely different thing from the for(;;) construct that we studied before.… If we’re making a site mainly for a German audience then we probably want 49 to be the first.

Technically, all these variants do the same thing… Name things right.Talking about variables, there’s one more extremely important thing.… Make names maximally descriptive and concise. Examples of bad names are data and value.… Go for it. Reuse or create? And the last note.… As a result, their variables are like boxes into which people throw different things without changing

We can use any other variable name in place of rest, just make sure it has three dots before it and goes… If we want to assign a property to a variable with another name, for instance, make options.width go… into the variable named w, then we can set the variable name using a colon:… Can we take some and then assign the “rest” somewhere?… into the variable varName and, if no such property exists, then the default value should be used.

Let’s make a very brief historical digression.… Then we make a <script> tag with src="http://another.com/weather.json?… Safe Requests are simpler to make, so let’s start with them.… Now we’ll go into details.… Then the response is successful, otherwise it’s an error.

We’ll first take a look at the syntax, and then explore a real-world use case, to see where such thing… Usage for integration.When such thing may be useful?… Let’s say we’re making a website about programming.… Now let’s go on. Let’s say we’re going to dynamically fetch materials from a server.… Please run the previous code (above, observes that element), and then the code below.

The first thing to do is to locate quoted strings, and then we can replace them.… For our task we want another thing. That’s where a lazy mode can help.… To make things clear: usually a question mark ?… They are only used internally to optimize things.… Alternative approach.With regexps, there’s often more than one way to do the same thing.

For example: Quite soon we’re going… Ensure that “use strict” is at the top Please make sure that "use strict" is at… Once we enter strict mode, there’s no going back.… Sometimes, when use strict makes a difference, you’ll get incorrect results.… Luckily, there aren’t many and they actually make our lives better.

That’s rare, but such a thing may happen when a visitor loads outdated JavaScript code, e.g. from a proxy… …In other words, here we do two things: The db.onversionchange listener informs us about a parallel… We can handle things more gracefully in db.onversionchange, prompt the visitor to save the data before… …Handle request success/error (4), then we can make other requests if needed, etc.… split things apart.

Then the function uses them.… Functions == Comments.Functions should be short and do exactly one thing.… If that thing is big, maybe it’s worth it to split the function into a few smaller functions.… Sometimes following this rule may not be that easy, but it’s definitely a good thing.… We are going to return to them many times, going more deeply into their advanced features.

JavaScript animations can handle things that CSS can’t.… If we run them separately, then even though each one has setInterval(..., 20), then the browser would… There’s one more thing to keep in mind.… Increasing the power makes it speed up faster.… First we “pull the bowstring”, and then “shoot”.

but first we’ll see how it works because, of course, primitives are not objects (and here we will make… One of the best things about objects is that we can store a function as one of its properties.… A primitive as an object.Here’s the paradox faced by the creator of JavaScript: There are many things… Things will go crazy in several places.… other hand, using the same functions String/Number/Boolean without new is totally fine and useful thing

If you find it difficult to understand, just go on, continue reading, then return to it some time later… Then it may be difficult to understand what’s going on, so we’re explaining it here.… We’ll see some interesting things along the way.… Or read on if you’re interested in understanding things in-depth. In the example below, rabbit.… But with super things may go wrong.

Although, we’ll try to make things clear anyway.… Then callback(err) is called.… Then callback(null, result1, result2…) is called.… if there’s no error… We load 2.js, then if there’s no error… We load 3.js, then if there’s no error… It does the same thing, and there’s no deep nesting now because we made every action a separate top-level

First we’ll look at the details, and then how to use it for adding new capabilities to built-in objects… Here’s what’s going on: When new Object() is called (or a literal… Primitives.The most intricate thing happens with strings, numbers and booleans.… We may then implement it manually and populate the built-in prototype with it.… For instance, if we’re making an array-like object, we may want to copy some Array methods to it.

That’s done by making a class with special methods.… And then we can use it everywhere.… At the end, we can easily make a live timer.… If needed, we can implement such thing on our own.… But such things can be important.

Then come to you, seeking for an answer. Tell them that shorter is always better.… Laozi (Tao Te Ching) Using similar names for same things makes life more interesting and shows… code, then Peter could use render.., and Ann – paint....… That would make it really hard to identify what’s exactly in the variable now.… A true ninja coder will make them not obvious from the code as well.

There are many tricky things about cookies and their attributes.… Then all subdomains will see such a cookie.… has sensitive content that should never be sent over unencrypted HTTP, the secure flag is the right thing… Normally, if such a thing happens, and a user visits a web-page with a hacker’s JavaScript code, then… But if we are going to set a cookie with an authentication session or a tracking ID, then a user must

The loop in the example above makes three iterations.… That is, begin executes once, and then… If you are new to loops, it could help to go back to the example and reproduce how it runs step-by-step… To make an “infinite” loop, usually the while(true) construct is used.… A label is the only way for break/continue to escape a nested loop to go to an outer one.

They are things like addition +, multiplication *, subtraction -, and so on.… It actually does the same thing… That’s exactly the precedence thing.… Both of these statements do the same thing: increase counter by 1. Is there any difference?… One line does multiple things – not good.

The condition is evaluated: if it’s truthy then… This example will do the same thing as the previous one:… But parentheses make the code more readable, so we recommend using them.… It may be difficult at first to grasp what’s going

The handler can check the data, and if there are errors, show them and call event.preventDefault(), then… In the form below: Go into the text field and press Enter.… Then the submit event is not generated.… It is assumed that if the programmer calls form.submit(), then the script already did all related processing

Not a good thing for sure.… and then repeat it with *. That leads us to the regexp ^(\w+\s?)… Then it becomes ^(\w+)*$. And, to make things more obvious, let’s replace \w with \d.… Then the star quantifier (\d+)* applies.… Back to words and strings.The similar thing happens in our first example, when we look for words by pattern

So it makes sense to check event.code, it’s always the same.… Then event.key is the way to go. Or we want a hotkey to work even after a language switch?… Then event.code may be better.… Default actions.Default actions vary, as there are many possible things that may be initiated by the… These keys make it return false.

For instance, we have a user object with its properties and methods, and want to make admin and guest… There are only two limitations: The references can’t go in circles.… That is actually a super-important thing, because we may have a big object with many methods, and have… For instance, here animal represents a “method storage”, and rabbit makes use of it.… null above it: Note, there’s one funny thing.

Such things are invisible for people using very fast connections, but many people in the world still… The script loads “in the background”, and then runs when the DOM is fully built.… Then scripts will be executed in the document order, just like defer.… Summary.Both async and defer have one common thing: downloading of such scripts doesn’t block page rendering… defer Document order (as they go in the document).

The promise rejects if the fetch was unable to make HTTP-request, e.g. network problems, or there’s no… If we’ve already got the response with response.text(), then response.json() won’t work, as the body… POST requests.To make a POST request, or a request with another method, we need to use fetch options:… Please note, if the request body is a string, then… But, as we’re going to send JSON, we use headers option to send application/json instead, the correct

Then its exports are given to all further importers.… So we’ll see undefined first, and then object.… Analyze its dependencies: imports and then imports of imports etc.… Then we use import to directly import it where it’s needed.… In the next chapter we’ll see more examples of modules, and how things can be exported/imported.

To make it all clear, let’s see more deeply how this is passed along: After the decoration worker.slow… Going multi-argument.Now let’s make cachingDecorator even more universal.… For flexibility, we can allow to provide a hashing function for the decorator, that knows how to make… properties.It is generally safe to replace a function or a method with a decorated one, except for one little thing… If the original function had properties on it, like func.calledCount or whatever, then the decorated

they become text nodes in the DOM, and if we remove them, then there won’t be any.… Then the browser creates <tbody> in the DOM automatically.… But there’s a rule – if something’s in HTML, then it also must be in the DOM tree.… We are not going to touch that node, we even don’t draw it on diagrams, but it’s there.… The browser developer tools are a great help in development: we can explore the DOM, try things and see